HTML音乐播放器

执心幻恋

已于 2024-05-20 17:51:33 修改

阅读量264

点赞数 5

文章标签： html 前端

于 2024-05-20 16:55:03 首次发布

本文链接：https://blog.csdn.net/2301_77335001/article/details/139069615

版权

注：暂停键等键位图以及歌曲需自己在网上下载并放入项目文件中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 500px;
				margin: 10px auto;
				text-align: center;
				/*border: 1px solid blue;*/
				}
				#CDimage img{
					border-radius: 50%;
					}
				button{
					background: transparent;
					border: 0;
					outline: 0;
					}
				img{
					border: 0;
					}
				.rotate{
					animation: rot 3s linear infinite;
				}
				@keyframes rot{
					0%{transform: rotate(0deg);} 
					50%{transform: rotate(180deg);}
					100%{transform: rotate(360deg);}
					}
				
		</style>

</style>
	</head>
	<body  style="background-image:url(image/原神.jpg) ;">
		<h3>简单音乐播放器</h3>
		<hr/>
		<!--音乐文件的载入-->
		<audio id="audio" src="music/Serenade.mp3"preload>对不起，您的浏览器不支持HTML5音频播放。
		</audio>
		<!--仿CD样式圆形图片-->
		<div id="CDimage">
			<img src="image/sky.jpg"id="pic"/>
		</div>
		<!--音量调节进度条-->
		<div>
			<input id="volume"type="range"min="0" max="1" step="0.1" onchange="setVolume()" />
		</div>
		<!--显示歌曲名称-->
		<div>
			当前正在播放:<span id="title">小夜曲</span>
		</div>
		<div>
			<button onclick="lastMusic()">
				<img src="image/previous.png" width="50" height="50" />
			</button>
			<button id="toggleBtn" onclick="toggleMusic()">
				<img src="image/play.png" width="50" height="50" />
			</button>
			<button onclick="nextMusic()">
				<img src="image/next.png" width="50" height="50" />
			</button>
		</div>
<script type="text/javascript">
	//获取音频对象
	var music = document.getElementById("audio");
	var img=document.getElementById("pic");//获取音量调节进度条
	var volume = document.getElementById("volume");//获取音乐播放/暂停按钮
	var toggleBtn = document.getElementById("toggleBtn");//获取当前播放的音乐标题
	var title = document.getElementById("title");//音乐路径列表
	var list = new Array("music/Serenade","music/EndlessHorizon.mp3","music/月光下的云海.mp3")
	//音乐标题列表
	var titleList = new Array("小夜曲","无尽的地平线","月光下的云海");
	var i = 0;
	//定义当前是第几首曲目
	//音乐播放/暂停切换方法
	function toggleMusic() {
		if (music.paused) {
			music.play();
			img.classList.add("rotate");//播放音乐
			toggleBtn.innerHTML = '<img src="image/pause.png" width="50" height="50"/>';
		}else{
			music.pause();
			img.classList.remove("rotate");//暂停音乐
			toggleBtn.innerHTML = '<img src="image/play.png" width="50" height="50" />';
		}
	}
	//设置音量大小
	function setVolume() {
		music.volume = volume.value;
	}
	//切换下一首歌曲
	function nextMusic() {
		if (i == list.length-1)
		i=0; 
		else
		i++;
		music.pause( );
		music.src =list[i];
		title.innerHTML= titleList[i];
		music.play();
	}
	//切换上一首歌曲
	function lastMusic() {
		if (i==0)
		i = list.length - 1; 
		else
		i--;
		music.pause( );
		music.src = list[i];
		title.innerHTML =titleList[i];
		music.play();
	}
</script>
		</button>
	</body>
</html>