播放特定点的音乐

时间:2014-05-11 14:18:12

标签: jquery html jquery-cookie background-music

是否可以在网站上设置某些背景音乐的开始时间?我的代码如下。

//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中获取一个值并从那时起继续播放,而不是从头开始播放音乐吗?

也许有一些方法可以获得音乐的当前时间,然后从那一点开始玩?

1 个答案:

答案 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");
            }
        });
    });