title: play pause button to toggle button
body: <p>please help me, play/pause button to one toggle button 
  mean one time click audio is play second time click then audio is pause with icon change. thanks in advance</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.d-table {
    display:table !important;
  }
  
  .d-table-cell {
    display:table-cell !important;
  }
  
  .w-100 {
    width: 100% !important;
  }
  
  
  .tar {
    text-align: left !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;div class=" d-table w-100"&gt;
  &lt;p class="d-table-cell"&gt;بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ&lt;/p&gt;
    &lt;div class="d-table-cell tar w-10"&gt;
   &lt;audio id="player2" src="http://www.mp3naat.com/download/owais-raza-qadri/mustafa-jaan-e-rehmat.mp3"&gt;&lt;/audio&gt;    
  &lt;a onclick="document.getElementById('player2').play()"&gt;&lt;i  class="fa fa-play-circle-o fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;a onclick="document.getElementById('player2').pause()"&gt;&lt;i  class="fa fa-pause-circle-o fa-2x"&gt;&lt;/i&gt;&lt;/a&gt; 
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>