是否可以在网站上设置某些背景音乐的开始时间?我的代码如下。
//Head
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script>
$(function() {
var bgMusic = $('#audio-bg')[0],
playing = true;
var $volume_btn = $('#toggle');
bgMusic.addEventListener('ended', function() {
this.currentTime = 10;
if (playing) {
this.play();
}
}, false);
var cookieValue = $.cookie("forcemute");
if(cookieValue == undefined){
bgMusic.play();
}
else{
playing = false;
$volume_btn.css({backgroundPosition: '0 -21px'});
}
$volume_btn.click(function() {
if (!bgMusic.paused) {
bgMusic.pause();
playing = false;
$(this).css({backgroundPosition: '0 -21px'})
$.cookie("forcemute", 1);
} else {
bgMusic.play();
playing = true;
$(this).css({backgroundPosition: '0 0'})
$.removeCookie("forcemute");
}
});
});
</script>
//Body
<audio id="audio-bg">
<source src="music/Something_for_Nothing_OST_-_Close_darkness_The.mp3">Update your browser for playing music</source>
</audio>
<a id="toggle" class="volume-icon" href="javascript:"></a>
是否可以使用当前音乐时间设置Cookie,并在更改/刷新页面上继续播放Cookie中的音乐时间?
例如,我会加载我的网站,音乐播放15秒,然后我更改为我网站中的另一个页面。我可以从上一页的cookie中获取一个值并从那时起继续播放,而不是从头开始播放音乐吗?
也许有一些方法可以获得音乐的当前时间,然后从那一点开始玩?
答案 0 :(得分:2)
我找到了解决方案。
我可以每2000ms更新一次cookie变量,并检查是否设置了cookieStartTime,然后继续播放音乐或从头开始。
以下是我的完整代码。
$(function() {
var bgMusic = $('#audio-bg')[0],
playing = true;
var $volume_btn = $('#toggle');
var cookieMute = $.cookie("forcemute");
var cookieStartTime = $.cookie("time");
bgMusic.addEventListener('ended', function() {
this.currentTime = 0;
if (playing) {
this.play();
}
}, false);
setInterval(function() {
$.cookie('time', bgMusic.currentTime);
}, 2000);
if(cookieStartTime == undefined){
$('audio').bind('canplay', function(){
$(this)[0].currentTime = 0;
});
}
else {
$('audio').bind('canplay', function(){
$(this)[0].currentTime = cookieStartTime;
});
}
if(cookieMute == undefined){
bgMusic.play();
}
else {
playing = false;
$volume_btn.css({backgroundPosition: '0 -20px'});
}
$volume_btn.click(function() {
if (!bgMusic.paused) {
bgMusic.pause();
playing = false;
$(this).css({backgroundPosition: '0 -20px'})
$.cookie("forcemute", 1);
} else {
bgMusic.play();
playing = true;
$(this).css({backgroundPosition: '0 -2px'})
$.removeCookie("forcemute");
}
});
});