HTML实操-音乐播放器

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

需求：

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

材料：

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

下载资源链接：

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

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

下载资源链接：

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

效果如下：

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

	
	
	
	




		 	
 

Опера №2 




 Дом мой достроен,


 Но я в нем один.


 Хлопнула дверь за спиной


 Ветер осенний стучится в окно


 Плачет опять надо мной.


 Ночью гроза,


 А на утро туман.


 Солнце остыло совсем.


 Давние боли


 Идут чередой.


 Пусть собираются все.


 Дом мой достроен,


 Но я в нем один.


 Хлопнула дверь за спиной.


 Ветер осенний стучится в окно


 Плачет опять надо мной.


 Это судьба, а судьбу не могу


 Я ни о чем просить.


 Только я знаю, как после меня


 Станут ветра голосить



 
 

 	

 		
Vitas-歌剧2
 		
 		

 			
 			萨顶顶-左手指月		
 			
 		
 	
 

HTML代码2：【】 

 

	
	
	
	



 

		 	
 

左手指月 (电视剧《香蜜沉沉烬如霜》片尾曲


作曲 : 萨顶顶


作词 : 喻江


编曲：刘胡轶 常石磊




左手握大地右手握着天


掌纹裂出了十方的闪电


把时光匆匆兑换成了年


三千世 如所不见


左手拈着花右手舞着剑


眉间落下了一万年的雪


一滴泪 啊啊啊


那是我 啊啊啊


左手一弹指右手弹着弦


舟楫摆渡在忘川的水间


当烦恼能开出一朵红莲


莫停歇 给我杂念


左手指着月右手取红线


赐予你和我如愿的情缘


月光中 啊啊啊


你和我 啊啊啊


左手化成羽右手成鳞片


某世在云上某世在林间


愿随你用一粒微尘的模样


在所有 尘世浮现


我左手拿起你右手放下你


合掌时你全部被收回心间


一炷香 啊啊啊


你是我 无二无别



 
 

 	

 		
萨顶顶-左手指月
 		
 		

 			
 			Vitas-歌剧2		
 			
 		
 	
 
 

共同的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，后面做歌词对应用到；

 

目录文件如下：