HTML5 audio, onClick

[mvadim007]

Добрый вечер.
Возникла небольшая проблема при работе с аудиофайлами по средствам HTML5 (audio).
Вот код:

<table class="table table-condensed">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>Singer</th>
                      <th>Song</th>
                      <th>Play</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>Timati</td>
                      <td>Welcome to Santropez</td>
                      <td>
                      	<audio id="timati-santrope" src="songs/timati-santrope.mp3"></audio>
                      	<span class="glyphicon glyphicon-play play" onClick="document.getElementById('timati-santrope').play()"></span>
                        <span class="glyphicon glyphicon-pause play" onClick="document.getElementById('timati-santrope').pause()"></span>
                      </td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>The Black Eyed Peace</td>
                      <td>Let`s Get it Started</td>
                      <td>
                      	<audio  id="bep-getstart" src="songs/black-eyed-peace-let's-get-started.mp3"></audio>
                      	<span class="glyphicon glyphicon-play play" onClick="document.getElementById('bep-getstart').play()"></span>
                        <span class="glyphicon glyphicon-pause play" onClick="document.getElementById('bep-getstart').pause()"></span>
                      </td>
                  </tbody>
                </table>

Получается у нас есть небольшой плейлист. Теперь если мы захотим воспроизвести обе песни, они воспроизведутся и получится каша. Как сделать, чтобы при клике на span onClick...play() прекращалось воспроизведение предыдущей песни и начиналась воспроизведение песни на которую вы кликнули?

[Sweet]

Родился афоризм: "Из тебя программист, что из Тимати - блэк-стар."
Сделай отдельный модуль, отвечающий за воспроизведение, а кнопками play/pause отправляй ему команды "играй то"/"не играй".

[jsnb]

Ну так останавливай остальные перед запуском текущей...

function pauseAll() {
  var audios = document.querySelectorAll('audio');
  for(var i = 0; i < audios.length; i++) audios[i].pause();
}

[mvadim007]

function pauseAll() {
  var audios = document.querySelectorAll('audio');
  for(var i = 0; i < audios.length; i++) audios[i].pause();
}

Попробовал вставить данный код, но все равно не работает.
Пробовал заменить querySelectorAll на getElementsByTagName, все равно никаких результатов.
Может я что то не так делаю?
п.с. скрипт находится в body до самого плейлиста

[jsnb]

Попробовал вставить данный код, но все равно не работает.

Помимо того, чтобы вставить код, надо еще вызвать функцию. Пропиши ее вызов в onclick до запуска воспроизведения.

[mvadim007]

Помимо того, чтобы вставить код, надо еще вызвать функцию. Пропиши ее вызов в onclick до запуска воспроизведения.

Большое спасибо, сработало