自制的音乐播放器(封装版)
如果想在页面上放置多个音乐播放器,可以对它的代码进行封装。
自制音乐播放器的制作方法可在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;