h5音频如何实现单曲循环播放

2025-10-10 23:51:48

1、首先在设置一个标签

<body>

<div id="music"> </div>

</body>

2、用js生成audio对象,并控制音乐进行播放,代码中对各参数进行了详细的说明。

window.onload = function(){

    //存放音乐列表,根据音乐文件路径,进行填写

    var musicList = ["/skins/skin/bj/audio/1.mp3","/skins/skin/bj/audio/1.mp3"]

    playMusic(musicList);

}

function playMusic(musicList){

    var myAudio = new Audio();

    //是否进行预加载

    myAudio.preload = false;

    //是否显示隐藏按钮

    myAudio.controls = true;

    myAudio.hidden = true;

    //从音乐列表中,获取最后一个音乐(并删除)

    var src = musicList.pop();

    myAudio.src =src;

    //将最后一个音乐添加到数组的开头,这样实现循环

    musicList.unshift(src);

    //绑定音乐结束事件,当音乐播放完成后,将会触发playEndedHandler方法

    myAudio.addEventListener("ended",playEndedHandler,false);

    //播放当前音乐

    myAudio.play();

    document.getElementById("music").appendChild(myAudio);

    //将循环播放关闭,如果开启,将不能触发playEndedHandler方法,只能进行单曲循环

    myAudio.loop = false;

    function playEndedHandler(){

        src = musicList.pop();

        myAudio.src = src;

        musicList.unshift(src);

        myAudio.play();

    }

}

3、如果实现单曲循环,将musicList数组中放一首歌曲或者直接使用<audio>标签即可实现,更多的属性也请参照<audio>标签的使用。

如果想实现多页面实现背景音乐的连续播放,使用<frameset>标签

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢