众所周知,HTML5 已经可以很好的支持 Audio 和 Vedio 了,我们可以方便的在网页添加多媒体控件。然而,设计师总是与众不同,修改 Audio 默认样式已成常态。

本文将围绕如何通过 CSS 来修改 HTML5 的默认样式,撇开 JS 实现方式。当然,后续还会推出一篇文章:打造与众不同的 Audio 播放器,先占个坑吧!

一、Audio 结构

Audio 的用法很简单,插入下面的代码,一个原生音频播放器就完成了:

1
2
3
4
5
<audio controls="controls" preload="auto">
<source src="jartto.ogg" type="audio/ogg" />
<source src="jartto.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

二、属性一览

  • autoplay:如果出现该属性,则音频在就绪后马上播放。
  • controls:如果出现该属性,则向用户显示控件,比如播放按钮。
  • loop:如果出现该属性,则每当音频结束时重新开始播放。
  • preload:如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
  • src:要播放的音频的 URL。

更多详情,请参考文档:HTML5 Audio 标签

三、问题窘境

当我们打开开发者工具审查 Audio 元素的时候,除了 Audio 标签,什么也看不到。这时候,肯定有人想这么改:

1
2
3
audio {
// todo...
}

然而,并没有什么卵用。

那么问题来了,如果只通过修改样式,能不能达到修改音频播放器的外观的功能呢?

四、最终方案

答案是肯定的,我们来覆写 Audio 内置的一些全局样式,如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
audio::-webkit-media-controls-panel

audio::-webkit-media-controls-mute-button

audio::-webkit-media-controls-play-button

audio::-webkit-media-controls-timeline-container

audio::-webkit-media-controls-current-time-display

audio::-webkit-media-controls-time-remaining-display

audio::-webkit-media-controls-timeline

audio::-webkit-media-controls-volume-slider-container

audio::-webkit-media-controls-volume-slider

audio::-webkit-media-controls-seek-back-button

audio::-webkit-media-controls-seek-forward-button

audio::-webkit-media-controls-fullscreen-button

audio::-webkit-media-controls-rewind-button

audio::-webkit-media-controls-return-to-realtime-button

audio::-webkit-media-controls-toggle-closed-captions-button

嗯,意思很明了,就这么干。看起来并没有什么挑战,这仅仅只是开始!

五、新的问题

我们碰到了新的问题,具体如下:

  1. 播放/暂停 按钮不能替换;
  2. 播放进度 slider 和 声音 slider 无法修改样式;

怎么办,这是个问题,距离设计师与众不同的音频播放器就差一步之遥了!

六、继续探索

首先,突破点在于能否找到一个 pause 的样式类,来解决上述问题一。
其次,play 和 pause 如何触发图片互换。

我们知道,通过 audio::-webkit-media-controls-play-button 可以重新定义播放按钮的外观样式。