开发html5音频播放器之界面篇

马黑黑 · 发表于 2022-9-1 18:48

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

开发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语句就得出 ▶ ：



下面做暂停按钮，先设计好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语句会得出我们所需要的暂停图标样式：



我们想让播放、暂停按钮合在一处，音乐播放时暂停按钮可见、播放按钮不可见，音乐暂停时播放按钮可见、暂停按钮不可见，为此，需要给这两个按钮一个容器，即父元素，我们命名为 #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;
}






二、制作播放进度条

播放进度条我们用线条实现，实际上是一个 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代码：



三、播放时间信息

这个比较简单了，就是设置一下文本相关的属性:

#tmsg {
font: normal 16px sans-serif;
color: lightgreen;
}

00:00 | 00:00

以上三样东西，目前它们是离散的状态，我们需要给它们找个父亲，让它们整齐划一排列在一块。为了将来方便整体布局，父元素应设置为绝对定位：

#mplayer {
position: absolute;
width: fit-content;
height: fit-content;
display: flex;
align-items: center;
gap: 8px;
}

宽高用自适应方式设定，这样我们更改任何子元素的尺寸，例如进度条长度，都不会有什么大问题，唯一要处理的将是如何决定其物理位置。弹性布局（flex）在这里至关重要，配合 align-items: center; 垂直居中和 gap: 8px; 子元素间隔距离的设置，其内的子元素将能按我们希望的那样齐刷刷排排坐了：






00:00 | 00:00


四、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; }



至此，音频播放器的界面编写完毕，下面附完整 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">





00:00 | 00:00

lrc歌词
</div>