jQuery: при щелчке на собственном звуковом элементе

Question

Как вы можете обнаружить щелчок на аудиоэлементе собственного браузера с помощью jQuery?

Кажется, что не работает в Chrome.

$('audio').click(function(){ 
 
    alert("You clicked on some audio player"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<audio preload="none" src="http://webaudioapi.com/samples/audio-tag/chrono.mp3" type="audio/mpeg" controls=""></audio>

http://codepen.io/Subfader/pen/GqrmNQ

Answer 1

Вы правы, говоря, что он, похоже, не может вызвать собственный звуковой тег обычным способом, не используя vanilla js и jquery. Я попытался использовать класс (который, как я думал, будет успешным), но безрезультатно.

Однако, я сказал, что у меня есть решение вашей общей проблемы. Попробуйте приведенный ниже фрагмент. Когда один игрок выбран, остальные останавливаются. (за один раз воспроизводится только один).

Вы можете расширить это, добавив видимый класс при воспроизведении отображения видимости для скрытия или отображения: по умолчанию нет (но на самом деле тогда как вы нажмете кнопку воспроизведения?) Hmmm) Во всяком случае, укажите, настройте, как вы пожелает.

надеюсь, что это помогает

$("audio").each(function(index) { 
 
    var num = index+1; 
 
    $(this).attr('id','myaudio' + num); 
 
}); 
 

 
document.addEventListener('play', function(e){ 
 
    var aplayers = $('audio'); 
 
    var leng = $('audio').length; 
 
    //console.log(leng); 
 
    for(var i = 0; i < leng;i++){ 
 
     if (aplayers[i] != e.target){ 
 
      aplayers[i].pause(); 
 
     } 
 
    } 
 
}, true);

audio{margin-bottom:10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<audio id=' ' controls src="http://www.soundjay.com//mechanical/gun-cocking-01.mp3"> 
 
</audio> 
 

 
<audio id=' ' src="http://www.rachelgallen.com/monkey.mp3" controls> 
 
</audio> 
 

 
<audio preload="none" src="http://webaudioapi.com/samples/audio-tag/chrono.mp3" type="audio/mpeg" controls=""></audio>

Answer 2

Это не выглядит, как он работает даже с помощью обычного JavaScript в Chrome. Я бы предложил вам обернуть ваш элемент <audio> в div и поместить событие click на этот элемент.

Или в зависимости от того, что вы пытаетесь достичь, вы могли бы связать с другими Media events, таких как play, pause или seek.