HTML实操-音乐播放器

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

需求:

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

材料:

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

下载资源链接:

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

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

下载资源链接:

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

效果如下:

HTML实操-音乐播放器_第1张图片

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




	
	LoveMusic
	
	




 


HTML代码2:【】 

 




	
	LoveMusic
	
	



 
 

共同的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实操-音乐播放器_第2张图片

 

你可能感兴趣的:(HTML5实操,HTML实操-音乐播放器,Vitas-歌剧2无损音质,萨顶顶-左手指月无损音质,audio标签)