自制的音乐播放器（封装版）

自制的音乐播放器（封装版）

如果想在页面上放置多个音乐播放器，可以对它的代码进行封装。
自制音乐播放器的制作方法可在B站（bilibili）搜索“风林248”，观看视频《Web前端技巧-自制音乐播放器》。

播放器的HTML代码

可放置多个播放器，不同播放器中的所有标签的id需设置不同值。

<!-- 播放器 -->
<div>
	<audio id="au1"></audio>
</div>
<div class="playbox">
	<div id="play1" class="play"><i></i></div><!--播放/暂停按钮-->
	<div id="stop1" class="stop"></div><!--停止按钮-->
	<div class="time"><span id="ctime1"></span>/<span id="dtime1"></span></div><!--时间/时长-->
	<div class="progressbox"><!--进度条-->
		<div id="progress1" class="progress"><div id="now1" class="now"></div></div>
	</div>
	<div id="mute1" class="mute"><i></i></div><!--静音按钮-->
	<input id="volume1" class="volume" type="range" min="0" max="1" value="1" step="0.1" title="音量"><!--音量条-->
	<div id="loop1" class="loop" title="循环播放"><i></i></div><!--循环播放按钮-->
</div><!--播放器end-->
<!--歌词展示区：两种方式选一种即可-->
<div class="lrcarea"><!--根据播放进度展示歌词的区域-->
	<div id="lyric1" class="lyric"></div>
</div>
<div class="lyarea"><!--用滚动方式展示歌词的区域-->
	<ul id="ly1" class="ly"></ul>
</div>
<textarea id="lrc1" style="display:none">
<!--LRC格式的歌词-->
</textarea>

播放器的CSS代码

CSS代码是各播放器共用的，建议定义在外部css文件中。

/*播放器*/
.playbox{
   
	display: flex;
	justify-content: space-between;
	background-color: #F0F0F0;
	width: 500px;
	border-radius: 15px;
	padding: 15px;
	margin: 15px 0;
}
/*各控件容器*/
.play, .pause, .stop, .mute, .loop{
    /* 播放/暂停、停止、静音、循环 */
	width: 25px;
	height: 25px;
	line-height: 25px;
	/*border: solid 1px #999999;  /*调试时使用*/
	color: #333333;  /*控件颜色*/
	position: relative;
}
/*鼠标悬停变色*/
.play:hover, .pause:hover, .stop:hover, .mute:hover, .loop:hover{
   
	color: darkgoldenrod;
}
/*播放/暂停按钮
  用法：<div class="play"><i></i></div>
  class="play"时显示为播放按钮，class="pause"时显示为暂停按钮
*/
/* 播放按钮：由一个三角形组成 */
.play i{
   
	display: block;
	width: 0;
	height: 0;
	border-left: solid 12px currentcolor;
	border-top: solid 8px transparent;
	border-bottom: solid 8px transparent;
	position: absolute; /*相对于容器的位置*/
	left: 8px;
	top: 5px;
}
/* 暂停按钮：由两条竖线形组成 */
.pause i{
   
	display: flex;
	position: absolute;
	left: 9px;
	top: 6px;
}
.pause i::before, .pause i::after{
    /*竖线*/
	content: "";
	display: block;
	width: 3px;
	height: 13px;
	background-color: currentcolor;
	border-radius: 1px;
}
.pause i::after{
    /*竖线2*/
	margin-left: 3px;
}
/*停止按钮
  由一个方块组成
  用法：<div class="stop"></div>
*/
.stop::before{
   
	content: "";
	display: block;
	width: 11px;
	height: 11px;
	background-color: currentcolor;
	position: absolute;
	left: 7px;
	top: 7px;