2023年7月11日发(作者：)

audio标签的样式修改由于H5的流⾏，现在移动端⼤多数的需求都可以使⽤audio来播放⾳频，但您可能只是需要很简单的播放/停⽌效果，但不同的浏览器上的audio样式却不尽⼈意，那么要怎么改变这个样式呢，其实它的原理⽐较简单，就是把写audio的时候不要⽤controls属性，隐藏原⽣的audio， 然后⽤div之类标签，定义css样式美化起来⽤来显⽰播放器的效果，最后⽤js捕获audio事件，基本就是src路径、pause暂停、load加载、play播放这些。下⾯是audio标签的⼀些相关API：控制函数功能说明load()：加载⾳频、视频软件，通常不必调⽤，除⾮是动态⽣成的元素，⽤来在播放前预加载play()：加载并播放⾳频、视频⽂件，除⾮⽂件已经暂停在其他位置，否则默认重头开始播放pause()：暂停处于播放状态的⾳频、视频⽂件audio 可脚本控制的特性值src：⾳频⽂件路径。autoplay：设置⾳频是否⾃动播放 （默认有此属性为⾃动播放已经加载的的媒体⽂件），或查询是否已设置为autoplayautobuffer：设置是否在页⾯加载时⾃动缓冲⾳频，如果设置了autoplay，则忽略此特性loop：设置⾳频是否要循环播放。，或查询是否已设置为loopcurrentTime：以s为单位返回从开始播放到⽬前所花的时间，也可设置currentTime的值来跳转到特定位置 controls：显⽰或者隐藏⽤户控制界⾯（属性供添加播放、暂停和⾳量控件。 ） volume：在0.0到1.0间设置⾳量值，或查询当前⾳量值muted：设置是否静⾳controls ： 是否显⽰播放控件，不同的浏览器的控件外观不相同duration ： 影⽚总时长(s)ended: 是否播放到最后结尾了muted：是否静⾳volumn: 0~1 ⾳量设置，默认是最⼤值，且是js对象的属性，不能在标签上直接写pasued : 当期那是否处于暂停状态poster: 指定视频第⼀帧播放前的电影海报preload 值视频预加载的⽅案 > 取值：metadata 元数据，只预加载视频的宽度、时长、第⼀帧内容 > auto ⾃动预加载、时长、第⼀帧内容、并缓冲⼀定时长 > none:不预加载任何内容

只读属性属性说明1. duration：获取媒体⽂件的播放时长，以s为单位，如果⽆法获取，则为NaN2. paused：如果媒体⽂件被暂停，则返回true，否则返回false3. ended：如果媒体⽂件播放完毕，则返回true4. startTime：返回起始播放时间，⼀般是0.0，除⾮是缓冲过的媒体⽂件，并⼀部分内容已经不在缓冲区5. error：在发⽣了错误后返回的错误代码6. currentSrc：以字符串形式返回正在播放或已加载的⽂件，对应于浏览器在source元素中选择的⽂件对于这些属性，主流的浏览器都⽀持。可是别以为就没有了兼容性，在⾳频播放流中，有两个阵营。firefox 和 opera ⽀持 ogg ⾳频，safari 和ie ⽀持 mp3。幸好Google的chrome都⽀持。代码如下：

通过以上⽅法，audio的样式修改的问题就解决啦，你可以换成你想要的显⽰效果。⾃定义播放器HTML

　JSvar oVideo = elector('video');var oPlay = elector('.play');var time = elector('.timer');var oProgressbar = elector('.progressBar');var oTimes = elector('.times');var ul = elector('.time-ul');var li = mentsByTagName('li');var oAdd = elector('.add');var oEvent = elector('.event');// 点击播放或者暂停k = function() { if () { (); TML = '暂停'; } else { (); TML = '播放'; }}// 时间setInterval(function() { // 总时长 var total = on; var nowtime = tTime; // 时间显⽰到页⾯ TML = parseInt(nowtime / 60) + ":" + String(parseInt(nowtime % 60)).padStart(2, 0) + '/' + parseInt(total / 60) + ':' + String(parseInt(total % 60)).padStart(2, 0); // 当前进度条的宽度 var width = nowtime / total * Width; mentsByTagName('div')[0]. = width + 'px'; mentsByTagName('i')[0]. = width + 'px';}, 1000)// 进度条eenter = function() { = '14px'; = '-14px'; mentsByTagName('div')[0]. = '14px'; mentsByTagName('i')[0]. = '18px';}eleave = function() { = '2px'; = '-2px'; mentsByTagName('div')[0]. = '2px'; mentsByTagName('i')[0]. = '6px';}// 点击进度条，跳转进度k = function(e) { var location = ; var width = Width; // 计算出⽬标时间 var targetTime = location / width * on; // 设置当前时间 tSrc = targetTime;}// 倍数k = function() { y = 'block';}eleave = function() { y = 'none';}// 给每⼀个li注册点击事件for (var i = 0; i < ; i++) { // 下标 li[i].index = i; li[i].onclick = function() { switch () { case 0: // 两倍 ckRate = 2; TML = 'x2'; break; case 1: // 1.5倍 ckRate = 1.5; TML = 'x1.5'; break; case 2: // 1.25倍 ckRate = 1.25; TML = 'x1.25'; break; default: // 正常 ckRate = 1; TML = '倍数'; break; break; } }}// ⾳量k = function() { = + 0.1 >= 0 ? 0 : + 1}k = function() { = - 0.1 <= 0 ? 0 : - 1}　　CSS* { margin: 0; padding: 0;}.box { width: 598px; height: 280px; border: 1px solid black; position: relative; margin: 100px auto;}video { position: absolute; width: 598px; height: 280px;}.menu { position: absolute; width: 100%; height: 50px; margin-top: 230px; background-color: rgb(0, 0, 0, .5);}.play { border: 1px solid #fff; width: 50px; height: 28px; border-radius: 8px; position: absolute; margin-top: 12px; margin-left: 20px; line-height: 26px; text-align: center; color: #fff;}.timer { width: 50px; height: 28px; border-radius: 8px; position: absolute; margin-top: 12px; margin-left: 120px; line-height: 26px; text-align: center; color: #fff;}.times { border: 1px solid #fff; width: 50px; height: 28px; border-radius: 8px; position: absolute; margin-top: 12px; margin-left: 400px; line-height: 26px; text-align: center; color: #fff;}.progressBar { position: absolute; width: 100%; height: 2px; background-color: gray; top: -2px; left: 0;}.progressBar div { position: absolute; height: 2px; background-color: #f40; width: 120px; left: 0; top: 0;}.progressBar i { position: absolute; width: 6px; height: 6px; border-radius: 3px; background-color: #fff; left: 120px; top: -2px;}.time-ul { position: absolute; width: 90px; height: 100px; top: -110px; left: 380px; background-color: rgb(0, 0, 0, .5); display: none;}.time-ul li { display: inline-block; width: 100%; height: 25px; line-height: 25px; text-align: center;}.time-ul li:hover { color: #f40; font-weight: bold;}.vol { position: absolute; width: 50px; height: 28px; text-align: center; line-height: 28px; color: #fff; top: 50%; margin-top: -15px; cursor: pointer; border-radius: 8px; border: 1px solid #fff;}.add { left: 470px;}.event { left: 530px;}