JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" style="display: none;">
<thead>
  <tr>
    <th>ID</th>
    <th>Kişi</th>
    <th>Ses</th>
    <th>Tarih</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>PcK0</td>
    <td>
      <audio>,
        <source src="http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg" type="audio/ogg">
        Your browser does not support the audio element.
      </audio>
      <span>Oynat</span>
    </td>
    <td>13 Nisan 2016 Çarşamba, 21:40</td>
  </tr>
  <tr>
    <td>2</td>
    <td>SSH</td>
    <td>
      <audio>,
        <source src="http://upload.wikimedia.org/wikipedia/en/0/0e/Old_folks_at_home_sample.ogg" type="audio/ogg">
        Your browser does not support the audio element.
      </audio>
      <span>Oynat</span>
    </td>
    <td>13 Nisan 2016 Çarşamba, 21:41</td>
  </tr>
  <tr>
    <td>3</td>
    <td>unbalanced</td>
    <td>
      <audio>,
        <source src="http://upload.wikimedia.org/wikipedia/en/3/33/Good_Fortune_%28PJ_Harvey_song_-_audio_sample%29.ogg" type="audio/ogg">
        Your browser does not support the audio element.
      </audio>
      <span>Oynat</span>
    </td>
    <td>13 Nisan 2016 Çarşamba, 21:42</td>
  </tr>
</tbody>
</table>

CSS

span {
  cursor: pointer;
  color: blue;
  text-decoration: underline;
}
span:hover {
  text-decoration: none;
}

JavaScript

$('table').css('display', 'table');

$('audio').on('pause', function() {
  $(this).prop("currentTime",0).removeAttr('data-d').next().text('Oynat');
});

$('span').click(function() {
	var b = $(this);
	if(b.text() == 'Oynat') {
  	$('audio[data-d="p"]').trigger('pause').removeAttr('data-d').next().text('Oynat');
    b.text('Durdur').prev().prop('currentTime',0).trigger('play').attr('data-d', 'p');
  } else {
  	b.text('Oynat').prev().trigger('pause');
  }
});