audio标签的简单修饰
本帖最后由 马黑黑 于 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>
<p>简单修饰过的 audio 播放界面：<br> </p>
<p><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></p>
<p>原生样式：<br> </p>
<p><audio src="https://wj.zp68.com/lxx/yunhua/20211217/01.mp3" controls="controls" loop="loop"></audio></p>
二楼的播放界面，按下播放按钮，不会留下虚框；三楼去点点看。 这个是平日里最常用到的，很实用的讲解{:4_187:} 马黑黑 发表于 2022-1-14 18:48
二楼的播放界面，按下播放按钮，不会留下虚框；三楼去点点看。
三楼的确有虚框，原来这是个默认项。不说还真不知道。
若是设置为自动播放，没有点按钮的动作，虚框是不是就不会出现？ 惦记播放，三楼出现虚框，再点别处，虚框就自动不见了。 红影 发表于 2022-1-14 20:27
惦记播放，三楼出现虚框，再点别处，虚框就自动不见了。
对。这是获得焦点和失去焦点的问题 红影 发表于 2022-1-14 20:26
三楼的确有虚框，原来这是个默认项。不说还真不知道。
若是设置为自动播放，没有点按钮的动作，虚框是不 ...
只要不点击虚框是不出来的。交互元素点击后会获得焦点 马黑黑 发表于 2022-1-14 20:33
只要不点击虚框是不出来的。交互元素点击后会获得焦点
所谓焦点之类的不懂。嗯嗯，知道了，没有点击动作，虚框不会出来。 马黑黑 发表于 2022-1-14 20:32
对。这是获得焦点和失去焦点的问题
和鼠标动作有关吧。 红影 发表于 2022-1-14 21:55
和鼠标动作有关吧。
不一定只是鼠标。一个元素（或窗口）获得还可以通过键盘操作获得，比如Tab键 红影 发表于 2022-1-14 21:54
所谓焦点之类的不懂。嗯嗯，知道了，没有点击动作，虚框不会出来。
比如Windows窗口，打开很多个，其中一个你正在操作，它处于活动中，它就是获得焦点的窗口。而该窗口的诸多元素，如文本框，按钮，菜单，都会在某个时候获得焦点 马黑黑 发表于 2022-1-14 22:28
不一定只是鼠标。一个元素（或窗口）获得还可以通过键盘操作获得，比如Tab键
哦哦，这些有些深奥的。 马黑黑 发表于 2022-1-14 22:29
比如Windows窗口，打开很多个，其中一个你正在操作，它处于活动中，它就是获得焦点的窗口。而该窗口的诸 ...
焦点就是活动的，可以这样理解么？ 红影 发表于 2022-1-14 23:04
焦点就是活动的，可以这样理解么？
活动窗口或元素就是获得焦点的主体，获得焦点才可人机交互 红影 发表于 2022-1-14 23:03
哦哦，这些有些深奥的。
Tab键有一个大的作用就是切换焦点 马黑黑 发表于 2022-1-14 23:06
活动窗口或元素就是获得焦点的主体，获得焦点才可人机交互
嗯嗯，这样说更理解了。 马黑黑 发表于 2022-1-14 23:06
Tab键有一个大的作用就是切换焦点
第一次知道呢，以前一直都不关注这个键。 红影 发表于 2022-1-15 19:38
第一次知道呢，以前一直都不关注这个键。
你可以试着在浏览器界面按一下这个键，多按几下