最近由于疫情，在家里闲得发慌，随手做个音乐播放器，只做了两首歌曲，温习标签audio；

需求：

.暂停/播放 .上一曲/下一曲（没做） .进度条显示 .进度条拉动 .曲目信息显示 .展示歌曲目录 .播放模式（没做，暂没啥意义） .可选择播放歌曲 .歌词与歌曲对应（没做）

材料：

Vitas-歌剧2.flac【无损音质】

下载资源链接：

https://www.wsyyxz.com/oumei/34169.html#ecms

萨顶顶-左手指月.flac【无损音质】

下载资源链接：

https://www.wsyyxz.com/huayu/30404.html#ecms

效果如下：

html 播放resp html 播放 flac_Vitas-歌剧2无损音质

HTML代码：【Vitas-歌剧2.html】

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>LoveMusic</title>
	<link rel="stylesheet" type="text/css" href="css.css">
	<script type="text/javascript" src="js.js"></script>
</head>
<body>
<!-- 	
	.autoplay:自动播放；
	.controls:可以控制音频；
	.显示歌曲信息和歌词;
	.可选择播放的歌曲；
 -->
<div class="banner">
	<audio autoplay="autoplay" controls="" loop="-1">
		<!-- 播放源,flac为无损音质文件，mp3和ogg是包含了所有网页都能播放的音乐格式； -->
		<source src="Vitas-歌剧2.flac" type="">
		<source src="Vitas-歌剧2.mp3" type="">
		<source src="Vitas-歌剧2.ogg" type="">	
	</audio>	 	
 <br>
Опера №2 
<br><br><br>
 Дом мой достроен,
<br>
 Но я в нем один.
<br>
 Хлопнула дверь за спиной
<br>
 Ветер осенний стучится в окно
<br>
 Плачет опять надо мной.
<br>
 Ночью гроза,
<br>
 А на утро туман.
<br>
 Солнце остыло совсем.
<br>
 Давние боли
<br>
 Идут чередой.
<br>
 Пусть собираются все.
<br>
 Дом мой достроен,
<br>
 Но я в нем один.
<br>
 Хлопнула дверь за спиной.
<br>
 Ветер осенний стучится в окно
<br>
 Плачет опять надо мной.
<br>
 Это судьба, а судьбу не могу
<br>
 Я ни о чем просить.
<br>
 Только я знаю, как после меня
<br>
 Станут ветра голосить
<br><br>
 </div>
 <div class="music-select">
 	<ul>
 		<li>Vitas-歌剧2
 		</li>
 		<li>
 			<a href="萨顶顶-左手指月.html">
 			萨顶顶-左手指月		
 			</a>
 		</li>
 	</ul>
 </div>
</body>
</html>
<!-- author:李云濠 -->

HTML代码2：【】 

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>LoveMusic</title>
	<link rel="stylesheet" type="text/css" href="css.css">
	<script type="text/javascript" src="js.js"></script>
</head>
<body>
<!-- 	
	.autoplay:自动播放；
	.controls:可以控制音频；
	.显示歌曲信息和歌词;
	.可选择播放的歌曲；
 -->
 <div class="banner">
	<audio autoplay="autoplay" controls="" loop="-1">
		<!-- 播放源,flac为无损音质文件，mp3和ogg是包含了所有网页都能播放的音乐格式； -->
		<source src="萨顶顶-左手指月.flac" type="">
		<source src="萨顶顶-左手指月.mp3" type="">
		<source src="萨顶顶-左手指月.ogg" type="">	
	</audio>	 	
 <br>
左手指月 (电视剧《香蜜沉沉烬如霜》片尾曲
<br>
作曲 : 萨顶顶
<br>
作词 : 喻江
<br>
编曲：刘胡轶 常石磊
<br><br><br>
左手握大地右手握着天
<br>
掌纹裂出了十方的闪电
<br>
把时光匆匆兑换成了年
<br>
三千世 如所不见
<br>
左手拈着花右手舞着剑
<br>
眉间落下了一万年的雪
<br>
一滴泪 啊啊啊
<br>
那是我 啊啊啊
<br>
左手一弹指右手弹着弦
<br>
舟楫摆渡在忘川的水间
<br>
当烦恼能开出一朵红莲
<br>
莫停歇 给我杂念
<br>
左手指着月右手取红线
<br>
赐予你和我如愿的情缘
<br>
月光中 啊啊啊
<br>
你和我 啊啊啊
<br>
左手化成羽右手成鳞片
<br>
某世在云上某世在林间
<br>
愿随你用一粒微尘的模样
<br>
在所有 尘世浮现
<br>
我左手拿起你右手放下你
<br>
合掌时你全部被收回心间
<br>
一炷香 啊啊啊
<br>
你是我 无二无别
<br><br>
 </div>
 <div class="music-select">
 	<ul>
 		<li>萨顶顶-左手指月
 		</li>
 		<li>
 			<a href="Vitas-歌剧2.html">
 			Vitas-歌剧2		
 			</a>
 		</li>
 	</ul>
 </div> 
</body>
</html>
<!-- author:李云濠 -->

共同的CSS文件

.banner{
	text-align: center;
}
.music-select{
	position:absolute;
	right: 5%;
	top: 5%;
	border: 1px solid black;
}
li{
	list-style: none;
	line-height: 24px;
	z-index: 1;
}

 共同的js文件，目前暂时为Null，后面做歌词对应用到；

 

目录文件如下：

html 播放resp html 播放 flac_html 播放resp_02