Question

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

似乎无法在Chrome中使用。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 1

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

但是，我说我认为我的解决方案可以解决您的整体问题。试试下面的代码片段。当选择一个玩家时，其他玩家停止。（一次只播放一个）。

你可以通过在播放时将可见性设置为隐藏或显示来扩展它：默认情况下是none（但实际上你会如何点击播放？ - 嗯）无论如何，点是，按照你的意愿自定义

希望这会有所帮助

＆＃13;

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

＆＃13;

audio{margin-bottom:10px;}

＆＃13;

<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>

＆＃13;

Answer 2

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

或者，根据您尝试完成的操作，您可以绑定到其他Media events，例如play，pause或seek。

jQuery：点击原生音频元素

2 个答案: