我正在尝试创建一个音乐播放器插件,其中将在同一页面中有多个实例。所有实例的Audio对象都是相同的。
以下是我的代码: DEMO
HTML:
<div class="player" data-track="https://rjmediamusic.com/media/mp3/Masih-Arash-AP-Bia-Bazam.mp3">
<div class="playBtn"></div>
</div>
<div class="player" data-track="https://rjmediamusic.com/media/mp3/Masih-Arash-AP-Hanooz-Hamoonam.mp3">
<div class="playBtn"></div>
</div>
JS:
audio = new Audio();
audio.src= $('.player').data("track");
$(".player").click(function(){
$(".playBtn").toggleClass('active');
if($(".playBtn").hasClass('active')){
audio.play();
}else{
audio.pause();
}
})
当选择播放一首歌曲时,不应播放其他歌曲。是否有任何解决方案使其工作,使每个实例都有自己的功能,但所有实例共享相同的Audio对象?
答案 0 :(得分:0)
我在这个jsFiddle中做了你的例子:https://jsfiddle.net/mgaskill/zLgpq9dy/
难点在于您使用的是具有相同CSS类但没有ID的所有实例。如果你小心的话,这可以奏效,这就是我所做的。魔术来自事件处理程序中的jQuery $(this)
对象。
找到正确的播放按钮
var playButton = $(this).find(".playBtn");
查看播放按钮的课程
if (playButton.hasClass('active')) {
重新分配音频源
audio.src= $(this).data("track");
这些允许在多个玩家之间重复使用源。
以下是更新的Javascript:
audio = new Audio();
$(".player").click(function(){
var playButton = $(this).find(".playBtn");
if (!playButton.hasClass('current')) {
$(".playBtn").removeClass("active");
$(".playBtn").removeClass("current");
playButton.addClass("current");
audio.src= $(this).data("track");
}
playButton.toggleClass('active');
if (playButton.hasClass('active')) {
audio.play();
} else {
audio.pause();
}
});
这些更改将玩家是否主动播放来区分是否是当前播放器,从而允许音频从暂停状态恢复。当从一个播放器切换到另一个播放器时,所有其他播放器都设置为 not active ,允许为每个播放器正确显示视觉状态。
当播放器切换时,音频源现在分配给当前播放器。这将阻止任何先前的玩家继续玩,并允许新玩家在活跃时启动。