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

你是说，它似乎并没有能够调用通常的方式在本地音频标签，无论是用香草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>

Answer 2

它看起来并不像它即使使用普通的JavaScript在浏览器的工作原理。我建议你换你<audio>元素在一个div并将该元素上的click事件来代替。

或者，这取决于你想完成什么，你可以结合其他Media events如play，pause或seek。