HTML5+JS实现简易的音乐播放器

HTML5+JS实现简易的音乐播放器

播放器实现的功能

1. 播放/暂停音乐
2. 切换歌曲，上/下一首歌
3. 音量最大或静音
4. 音乐播放时间实时变化
5. 进度条拖拽
6. 歌曲图片切换

播放器效果展示

代码展示

html

<div class="musicBox" id="musicBox">
	<audio src="music/赵季平-门楼.mp3"  id="music">
		当前浏览器不支持audio
	</audio>
	<div class="leftControl"></div>
	<div id="mainControl" class="mainControl"></div>
	<div id="stopControl" class="stopControl" style="display:none"></div>
	<div class="rightControl"></div>
	<div class="processControl" >
		<div id="songName" class="songName">赵季平-门楼</div>
		<div id="songTime" class="songTime">00:00&nbsp;|&nbsp;00:00</div>
		<div id="process" style="width:500px" class="process"></div>
		<div id="processYet" class="processYet"></div>
	</div>
	<div class="voiceEmp"></div>
	<div id="voidProcess" class="voidProcess" style="width:66px"></div>
	<div class="voidProcessYet"  id="voidProcessYet"></div>
	<div class="voiceFull"></div>
</div>
<div class="list">
	<!-- 插图 -->
	<img src="images/1.png" width="300px" id="pictures" >
	<!-- 歌单 -->
	<ul id="songList">
		
	</ul>
</div>

CSS样式

.musicBox {
    
    
	font: 9px 'Lucida Sans Unicode', 'Trebuchet MS', Arial, Helvetica;
	background-color: #595959;
    /*设置边框的弧度值，为3px*/
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
    /*阴影*/
	text-shadow: 0 1px 0 rgba(255,255,255,0.5);
	-webkit-box-shadow: 10px 10px 25px #ccc;
	-moz-box-shadow: 10px 10px 25px #ccc;
	box-shadow: 10px 10px 25px #ccc;
    /*透明度*/
	opacity: 0.9;
    /*基本性质*/
	padding: 2px 5px;
	position: absolute;
	z-index: 9;
	border-width: 1px;
	border-style: solid;
	border-color: #488BF0;
	width: 775px;
	height: 50px;
	border-radius: 10px;
}

.leftControl {
    
    
	width: 0px;
	padding: 10px 10px 10px 10px;
	float: left;
	height: 20px;
	background: url(../images/sk-dark.png) left 2px no-repeat;
	margin-right: 8px;
	margin-left: 10px;
}

.leftControl:hover {
    
    
	background: url(../images/sk-dark.png) left -30px no-repeat;
}

.mainControl {
    
    
	width: 25px;
	padding: 10px 15px 5px 10px;
	float: left;
	height: 20px;
	background: url(../images/sk-dark.png) -80px -130px no-repeat;
}

.mainControl:hover {
    
    
	background: url(../images/sk-dark.png) -80px -166px no-repeat;
}

.rightControl {
    
    
	width: 0px;
	padding: 10px 10px 10px 10px;
	float: left;
	height: 20px;
	background: url(../images/sk-dark.png) left -62px no-repeat;
	margin-right: 8px;
}

.rightControl:hover {
    
    
	background: url(../images/sk-dark.png) left -93px no-repeat;
}

.processControl {
    
    
	width: 500px;
	padding: 5px 10px 10px 10px;
	float: left;
	height: 20px;
	margin-right: 12px;
	color: #ffffff;
}

.processControl .songName {
    
    
	float: left;
}

.processControl .songTime {
    
    
	float: right;
}

.processControl .process {
    
    
	width: 500px;
	float: left;
	height: 2px;
	cursor: pointer;
	background-color: #000000;
	margin-top: 7px;
}

.processControl .processYet {
    
    
	width: 0px;
	position: absolute;
	height: 2px;
	left: 131px;
	top: 30px;
	cursor: pointer;
	background-color: #00aaff;
}

.voiceEmp {
    
    
	width: 0px;
	padding: 10px 10px 10px 10px;
	float: left;
	height: 17px;
	background: url(../images/sk-dark.png) -28px -180px no-repeat;
	margin-right: 2px;
}

.voiceEmp:hover {
    
    
	background: url(../images/sk-dark.png) -28px -212px no-repeat;
}

.voidProcess {
    
    
	width: 66px;
	height: 2px;
	cursor: pointer;
	background-color: #000;
	float: left;
	margin-top: 19px;
	margin-right: 6px;
}

.voidProcessYet {
    
    
	width: 66px;
	position: absolute;
	height: 2px;
	left: 675px;
	top: 21px;
	cursor: pointer;
	background-color: #7A8093;
}

.voiceFull {
    
    
	width: 0px;
	padding: 10px 10px 10px 10px;
	float: left;
	height: 17px;
	background: url(../images/sk-dark.png) -28px -116px no-repeat;
}

.voiceFull:hover {
    
    
	background: url(../images/sk-dark.png) -28px -148px no-repeat;
}

.stopControl {
    
    
	width: 14px;
	padding: 10px 10px 5px 10px;
	float: left;
	height: 20px;
	background: url(../images/sk-dark.png) -50px -130px no-repeat;
	margin-right: 16px;
}

.stopControl:hover {
    
    
	background: url(../images/sk-dark.png) -50px -165px no-repeat;
}

.list{
    
    
	width: 700px;
	height: 500px;
	background-color: #ffd47d;
	padding-top: 70px;
	margin-left: 20px;
}
#songList{
    
    
	font-size: 18px;
	font-weight: bold;
	color: #FFFFFF;
}
#songList li{
    
    
	margin-top: 5px;
}
#songList li:hover{
    
    
	color: #aa00ff;
}

JS

// 获取音频元素
let music
if(window.HTMLAudioElement){
    
    
	music = document.querySelector('#music');
	// 播放按钮
}
// 播放按钮
let mainControl = document.querySelector("#mainControl");
// 暂停
let stopControl = document.querySelector("#stopControl");
// 快退,快进，
let leftControl = document.querySelector(".leftControl");
let rightControl = document.querySelector(".rightControl");
// 音量调节
let voiceEmp = document.querySelector('.voiceEmp');
let voiceFull = document.querySelector('.voiceFull');

let songName = document.querySelector("#songName");
let process = document.querySelector("#process");
let pictures = document.querySelector("#pictures");
let songList = document.getElementById("songList");

mainControl.addEventListener('click',function(){
    
    
	// 播放音乐
	music.play();
	mainControl.style.display='none';
	stopControl.style.display='';
	timeSpan();
})

stopControl.addEventListener('click',function(){
    
    
	// 暂停音乐
	music.pause();
	mainControl.style.display='';
	stopControl.style.display='none';
})
// 播放时间前进或后退
// leftControl.addEventListener('click',function(){
    
    
// 	// console.log(music.currentTime);
// 	music.currentTime -= 1.0;
// 	// console.log(music.currentTime);
// })

// rightControl.addEventListener('click',function(){
    
    
// 	// console.log(music.currentTime);
// 	music.currentTime += 1.0;
// 	// console.log(music.currentTime);
// })

voiceEmp.addEventListener('click',function(){
    
    
	music.volume = 0;
})

voiceFull.addEventListener('click',function(){
    
    
	music.volume = 1;
})

// 格式化时间
function timeDispose(time){
    
    
	let minutes = parseInt(time/60);
	let seconds = parseInt(time%60);
	minutes = minutes>10?minutes:"0"+minutes;
	seconds = seconds>10?seconds:'0'+seconds;
	
	return minutes+':'+seconds;
}
// 展示时间
function timeSpan(){
    
    
	setInterval(function(){
    
    
		let songTime = document.querySelector("#songTime");
		let currenttime = music.currentTime;
		let totaltime = music.duration;
		songTime.innerHTML = timeDispose(currenttime)+"|"+timeDispose(totaltime);
		let processLenth =(currenttime/totaltime)*getWidth("#process");
		document.querySelector('#processYet').style.width = processLenth+'px';
	},1000);
	
}

// 获取长度
function getWidth(domId){
    
    
	let dom = document.querySelector(domId);
	let domLenth = dom.style.width;
	let domLenthInt = domLenth.split('px')[0];
	return domLenthInt;
}

// 切歌
let songs = [
	
	{
    
    
		mp3:'music/赵季平-门楼.mp3',
		name:'赵季平-门楼',
		tu:'images/1.png',
	},
	{
    
    
		mp3:'music/露露娜Ruruna - 夏 日 蒸 汽 波Say So(Japanese_Ver).mp3',
		name:'夏日蒸汽波SaySo',
		tu:'images/2.png',
	},
	{
    
    
		mp3:'music/趴熊 - スパイス（香辛料）（Cover 东京カランコロン）.mp3',
		name:'香辛料（Cover 东京カランコロン）',
		tu:'images/3.png',
	},
	{
    
    
		mp3:'music/神前暁 (こうさき さとる) - いつもの風景から始まる物語 (从老风景开始的故事).mp3',
		name:'从老风景开始的故事',
		tu:'images/10.png',
	},
	{
    
    
		mp3:"music/Tenkitsune - Yoshi's New Story.mp3",
		name:"Yoshi's New Story",
		tu:'images/5.png',
	},
]

// 将歌名显示到列表上
for (var i =0; i < songs.length; i++) {
    
    
	songList.innerHTML += '<li>' + songs[i].name + '</li>';
}

//切歌函数
let changeMusic=function (index) {
    
    
	//换歌曲
    music.src=songs[index].mp3;
	//换名称
    songName.innerHTML=songs[index].name;
	pictures.src=songs[index].tu;
};
let index=0;//当前播放歌曲索引
//切歌
leftControl.addEventListener("click",function (event) {
    
    
    index--;
    if(index<=-1){
    
    
        index=songs.length-1;
    }
    changeMusic(index);
});
rightControl.addEventListener("click",function (event) {
    
    
    index++;
    if(index>songs.length-1){
    
    
        index=0;
    }
    changeMusic(index);
});
// 播放完毕，自动下一首
 music.addEventListener("ended",function(){
    
    
     rightControl.click();
 });
process.addEventListener("click",function (event) {
    
    
    let x=event.offsetX;//获取鼠标所在位置
    let bfb=x/610*100;
    processYet.style.width=bfb+"%";
    music.currentTime=music.duration*+bfb/100;
});