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

即使在 Chrome 中使用纯 JavaScript，它看起来也不起作用。我建议您将 <audio> 元素包装在 div 中，然后将点击事件放在该元素上。

或者根据您要完成的目标，您可以绑定到其他 Media events，例如 play、pause 或 seek。

Answer 2

你说得对，它似乎无法以通常的方式调用原生音频标签，无论是使用 vanilla js 还是 jquery。我尝试使用 class （我认为会成功）但无济于事。

不过，我想我有办法解决您的整体问题。试试下面的代码片段。选择一个玩家时，其他玩家停止。（一次只能播放一个）。

你可以通过在播放时添加一个可见的 class 来扩展它，使可见性设置为隐藏或默认设置为 display:none（但实际上你将如何点击播放？ - 嗯）无论如何,重点是,随心所欲地定制。

希望这对您有所帮助

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

jQuery：点击原生音频元素

jQuery: On click on native audio element

javascript

audio

jquery

html5-audio