[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() прекращалось воспроизведение предыдущей песни и начиналась воспроизведение песни на которую вы кликнули?