简介

在前端页面中，有时候我们需要播放一首或者多首背景音乐，以此提高用户体验度。但是，很少有插件能够直接支持插入循环列表。因此，采用js控制Audio标签，实现音乐的循环播放，具体的功能可有（一部分）：

可设置循环列表，对列表中的歌曲进行播放。
可对控制按钮进行隐藏。
可实现audio标签对应的功
等等。

实现过程

首先在设置一个标签

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

用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();}
}

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

如果想实现多页面实现背景音乐的连续播放，使用<frameset>标签，参照参考文献1中的方法。

参考文献

html5中多页面实现背景音乐的连续播放
html音频

js实现音乐列表循环播放或单曲循环相关推荐

单曲循环翻译_单曲循环是什么意思
1. 已经单曲循环这首歌几个小时了. How Could This Be? You Not There With Me. 2. 播放模式也比较完善,有单曲,顺序,循环,随机播放等模式. It has ...
音乐播放器的实现（四）—— 歌曲列表、顺序播放、单曲循环、随机播放、自动下一曲
音乐播放器的实现(四)-- 歌曲列表.顺序播放.单曲循环.随机播放.自动下一曲传送门:(完整工程见第五章篇尾) 音乐播放器的实现(一)-- Audio Listener和Audio Source面板 ...
android音乐播放器单曲循环,[Android] MediaPlayer单曲循环不卡顿
[TOC] 0x00 需求单曲循环播放歌曲,要求过度连贯,听不出来卡顿感觉. 0x01 解决思路 MediaPlayer 对于常见的音乐播放,我们第一时间想到的应该就是它,它有一个方法 MediaP ...
单曲循环翻译_“单曲循环” 用哪个词？
本集节目内容简介本集节目的问题来自一位姓闫的网友.她想知道应该用哪一个词语来表示 "单曲循环" 比较合适,是 "loop.repeat" 还是 "r ...
单曲循环翻译_“单曲循环”用英语怎么说？
展开全部单曲循环的英语是:Single tune circulation. 1.single单曲的意思. 2.tune,发音:英[tju:n],美[tu:n]. 释义:曲调,曲子; 和谐,调谐; 语 ...
单曲循环翻译_单曲循环。用英语怎么说？
展开全部单曲循环的英语是:Single tune circulation. 词组解析在英语中,单曲循环的英语被翻译为 Single tune circulation,为固定搭配.其中single为 ...
【小河今学 | JavaScript + JQuery】音乐播放器4-音量调整、单曲循环、全部循环
08.18今天来完善音乐播放器的音量调整.单曲循环和全部循环功能. 本篇基于上一篇[小河今学 | JavaScript + JQuery]音乐播放器3-歌词轮播和进度条跳转功能实现一.音量调整首先 ...
基于vlc-Qt的视频播放器（支持添加视频列表、单曲循环等）
基于libvlc和Qt实现了一个视频播放器,可实现列表循环播放,单曲播放等,效果好于Qt自带的视频播放库.网上已有诸多基于vlc库的视频播放器,但设计列表播放的资源较少,基于vlc实现列表播放主要利用 ...
原生H5+JS+CSS实现音乐播放器（上下一首，随机单曲循环播放，进度条，播放列表）
学了前端小半个月了,今天自己动手写一个音乐播放器实现的功能有播放列表 ,随机单曲循环播放,上下一首,暂停和开始,静音,音量增加减少,进度条(收藏功能暂未实现,为了排版好看添加的,后续补充收藏等功能) ...
苹果播放器实现单曲循环
一直觉得苹果的音乐播放器比较坑. 但是,用了qq音乐播放器,发现,我竟然没法把电脑里的音乐导入到手机里.更坑. 必须重用苹果的音乐播放器.下简称MP(music player). 因为学英语,必须要单 ...

js实现音乐列表循环播放或单曲循环

简介

实现过程

参考文献

js实现音乐列表循环播放或单曲循环相关推荐

最新文章

热门文章