html5之音乐播放器实例（可以切换歌曲和背景照片）

一个学期过去了

积累了很多知识，但是一直没有机会更新博客

内容很多，很杂乱但实际上的操作课并不多，好多源码都丢失了

这是一个web在线音乐播放器，使用html的<audio>标签，js进行控制

可以播放、暂停、上一首、下一首

因为只是一个小作业，就没有做太仔细的设计，不过配上日漫歌曲和图片还挺好看

html5之音乐播放器实例（可以切换歌曲和背景照片）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>音乐播放器</title>
<style>
#music {
	width: 500px;
	height: 500px;
	border-radius: 10px;
	margin: 20px auto;
	position: relative;
	background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545149319600&di=b1ec2d1c0aa00fa507eee88b75198133&imgtype=0&src=http%3A%2F%2Fwww.17qq.com%2Fimg_qqtouxiang%2F74841037.jpeg) no-repeat;
	background-size: cover;
	text-align: center;
}
#container {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 500px;
	height: 500px;
	text-align: center;
	background:rgba(255,255,255,0.6);
}
#musicImg{
	width: 300px;
	height: 300px;
	text-align: center;
	margin: auto;
	border-radius:50%;
	}
</style>
</head>

<body>
<div id="music">
	<div id="container">
		<h3 id="musicName">音乐播放器</h3>
		<img src="./image/1.jpg" id="musicImg">
		<audio src="./mp3/1.mp3" controls id="audio">low browsers not support</audio>
		<div class="btn">
			<button id="play">开始</button>
			<button id="pause">暂停</button>
			<button id="prev">上一首</button>
			<button id="next">下一首</button>
		</div>
	</div>
</div>
<script>
// 播放
play.onclick = function(){
	if(audio.paused){
		audio.play();
	}
}
 
// 暂停
pause.onclick = function(){
	if(audio.played){
		audio.pause();
	}
}
var num=1;
var len=4
var bgImage = document.getElementById("musicImg");
prev.onclick = function(){
	if(num>1){
		num = num - 1;
		}
	else{
		num=4;
		}
	
	audio.src = './mp3/' + num + '.mp3';

	bgImage.style.backgroundImage = 'url(./image/' + num + '.jpg)';
	musicImg.src = './image/' + num + '.jpg';
	audio.play();
}
 
// 下一首
next.onclick = function(){
	if(num<4){
		num = num + 1;
		}
	else{
		num=1;
		}
	audio.src = './mp3/' + num + '.mp3';
	
	bgImage.style.backgroundImage = 'url(./image/' + num + '.jpg)';
	musicImg.src = './image/' + num+ '.jpg';
	audio.play();

}

audio.addEventListener('ended',function(){
	next.onclick();
},false);
// 上一首


</script>
</body>
</html>

html5之音乐播放器实例 （可以切换歌曲和背景照片）

相关推荐

html5之音乐播放器实例（可以切换歌曲和背景照片）