css audio 碟片样式,关于 Audio 自定义样式

前置

关于 css 来设置 audio 样式

关于 JavaScript 来设置样式

关于 React 写一个自定义的 Audio 组件

总结

前置大致了解 audio 属性

懂一点点 CSS

懂一点点 JS 与 audio 事件

懂一点点 React

关于 css 来设置 audio 样式audio 元素没有自带的固有视觉样式，除非如果声明了 controls 属性，则会显示浏览器的默认控件。

默认控件的 display 的默认值为 inline。将该值设为 block 通常会对定位和布局有好处，除非你想将控件放在文本块或类似元素中。

你可以使用作用于整个控件的属性来为其设置样式。例如可用 border、border-radius、padding, margin 等等。但你不能设置音频播放器中的单个组件(如改变按钮大小、改变图标或字体等)。控件在不同的浏览器中也有所不同。

如果在跨浏览器中得到一致的外观和体验，你需要创建自定义控件；自定义控件可以根据你的需求任意设置样式，还可以使用 JavaScript 和 HTMLMediaElement API 来设置更多功能。

视频播放器样式基础 提供了一些有用的样式技术，这篇文章围绕 video 而写，但大部分都可以用于 audio。

总上所述，关键就是在于 css 可操作性相对少，且会产生关于兼容性的问题

关于 JavaScript 来设置 audio 样式

说是 JavaScript ，依然也需要配合到 css 里面来的(不然不好看准备一个,最简单的带有 audio 的 html，并把布置好布局

关键 JavaScript 代码2.1 准备参数

2.2 播放 && 暂停 && 进度更新

2.3 拖动进度条

配合 css 食用

准备一个,最简单的带有 audio 的 html，并把布置好布局

Audio DIY

id='audio'

src='https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3''

preload='metadata' >

播放

00:00 / 00:00

2.1 准备参数const Audio = document.querySelector('#audio');

const contorl = document.querySelector('#control');

const contorlDot = document.querySelector('#control-dot');

const contorlProgress = document.querySelector('#control-progress');

const contorlProgressBox = document.querySelector('#progress');

const current = document.querySelector('#current');

const duration = document.querySelector('#duration');

// 工具函数

// 时分秒转换

function transTime(value) {

var time = '';

var h = parseInt(`${value / 3600}`);

value %= 3600;

var m = parseInt(`${value / 60}`);

var s = parseInt(`${value % 60}`);

if (h > 0) {

time = formatTime(h + ':' + m + ':' + s);

} else {

time = formatTime(m + ':' + s);

}

return time;

}

// 补零

function formatTime(value) {

var time = '';

var s = value.split(':');

var i = 0;

for (; i < s.length - 1; i++) {

time += s[i].