javascript - jQuery:单击 native 音频元素

Question

如何使用 jQuery 检测对 native 浏览器音频元素的点击？

似乎在 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

你的说法是正确的，它似乎无法以通常的方式调用 native 音频标签，既不使用vanilla js也不使用jquery。我尝试使用一个类(我认为会成功)但无济于事。

但是，我想我已经解决了您的整体问题。尝试下面的代码片段。当一名玩家被选中后，其他玩家就会停止。 (一次只有一个人玩)。

您可以通过在播放时添加一个可见类来扩展它，将可见性设置为隐藏或显示:默认情况下无(但实际上您将如何单击播放？ - 嗯)无论如何，要点是，根据您的意愿进行自定义.

希望这有帮助

$("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>