我有一个充满HTML5音频标签的页面,每个标签可以在播放和暂停之间切换,一次只能播放一个。我正在研究一组全局控件,它们可以播放/暂停任何活动状态,扫描到开始或上一个音轨以及下一个音轨。如果您有任何想法或解决方案可以帮助我解决所有问题,请大声说出来:)
关于全球音频,我把我认为理论上可行的东西搞得一团糟,但是没有得到任何结果。通过Firebug没有错误...不知道从这里去哪里。
非常感谢您的建议!
HTML:
<div id="global"></div>
<div id="music_right">
<div class="thumbnail" id="paparazzi">
<a class="playback">
<img class="play" src="../images/icons/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_paparazzisnlmix.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.mp3" type="audio/mpeg" />
<source src="../audio/fernando_garibay_paparazzisnlmix.wav" type="audio/x-wav" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="danceinthedark">
<a class="playback">
<img class="play" src="../images/icons/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_danceinthedark.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_danceinthedark.mp3" type="audio/mpeg" />
<source src="../audio/fernando_garibay_danceinthedark.wav" type="audio/x-wav" />
Your browser does not support HTML5 audio.
</audio>
</div>
<div class="thumbnail" id="bornthisway">
<a class="playback">
<img class="play" src="../images/icons/play.png" />
</a>
<audio>
<source src="../audio/fernando_garibay_bornthisway.ogg" type="audio/ogg" />
<source src="../audio/fernando_garibay_bornthisway.mp3" type="audio/mpeg" />
<source src="../audio/fernando_garibay_bornthisway.wav" type="audio/x-wav" />
Your browser does not support HTML5 audio.
</audio>
</div>
</div>
JavaScript的:
//global play/pause
$('#global').click(function(){
var song = $('audio');
if(song.paused){
song.play();
} else {
song.pause();
}
});
//audio tag play/pause
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;
});
});
答案 0 :(得分:3)
我想,昨天我帮助你解决了这个项目的另一个问题。
您应该更改global
div的点击处理程序,如下所示:
$('#global').click(function(){
$('audio').each(function() {
var song = $(this);
if(song.paused){
song.play();
} else {
song.pause();
}
});
});
当您执行var song = $("audio");
之类的操作时,歌曲变量最终会代表页面上所有<audio>
元素的集合,这就是为什么当您选中song.paused
时它不起作用的原因你当时没有处理个别音频元素。
答案 1 :(得分:1)