开发html5音频播放器之界面篇
开发html5音频播放器之界面篇 | 马黑黑界面通过HTML+CSS完成。界面元素主要有：
一、播放和暂停按钮
二、播放进度条
三、播放时间信息
四、lrc歌词
下面一一制作。
一、制作播放按钮，我们用CSS绘制一个播放符号 ▶ ：
#btnplay {
width: 20px;
height: 20px;
background: #ccc;
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
创建一个尺寸为 20*20 的矩形盒子，背景色根据需要设定，然后通过 clip-path 剪裁多边形（polygon）的方法，从左上角起剪，往左下角剪去，再剪到最右边的中心处，这样下面的HTML语句就得出 ▶ ：
<span id="btnplay"></span>
下面做暂停按钮，先设计好CSS样式：
#btnpause {
width: 2px;
height: 20px;
border-style: solid;
border-width: 0px 4px;
border-color: transparent #ccc;
}
高度和播放按钮一致，但宽度才 2px，为啥？暂停按钮的外观是“||”,2像素的宽度其实就是两根竖线之间的距离，两根竖线我们用边框做成，为此，border-width 我们设置为 0px 4px，意思是上下边框为0，左右边框为4个像素，然后再设置边框颜色上下透明、左右为 #ccc 或其他颜色便可。如此，下面的HTML语句会得出我们所需要的暂停图标样式：
<span id="btnpause"></span>
我们想让播放、暂停按钮合在一处，音乐播放时暂停按钮可见、播放按钮不可见，音乐暂停时播放按钮可见、暂停按钮不可见，为此，需要给这两个按钮一个容器，即父元素，我们命名为 #btnwrap 选择器：
#btnwrap {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 50%;
background: #ccc linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75));
cursor: pointer;
}
这是略大于按钮尺寸的圆形容器，背景色使用实体颜色+一定透明度的渐变色营造出相对艳丽的观感效果。鼠标指针设置为手型，用以提示它是可交互操作的（后面有此语句的与此同）。我们还用了网格布局（grid）配合 place-items 属性令其内子元素绝对居中，如此，即使播放和暂停两个按钮同时并列存在于圆形父容器时，它们依然居中，但如前面已经提到，这两个按钮在一个时间里只显示一个，为此我们需要将 #btnpause 设置为不可见，加入 display: none; 即可，这样，以下完整的CSS 和 HTML 代码将只显示播放按钮（CSS代码中我们增加了 #btnwrap 鼠标经过的样式）：
#btnwrap {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 50%;
background: #ccc linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75));
}
#btnwrap:hover { background: #000 linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75)); }
#btnplay {
width: 20px;
height: 20px;
background: #ccc;
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
#btnpause {
width: 2px;
height: 20px;
border-style: solid;
border-width: 0px 4px;
border-color: transparent #ccc;
display: none;
}
<span id="btnwrap">
<span id="btnplay"></span>
<span id="btnpause"></span>
</span>
二、制作播放进度条
播放进度条我们用线条实现，实际上是一个 300*2 的矩形盒子：
#prog {
width: 300px;
height: 2px;
background: #ccc linear-gradient(to right,red,orange,green,tomato) no-repeat;
background-size: 1px 2px;
cursor: pointer;
position: relative;
}
我们还为盒子背景设置了实体颜色+渐变色，其中实体颜色 #ccc 是底色，渐变色是进度指示，所以初始时背景大小设置为 1px 2px，渐变色位置仅在最左边1个像素的地方出现。相对定位的设置，是因为进度条太小，它将来要承载点击调整进度的重任，需要通过伪元素来扩展点击面积。下面是 #prog 伪元素及其鼠标经过的样式：
#prog::before {
position: absolute;
content: '';
top: -7px;
width: inherit;
height: 15px;
}
#prog:hover::before { background: rgba(0,255,0,.25); }
其中，before 伪元素宽度继承（inherit）父元素的尺寸、高度为 15px，并上移 7px 使之垂直居中于进度条（也可以理解为进度条垂直居中于它）。最后是HTML代码：
<span id="prog"></span>
三、播放时间信息
这个比较简单了，就是设置一下文本相关的属性:
#tmsg {
font: normal 16px sans-serif;
color: lightgreen;
}
<span id="tmsg">00:00 | 00:00</span>
以上三样东西，目前它们是离散的状态，我们需要给它们找个父亲，让它们整齐划一排列在一块。为了将来方便整体布局，父元素应设置为绝对定位：
#mplayer {
position: absolute;
width: fit-content;
height: fit-content;
display: flex;
align-items: center;
gap: 8px;
}
宽高用自适应方式设定，这样我们更改任何子元素的尺寸，例如进度条长度，都不会有什么大问题，唯一要处理的将是如何决定其物理位置。弹性布局（flex）在这里至关重要，配合 align-items: center; 垂直居中和 gap: 8px; 子元素间隔距离的设置，其内的子元素将能按我们希望的那样齐刷刷排排坐了：
<span id="mplayer">
<span id="btnwrap">
<span id="btnplay"></span>
<span id="btnpause"></span>
</span>
<span id="tmsg">00:00 | 00:00</span>
</span>
四、lrc歌词界面
lrc歌词盒子独立于播放控制元素，它可以随意设置在帖子任何地方，使用时修改 left、top 之类的值即可。它的其他设置简单，主要是基于文本的修饰设置，以及它连同播放时间信息盒子的鼠标指针经过时的样式（可以不要）：
#lrc {
position: absolute;
left: 50%;
top: 50%;
font: bold 1.5em sans-serif;
color: lightgreen;
text-shadow: 1px 1px 2px #000;
text-align: center;
}
#lrc:hover, #tmsg:hover { color: green; }
<span id="lrc"></span>
至此，音频播放器的界面编写完毕，下面附完整 CSS+HTML 代码（个别属性设置可能与上面的介绍有所变化）：
<style>
#papa {
margin: auto;
width: 800px;
height: 560px;
border: 1px solid #ccc;
position: relative;
}
#mplayer {
position: absolute;
left: 10px;
top: 60px;
width: fit-content;
height: fit-content;
display: flex;
align-items: center;
gap: 8px;
}
#btnwrap {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 50%;
background: #ccc linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75));
}
#btnwrap:hover {
background: #000 linear-gradient(to top right, rgba(255,0,0,.75), rgba(0,255,0,.75));
}
#btnplay {
width: 20px;
height: 20px;
background: #ccc;
clip-path: polygon(0 0, 0% 100%, 100% 50%);
}
#btnpause {
width: 2px;
height: 20px;
border-style: solid;
border-width: 0px 4px;
border-color: transparent #ccc;
display: none;
}
#prog {
width: 300px;
height: 2px;
background: #ccc linear-gradient(to right,red,orange,green,tomato) no-repeat;
background-size: 1px 2px;
cursor: pointer;
position: relative;
}
#prog:hover::before {
background: rgba(0,255,0,.25);
}
#tmsg {
font: normal 16px sans-serif;
color: lightgreen;
}
#lrc {
position: absolute;
left: 10px;
top: 10px;
font: bold 1.5em sans-serif;
color: lightgreen;
text-shadow: 1px 1px 2px #000;
text-align: center;
}
#lrc:hover, #tmsg:hover {
color: green;
}
</style>
<div id="papa">
<span id="mplayer">
<span id="btnwrap">
<span id="btnplay"></span>
<span id="btnpause"></span>
</span>
<span id="tmsg">00:00 | 00:00</span>
</span>
<span id="lrc">lrc歌词</span>
</div>
抢个沙发躺下慢慢看 最喜欢看这样的讲解帖，原来有些糊里糊涂的语句，在讲解里变得清晰。谢谢黑黑{:4_187:} 这光降解特别清楚，黑黑辛苦了{:4_199:} 绿叶清舟 发表于 2022-9-1 19:06
抢个沙发躺下慢慢看
这个貌似不太难 红影 发表于 2022-9-1 19:42
最喜欢看这样的讲解帖，原来有些糊里糊涂的语句，在讲解里变得清晰。谢谢黑黑
且当复习了{:5_106:} 红影 发表于 2022-9-1 19:43
这光降解特别清楚，黑黑辛苦了
喝水
{:4_191:} 马黑黑 发表于 2022-9-1 20:31
这个貌似不太难
放到一起就难了 马黑黑 发表于 2022-9-1 20:32
且当复习了
这个真的非常好，太赞了{:4_187:} 马黑黑 发表于 2022-9-1 20:32
喝水
东篱也喜欢让人喝水，咋都喜欢啊{:4_173:} 红影 发表于 2022-9-1 21:53
这个真的非常好，太赞了
下篇也准备写好啦 红影 发表于 2022-9-1 21:54
东篱也喜欢让人喝水，咋都喜欢啊
礼貌问题 绿叶清舟 发表于 2022-9-1 20:42
放到一起就难了
有个过程 写得很详细。老黑辛苦了。{:4_190:} 加林森 发表于 2022-9-2 09:17
写得很详细。老黑辛苦了。
希望能逐一理解 马黑黑 发表于 2022-9-2 12:33
希望能逐一理解
嗯嗯。能看懂的。 加林森 发表于 2022-9-2 12:58
嗯嗯。能看懂的。
看懂是第一步 马黑黑 发表于 2022-9-2 13:16
看懂是第一步
我会自己动手去试的。{:4_190:} 加林森 发表于 2022-9-2 13:24
我会自己动手去试的。
理解非常重要，理解后掌握，就是自己的技术了 马黑黑 发表于 2022-9-2 13:35
理解非常重要，理解后掌握，就是自己的技术了
是的。谢谢你啦。
页:
[1]
2