Вход

Просмотр полной версии : HTML5 audio, onClick


mvadim007
30.03.2014, 23:04
Добрый вечер.
Возникла небольшая проблема при работе с аудиофайлами по средствам 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
31.03.2014, 00:44
Родился афоризм: "Из тебя программист, что из Тимати - блэк-стар.":D
Сделай отдельный модуль, отвечающий за воспроизведение, а кнопками play/pause отправляй ему команды "играй то"/"не играй".

jsnb
31.03.2014, 04:52
Ну так останавливай остальные перед запуском текущей...
function pauseAll() {
var audios = document.querySelectorAll('audio');
for(var i = 0; i < audios.length; i++) audios[i].pause();
}

mvadim007
01.04.2014, 02:52
Ну так останавливай остальные перед запуском текущей...
function pauseAll() {
var audios = document.querySelectorAll('audio');
for(var i = 0; i < audios.length; i++) audios[i].pause();
}

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

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

mvadim007
01.04.2014, 18:26
Помимо того, чтобы вставить код, надо еще вызвать функцию. Пропиши ее вызов в onclick до запуска воспроизведения.
Большое спасибо, сработало :)