共计 8969 个字符,预计需要花费 23 分钟才能阅读完成。
- 前置
- 对于 css 来设置 audio 款式
- 对于 JavaScript 来设置款式
- 对于 React 写一个自定义的 Audio 组件
- 总结
前置
- 大抵理解 audio 属性
- 懂一点点 CSS
- 懂一点点 JS 与 audio 事件
- 懂一点点 React
对于 css 来设置 audio 款式
援用 MDN 中的话 应用 CSS 设置款式
- 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,并把安排好布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Audio DIY</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<audio
id='audio'
src='https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3''
preload='metadata' ></audio>
<div class="audio-container">
<div class="audio-toggle" id="control">
播放
</div>
<div class="audio-progress-box" id='progress'>
<span class="progressDot" id="control-dot"></span>
<div class="audio-progress-bar" id="control-progress"></div>
</div>
<div class="audio-time" id="‘time’">
<span id='current'>00:00</span> / <span id='duration'>00:00</span>
</div>
</div>
</body>
<script src="./audio.js"></script>
</html>
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].length === 1 ? '0' + s[i] : s[i];
time += ':';
}
time += s[i].length === 1 ? '0' + s[i] : s[i];
return time;
}
2.2 播放 && 暂停 && 进度更新
contorl.addEventListener('click', e => {if (e.target.innerText === '播放') {
e.target.innerText = '暂停';
Audio.play();} else {
e.target.innerText = '播放';
Audio.pause();}
});
Audio.addEventListener('loadedmetadata', e => {duration.innerText = transTime(e.target.duration);
});
Audio.addEventListener('timeupdate', e => {
let value = e.target.currentTime / Audio.duration;
current.innerText = transTime(e.target.currentTime);
contorlProgress.style.width = `${value * 100}%`;
contorlDot.style.left = `${value * 100}%`;
});
Audio.addEventListener('ended', e => {
contorlProgress.style.width = '0%';
contorlDot.style.left = '0%';
contorl.innerText = '播放';
});
2.3 拖动进度条
// 鼠标按下
contorlDot.addEventListener('mousedown', down, false);
contorlDot.addEventListener('touchstart', down, false);
// 开始拖动
document.addEventListener('mousemove', move, false);
document.addEventListener('touchmove', move, false);
// 拖动完结
document.addEventListener('mouseup', end, false);
document.addEventListener('touchend', end, false);
const position = {
oriOffestLeft : 0, // 挪动开始时进度条的点间隔进度条的偏移值
oriX : 0, // 挪动开始时的 x 坐标
maxLeft : 0, // 向左最大可拖动间隔
maxRight : 0, // 向右最大可拖动间隔
};
let flag = false; // 标记是否拖动开始
const down = event => {if (!Audio.pause || Audio.currentTime !== 0) {
flag = true;
position.oriOffestLeft = contorlDot.offsetLeft;
position.oriX = event.touches ?
event.touches[0].clientX :
event.clientX;
// 要同时适配 mousedown 和 touchstart 事件
position.maxLeft = position.oriOffestLeft;
// 向左最大可拖动间隔
position.maxRight = contorlProgressBox.offsetWidth -
position.oriOffestLeft; // 向左边最大可拖动间隔
if (event && event.preventDefault) event.preventDefault();
else event.returnValue = false;
if (event && event.stopPropagation) event.stopPropagation();
else window.event.cancelBubble = true;
}
};
const move = event => {if (flag) {let clientX = event.touches ? event.touches[0].clientX : event.clientX;
let length = clientX - position.oriX;
if (length > position.maxRight) {length = position.maxRight;} else if (length < -position.maxLeft) {length = -position.maxLeft;}
let pgsWidth = parseFloat(window.getComputedStyle(contorlProgressBox, null).width.replace('px'),
);
let rate = (position.oriOffestLeft + length) / pgsWidth;
Audio.currentTime = Audio.duration * rate;
}
};
const end = () => {flag = false;};
对于 React 写一个自定义的 Audio 组件
框架加持会让组件更加简略,chch
import React, {
useRef,
useLayoutEffect,
useState,
useEffect,
MouseEvent,
} from 'react';
import './Audio.css';
function transTime(value: number) {
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: string) {
var time = '';
var s = value.split(':');
var i = 0;
for (; i < s.length - 1; i++) {time += s[i].length === 1 ? '0' + s[i] : s[i];
time += ':';
}
time += s[i].length === 1 ? '0' + s[i] : s[i];
return time;
}
export const Audio: React.FC<any> = props => {const { src, width = '80%', height = '30px'} = props;
const audioRef = useRef<HTMLAudioElement>(null);
const barBgRef = useRef<HTMLDivElement>(null);
const barRef = useRef<HTMLDivElement>(null);
const dotRef = useRef<HTMLSpanElement>(null);
const uidRef = useRef<string>(uniqueId());
const [toggle, setToggle] = useState<boolean>(true);
const [progress, setProgress] = useState<number>(0);
const [duration, setDuration] = useState<string>('00 : 00');
const [currentTime, setCurrentTime] = useState<string>('00:00');
useLayoutEffect(() => {if (audioRef.current && src) {audioRef.current.addEventListener('play', (e: Event) => {const pid = (e.target as HTMLAudioElement).getAttribute('pid');
const audios = document.querySelectorAll('audio');
console.log('pid', pid);
audios.forEach((element, index) => {if (element.getAttribute('pid') === pid) return;
element.pause();});
});
audioRef.current.addEventListener('loadedmetadata', e => {
const duration = transTime((e.target as HTMLAudioElement).duration as number,
);
setDuration(duration);
});
audioRef.current.addEventListener('play', _res => {setToggle(false);
});
audioRef.current.addEventListener('pause', () => {setToggle(true);
});
audioRef.current.addEventListener('timeupdate', e => {
let value =
(e.target as HTMLAudioElement).currentTime /
(audioRef.current as HTMLAudioElement).duration;
setProgress(value * 100);
setCurrentTime(transTime((e.target as HTMLAudioElement).currentTime));
// console.log('timeupdate res', res.target.currentTime);
});
}
return () => {};
}, [src]);
useEffect(() => {if (dotRef.current && src) {
const position = {
oriOffestLeft : 0, // 挪动开始时进度条的点间隔进度条的偏移值
oriX : 0, // 挪动开始时的 x 坐标
maxLeft : 0, // 向左最大可拖动间隔
maxRight : 0, // 向右最大可拖动间隔
};
let flag = false; // 标记是否拖动开始
// 按下
const down = (event: TouchEvent | MouseEvent) => {if (!audioRef.current?.paused || audioRef.current.currentTime !== 0) {
flag = true;
position.oriOffestLeft = dotRef.current?.offsetLeft ?? 0; // 初始地位
position.oriX = position.oriX =
event instanceof TouchEvent
? event.touches[0].clientX
: event.clientX; // 要同时适配 mousedown 和 touchstart 事件
position.maxLeft = position.oriOffestLeft; // 向左最大可拖动间隔
position.maxRight =
barBgRef.current?.offsetWidth ?? 0 - position.oriOffestLeft; // 向左边最大可拖动间隔
if (event && event.preventDefault) {event.preventDefault();
} else {(event as TouchEvent).returnValue = false;
}
// 禁止事件冒泡
if (event && event.stopPropagation) {event.stopPropagation();
}
}
};
// 挪动
const move = (event: TouchEvent | MouseEvent) => {if (flag && barBgRef.current) {
let clientX =
event instanceof TouchEvent
? event.touches[0].clientX
: event.clientX; // 要同时适配 mousemove 和 touchmove 事件
let length = clientX - position.oriX;
if (length > position.maxRight) {length = position.maxRight;} else if (length < -position.maxLeft) {length = -position.maxLeft;}
// let pgsWidth = barBgRef.current?.offsetWidth;
let pgsWidth = parseFloat(window.getComputedStyle(barBgRef.current).width.replace('px', ''),
);
let rate = (position.oriOffestLeft + length) / pgsWidth;
console.log('===', position.oriOffestLeft, length);
console.log(
'偏移总长比例',
(audioRef.current as HTMLAudioElement).duration * rate,
rate,
);
(audioRef.current as HTMLAudioElement).currentTime =
(audioRef.current as HTMLAudioElement).duration * rate;
}
};
// 完结
const end = () => {flag = false;};
// 鼠标按下时
dotRef.current.addEventListener('mousedown', down as any, false);
dotRef.current.addEventListener('touchstart', down, false);
// 开始拖动
document.addEventListener('mousemove', move as any, false);
document.addEventListener('touchmove', move, false);
// 拖动完结
document.addEventListener('mouseup', end, false);
barBgRef.current?.addEventListener('touchend', end, false);
}
}, [src]);
const handlePaly = () => {if (toggle && src) {audioRef.current?.play();
return;
}
audioRef.current?.pause();
return;
};
return (
<>
<audio
// @ts-ignore
pid={uidRef.current}
controls={false}
src={src}
preload='metadata'
ref={audioRef}>
您的浏览器不反对 audio 标签
</audio>
<div className='audio-container' style={{width, height}}>
<div className='audio-toggle' onClick={handlePaly}>
{toggle && src ? '>' : '||'}
</div>
<div className='audio-progress-bar-bg' ref={barBgRef}>
<span
ref={dotRef}
className='progressDot'
style={{left: `${progress - 2}%` }}></span>
<div
ref={barRef}
className='audio-progress-bar'
style={{width: `${progress}%`,
}}></div>
</div>
<div className='audio-time'>
{currentTime}/{duration}
</div>
</div>
</>
);
};
export default Audio;
总结
PS:原生内有个性能是下载,这里并没有实现
对于 JS 代码局部,大部分参考至这里 H5 audio 音频标签自定义款式批改以及增加播放管制事件
需要起因,原生款式仿佛并不能满足产品,就会呈现须要 DIY 的状况,集体参照了很多网上相干的 Blog,如有谬误,敬请指教
感激浏览
参考文章
- H5 audio 音频标签自定义款式批改以及增加播放管制事件
- HTML audio 根底 API 齐全使用指南
- MDN_audio
正文完