audio标签的简单修饰

马黑黑 · 发表于 2022-1-14 18:42

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

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

x

本帖最后由马黑黑于 2022-1-14 18:46 编辑

HTML的audio标签实际上是个音频控制，H5重新对之做了封装或定义，它很简单，在web页中使用时甚至可以不用设高宽尺寸，标签代码通常如下：

<audio src="音频地址" controls="controls" autoplay="autoplay" loop="loop"></audio>

其中：controls 属性操控界面，不要的话播放界面不可见；autoplay 设置自动播放，不要的话就不会自动播放；loop 控制的是循环播放，不要的话就不会循环播放。这些属性的值在 HTML5 里都等于属性自身的名称。

这样的播放界面，存在至少两个问题，我们来一一说明和对之进行简单修饰：

一是点击播放界面时，播放器会留有一个虚框。这个虚框实际上是 audio 控件的 outline 属性默认设置为了展现虚框。解决的方法很简单，可以用 CSS 样式表来重新定义 outline 为不显现——

<audio style="outline:none;" ... ></audio>

这就万事大吉，点播放器的任何控制开关和播放器自身界面任意处都不会再出现虚框。

二是不够立体，像一张两头修剪成圆形的纸条一样贴在那里。我们可以给它弄个小阴影，让它看上去精神一些，就在 style 里继续加入CSS修饰样式：

<audio style="outline:none; box-shadow:2px 2px 3px #000;" ... ></audio>

效果更难看了！为什么会这样？原来音频控件的界面和底部是分割开来的，后者浮动于矩形底盘之上，那个底盘类似于 audio 依托的盒子（比如div），做了透明处理，给它加边框后原形毕露。我们得狠狠心再给它划一刀吧，设定它为圆角的：

<audio style="outline:none; box-shadow:2px 2px 3px #000; border-radius:25px;" ... ></audio>

如果 border-radius 设定为 25px 还觉得不理想，可以再改改，改到满意为止。

下楼和下楼将运行如下的代码，可以去比较一下两者间的区别（音乐都不设定自动播放）：

二楼：

<audio style="outline:none;border-radius:25px;box-shadow:2px 2px 3px #000;" src="https://wj.zp68.com/lxx/yunhua/20211217/01.mp3" controls="controls" loop="loop"></audio>

三楼：

<audio src="https://wj.zp68.com/lxx/yunhua/20211217/01.mp3" controls="controls" loop="loop"></audio>