HTML Audio Play/Stop

Я делаю чат-приложение, и одна из функций посылает звук. HTML, который отсылается является следующее:HTML Audio Play/Stop

<p> 
    <audio autoplay> 
     <source src="sounds/lol.mp3" type="audio/mpeg"> 
    </audio> 
    LOL 
    <a href="#" id="soundStop">Stop</a> 
    <a href="#" id="soundPlay" style="display:none;">Play</a> 
</p>

«автозапуск» отлично работает, когда он отправляется в первый раз. Так что теперь мне нужна ссылка для воспроизведения/остановки, чтобы слышать звук снова столько раз, сколько вы хотите. У меня есть следующие Javascript:

$(document).on('click', '#soundStop', function(e) { 
    $(this).hide(); 
    $(this).next("a").show(); 
    $('audio').each(function(){ 
     this.pause(); 
     this.currentTime = 0; 
    }); 
    e.preventDefault(); 
}); 

$(document).on('click', '#soundPlay', function(e) { 
    $(this).hide(); 
    $(this).prev("a").show(); 
    $(this).closest("audio").play(); 
    //alert("play sound again!"); 
    e.preventDefault(); 
});

Функция остановки работы (хотя я не уверен, что таргетинг на все элементы «Audio» является хорошей идеей). Но я зациклился на том, как настроить аудио элемент на .play() во второй функции. Возможно, я ошибаюсь?

Любая помощь или совет приветствуются.

РЕДАКТИРОВАТЬ: Для уточнения, может быть несколько экземпляров этих звуков, которые отправляются, поэтому мне нужен способ ориентироваться только на конкретный «звук» для каждого.

источник

2013-06-29 user2534723

Почему вы не используете готовые к использованию элементы управления звуковым тегом. Это будет служить вашей цели.

Попробуйте этот код:

<!DOCTYPE html> 
<html> 
<body> 
    <audio autoplay controls> 
     <source src="horse.ogg" type="audio/ogg"> 
    </audio> 

</body> 
</html>

Customer Controls

<!DOCTYPE html> 
<html> 
<body> 
<audio id="player" src="horse.ogg"></audio> 
<div> 
    <button onclick="document.getElementById('player').play()">Play</button> 
    <button onclick="document.getElementById('player').pause()">Pause</button> 
    <button onclick="document.getElementById('player').volume+=0.1">Volume Up</button> 
    <button onclick="document.getElementById('player').volume-=0.1">Volume Down</button> 
</div> 
</body> 
</html>

источник

2013-06-29 14:47:26

будет работать, но мне нужно пользовательский контроль, так что я могу стиль его. – user2534723

Я получил код для пользовательских кнопок Play Play –

Спасибо за ответ, но это не очень вписывается в код я предоставил. Просто нужно настроить таргетинг на определенный аудио элемент в предоставляемой функции jQuery. – user2534723

HTML Audio Play/Stop

ответ

Смежные вопросы