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

```css
.d-table {
  display:table !important;
}

.d-table-cell {
  display:table-cell !important;
}

.w-100 {
  width: 100% !important;
}

.tar {
  text-align: left !important;
}
```

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class=" d-table w-100">
<p class="d-table-cell">بِسْمِ ٱللَّهِ ٱلرَّحْمَٰنِ ٱلرَّحِيمِ</p>
  <div class="d-table-cell tar w-10">
 <audio id="player2" src="http://www.mp3naat.com/download/owais-raza-qadri/mustafa-jaan-e-rehmat.mp3"></audio>    
<a onclick="document.getElementById('player2').play()"><i  class="fa fa-play-circle-o fa-2x"></i></a>
<a onclick="document.getElementById('player2').pause()"><i  class="fa fa-pause-circle-o fa-2x"></i></a> 
  </div>
</div>
```