前置
关于 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 DIYid='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].