我在一个页面上有很多audio
元素,我想一次只播放一个元素。也就是说,如果正在播放一个audio
元素,并且我点击另一个元素上的播放,则前一个audio
元素应该暂停。
我从另一个问题中找到了一个jQuery代码来执行此操作但是使用图像作为播放/暂停控件。我正在使用controls='controls'
元素的内置audio
属性。在我的情况下,是否可以使用jQuery来控制audio
元素的播放/暂停功能?
这是我的HTML代码
<div>
<p class="song"><h3><strong>#1 Intro - The Oath</strong></h3><p>
<audio class="playback" src=http://geo-samples.beatport.com/lofi/5005876.LOFI.mp3 controls='controls' preload="none">
<I>Your browser does not support the audio element.</I>
</audio>
</div>
<div>
<p class="song"><h3><strong>#2 A State Of Trance Year Mix 2013</strong></h3></p>
<audio class="playback" src=http://geo-samples.beatport.com/lofi/5005933.LOFI.mp3 controls='controls' preload="none">
<I>Your browser does not support the audio element.</I>
</audio>
</div>
这是jQuery代码
$(document).ready(function() {
var curPlaying;
$(function() {
$(".playback").click(function(e) {
e.preventDefault();
var song = $(this).next('audio')[0];
if(song.paused){
song.play();
if(curPlaying) $("audio", "#"+curPlaying)[0].pause();
} else { song.pause(); }
curPlaying = $(this).parent()[0].id;
});
});
});
jQuery代码似乎对我不起作用。
答案 0 :(得分:19)
$(function(){
$("audio").on("play", function() {
$("audio").not(this).each(function(index, audio) {
audio.pause();
});
});
});
答案 1 :(得分:3)
这是一个不需要jQuery的解决方案。
function onlyPlayOneIn(container) {
container.addEventListener("play", function(event) {
audio_elements = container.getElementsByTagName("audio")
for(i=0; i < audio_elements.length; i++) {
audio_element = audio_elements[i];
if (audio_element !== event.target) {
audio_element.pause();
}
}
}, true);
}
document.addEventListener("DOMContentLoaded", function() {
onlyPlayOneIn(document.body);
});
有些注意事项:
audio
元素本身,所以可以在页面加载后添加或删除它们,它仍然有效。答案 2 :(得分:0)
假设您停止和暂停曲目的语法是正确的(我对audio
元素一无所知),您应该能够做到这样的事情:
$(".playback").click(function(e) {
// pause all other tracks
$('.audio').each(function () {
var song = this;
if (!song.paused) { song.pause(); }
});
// play the audio associated with this element
this.play();
});
答案 3 :(得分:0)
对LostInComputer答案的修改不多
在HTML编写中:
Newlist = [50141, 56187, 56188, 56188, 75035, 94934, 94935, 94936, 94937, 94938, 94939, 94940]
在Js中写:
<audio controls onplay="pauseOthers(this);" >
<source src="SourcePath">
</audio>
答案 4 :(得分:0)
Load.(type)
答案 5 :(得分:0)
角度:
<audio (play)="audioPlay($event)" controls preload="none">
<source [src]="url" type="audio/mpeg">
</audio>
audioPlay(e) {
let eAudio = this.domService.getDocument.getElementsByTagName('audio')
if (eAudio && eAudio.length > 0) {
for (var i = 0; i < eAudio.length; i++) {
if(e.target !== eAudio[i]){
eAudio[i].pause();
}
}
}
}