完美解决audio自定义修改样式。完整demo，可直接复用copy。修改默认样式

最新推荐文章于 2023-08-05 10:29:34 发布

AILIHEIHEI

最新推荐文章于 2023-08-05 10:29:34 发布

阅读量6.7k

点赞数 6

分类专栏： H5分享功能

本文链接：https://blog.csdn.net/qq_42780323/article/details/111885061

版权

H5分享功能专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这个是完整demo，可以复用。请把代码直接复制，打开页面查看效果更好。知识点在下方。

<!DOCTYPE html>

<head>

<style>

body{

background:#f0dede;

}

.audio{

margin:0.25rem 0;

height:0.52rem;

border-radius: 25px;

background:rgb(187, 221, 213);

background: linear-gradient(90deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,1) 100%);

position:relative;

}

.btn{

position:absolute;

width:0.24rem;

height:0.24rem;

left:0.24rem;

top:0.14rem;

background:url('./img/btn_start@2x.png') no-repeat;

background-size:100% 100%;

}

.text{

position:absolute;

left:0.57rem;

top:0.1rem;

height:0.2rem;

font-size: 0.14rem;

}

.time{

position:absolute;

right:0.24rem;

top:0.12rem;

height:0.17rem;

font-size: 0.12rem;

}

.barbox{

position:absolute;

left:0.57rem;

right:0.24rem;

height:0.15rem;

bottom:0.05rem;

/* background:#faa */

}

.progressall{

height:0.02rem;

margin-top:0.03rem;

background: rgba(0,0,0,0.1);

}

.progresscurrent{

height:0.02rem;

margin-top:0.03rem;

background:#232323;

width:1%;

}

</style>

</head>

<body>

<span class='t1'>00:00</span> /

</div>

</div>

</div>

</body>

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',

recalc = function () {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);

//s转换时间格式00:00

function mathTime(time) {

var duration = parseInt(time);

var minute = parseInt(duration/60);

var sec = duration%60+'';

var isM0 = ':';

if(minute == 0){

minute = '00';

}else if(minute < 10 ){

minute = '0'+minute;

}

if(sec.length == 1){

sec = '0'+sec;

}

return minute+isM0+sec

}

var media=document.getElementById('media')

//加载完成后会执行这个函数

media.onloadedmetadata=function(){

// console.info(video.duration);

// span.innerHTML=video.duration;

let time=media.duration

document.getElementsByClassName('t2')[0].innerText= mathTime(time)

console.log(mathTime(time),'打印当前audio元素时长数字')

}

//播放、暂停按钮

var btn=document.getElementsByClassName('btn')[0]

var timer;

btn.οnclick=function(){

clearInterval(timer)

if(media.paused){//假如为暂停状态,点击则播放

btn.style.backgroundImage='url(./stop.png)';

media.play();

timer=setInterval(function(){

console.log(media.currentTime,'当前进度')

document.getElementsByClassName('t1')[0].innerText= mathTime(media.currentTime);

var progressallWidth=document.getElementsByClassName('progressall')[0].offsetWidth;

console.log(document.getElementsByClassName('progressall')[0].offsetWidth,'宽度')

var pre=(100*media.currentTime)/(100*media.duration)*progressallWidth

document.getElementsByClassName('progresscurrent')[0].style.width=pre+'px';

//如果播放完毕

if(media.currentTime==media.duration){

clearInterval(timer)

btn.style.backgroundImage='url(./img/btn_start@2x.png)';

}

},500)

}else{//假如为播放状态，点击则暂停

btn.style.backgroundImage='url(./img/btn_start@2x.png)';

media.pause();

clearInterval(timer)

}

</script>

</html>

用到的知识点：（有部分转载自https://blog.csdn.net/l333f/article/details/60877276和https://juejin.im/post/5c8a4a586fb9a049b507b0d5）

由于html5的流行，现在移动端大多数的需求都可以使用audio来播放音频，但您可能只是需要很简单的播放/停止效果，但不同的浏览器上的audio样式却不尽人意，那么要怎么改变这个样式呢，其实它的原理比较简单，就是把写audio的时候不要用controls属性，隐藏原生的audio，然后用div之类标签，定义css样式美化起来用来显示播放器的效果，最后用js捕获audio事件，基本就是src路径、pause暂停、load加载、play播放这些。下面是audio标签的一些相关API：

控制函数功能说明

load()：加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载
play()：加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放
pause()：暂停处于播放状态的音频、视频文件

audio 可脚本控制的特性值：

src：音频文件路径。
autoplay：设置音频是否自动播放（默认有此属性为自动播放已经加载的的媒体文件），或查询是否已设置为autoplay
autobuffer：设置是否在页面加载时自动缓冲音频，如果设置了autoplay，则忽略此特性
loop：设置音频是否要循环播放。，或查询是否已设置为loop
currentTime：以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置
controls：显示或者隐藏用户控制界面（属性供添加播放、暂停和音量控件。）
volume：在0.0到1.0间设置音量值，或查询当前音量值
muted：设置是否静音

只读属性属性说明

 duration：获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN
 paused：如果媒体文件被暂停，则返回true，否则返回false
 ended：如果媒体文件播放完毕，则返回true
 startTime：返回起始播放时间，一般是0.0，除非是缓冲过的媒体文件，并一部分内容已经不在缓冲区
 error：在发生了错误后返回的错误代码
 currentSrc：以字符串形式返回正在播放或已加载的文件，对应于浏览器在source元素中选择的文件

1duration：获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN
paused：如果媒体文件被暂停，则返回true，否则返回false
ended：如果媒体文件播放完毕，则返回true
startTime：返回起始播放时间，一般是0.0，除非是缓冲过的媒体文件，并一部分内容已经不在缓冲区
error：在发生了错误后返回的错误代码
currentSrc：以字符串形式返回正在播放或已加载的文件，对应于浏览器在source元素中选择的文件

对于这些属性，主流的浏览器都支持。可是别以为就没有了兼容性，在音频播放流中，有两个阵营。firefox 和 opera 支持 ogg 音频，safari 和 ie 支持 mp3。幸好Google的chrome都支持。

audio的知识点

addTextTrack() 为音视频加入一个新的文本轨迹
canPlayType() 检查指定的音视频格式是否得到支持
load() 重新加载音视频标签
play() 播放音视频
pause() 暂停播放当前的音视频
复制代码

audio的属性

audioTracks 返回可用的音轨列表（MultipleTrackList对象）
autoplay 媒体加载后自动播放
buffered 返回缓冲部件的时间范围(TimeRanges对象)
controller 返回当前的媒体控制器（MediaController对象）
controls 显示播控控件
crossOrigin CORS设置
currentSrc 返回当前媒体的URL
currentTime 当前播放的时间，单位秒
defaultMuted 缺省是否静音
defaultPlaybackRate 播控的缺省倍速
duration 返回媒体的播放总时长，单位秒
ended 返回当前播放是否结束标志
error 返回当前播放的错误状态
initialTime 返回初始播放的位置
loop 是否循环播放
mediaGroup 当前音视频所属媒体组 (用来链接多个音视频标签)
muted 是否静音
networkState 返回当前网络状态
paused 是否暂停
playbackRate 播放的倍速
played 当前播放部件已经播放的时间范围(TimeRanges对象)
preload 页面加载时是否同时加载音视频
readyState 返回当前的准备状态 {
&emsp;&emsp;&emsp;&emsp;0: HAVE_NOTHING 没有准备就绪的状态
&emsp;&emsp;&emsp;&emsp;1: HAVE_METADATA 关于音频就绪的元数据
&emsp;&emsp;&emsp;&emsp;2: HAVE_CURRENT_DATA 当前可用，但下一帧不确定
&emsp;&emsp;&emsp;&emsp;3: HAVE_FUTURE_DATA 当前和下一帧可用
&emsp;&emsp;&emsp;&emsp;4: HAVE_ENOUGH_DATA 有足够的数据支持播放
}
seekable 返回当前可跳转部件的时间范围(TimeRanges对象)
seeking 返回用户是否做了跳转操作
src 当前音视频源的URL
startOffsetTime 返回当前的时间偏移(Date对象)
textTracks 返回可用的文本轨迹(TextTrackList对象)
videoTracks 返回可用的视频轨迹(VideoTrackList对象)
volume 音量值
复制代码

audio的钩子

abort 当音视频加载被异常终止时产生该事件
canplay 当浏览器可以开始播放该音视频时产生该事件
canplaythrough 当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件
durationchange 当媒体的总时长改变时产生该事件
emptied 当前播放列表为空时产生该事件
ended 当前播放列表结束时产生该事件
error 当加载媒体发生错误时产生该事件
loadeddata 当加载媒体数据时产生该事件
loadedmetadata 当收到总时长，分辨率和字轨等metadata时产生该事件
loadstart 当开始查找媒体数据时产生该事件
pause 当媒体暂停时产生该事件
play 当媒体播放时产生该事件
playing 当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件
progress 当获取到媒体数据时产生该事件
ratechange 当播放倍数改变时产生该事件
seeked 当用户完成跳转时产生该事件
seeking 当用户正执行跳转时操作的时候产生该事件
stalled 当试图获取媒体数据，但数据还不可用时产生该事件
suspend 当获取不到数据时产生该事件
timeupdate 当前播放位置发生改变时产生该事件
volumechange 当前音量发生改变时产生该事件
waiting 当视频因缓冲下一帧而停止时产生该事件

AILIHEIHEI

关注

6
点赞
踩
18

收藏

觉得还不错? 一键收藏
2
评论
完美解决audio自定义修改样式。完整demo，可直接复用copy。修改默认样式

这个是完整demo，可以复用。请把代码直接复制，打开页面查看效果更好。知识点在下方。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>样式修改</title&...
复制链接

扫一扫