带播放列表的HTML和JS播放器只播放一首音乐

时间:2013-10-29 12:24:02

标签: javascript html5

是我第一次来这里。 :)

我的客户网站上有一个HTML5 e JS播放列表的音乐播放器。

它适用于数组,但只有一个音乐播放并在循环中重复。其他音乐不播放。

守则:

的JavaScript

unu_music = {
    // music play
    m_play: function () {
        $('.btn-play').click(function () {
            $('.btn-play').hide();
            $('.btn-pause').show();
            $("#music")[0].play();
        });
    },
    // music pause
    m_pause: function () {
        $('.btn-pause').click(function () {
            $('.btn-pause').hide();
            $('.btn-play').show();
            $("#music")[0].pause();
        });
    },
    // music stop
    m_stop: function () {
        $('.btn-stop').click(function () {
            // action stop
            $("#music")[0].pause();
            $("#music")[0].currentTime = 0;
            // button play show
            $('.btn-pause').hide();
            $('.btn-play').show();
            // button sound show
            $('.btn-sound-mute').hide();
            $('.btn-sound').show();
            $("#music")[0].volume += 1;
        });
    },
    // music sound
    m_sound: function () {
        $('.btn-sound-mute').click(function () {
            $('.btn-sound-mute').hide();
            $('.btn-sound').show();
            $("#music")[0].volume += 1;
        });
    },
    // music mute
    m_mute: function () {
        $('.btn-sound').click(function () {
            $('.btn-sound').hide();
            $('.btn-sound-mute').show();
            $("#music")[0].volume -= 1;
        });
    },
    // playlist
    m_playlist: function () {
        var arr, aux = 1, mls = [],
            unuPlayList = [
                {
                    mp3: '../music/music-01.mp3',
                    ogg: '../music/music-01.ogg',
                    duration: '2:52'
                },
                {
                    mp3: '../music/music-02.mp3',
                    ogg: '../music/music-02.ogg',
                    duration: '4:05'
                },
                {
                    mp3: '../music/music-03.mp3',
                    ogg: '../music/music-03.ogg',
                    duration: '4:58'
                }
            ];

        $('audio').html('<source src=' + unuPlayList[aux].ogg + ' type="audio/ogg">');

        for (var i = 0; i < unuPlayList.length; i++) {
            arr = unuPlayList[i].duration.split(':');
            mls[i] = ((((arr[0] * 60) * 1000) + (arr[1] * 1000)) - 70000);
        }

        setInterval(function () {
            if (aux != -1) {
                $('audio').html('<source src=' + unuPlayList[aux].ogg + ' type="audio/ogg">');
                aux++;
            }

            if (aux == unuPlayList.length)
                aux = 0;

        }, mls[aux]);
    }
};

HTML

 <audio id="music" autoplay loop>

    </audio>

如何解决此错误?

提前致谢。

2 个答案:

答案 0 :(得分:0)

link解决了您的问题。因为它解释了如何使用它。

答案 1 :(得分:0)

你可以使用这样的插件: 这是podsnack click here to go to podsnack的链接!