HTML-JS-audio音频自定义

自定义audio

在做页面的开发时候我们经常会遇到audio这个标签他的样式不是自己想要的，这个时候我们通常只能利用css进行简单的修饰却无法做到更新一步的修饰。
首先我们先右键f12点击检查
然后选择Setting

然后选择
这个时候检查元素
这个时候可以看到pseudo这个属性 我们可以通过css来进行选择来修饰
但并不是每次都够使用的还可以利用js加audio的js事件来自己组建播放等创建

let audio = document.querySelector(选中audio)
// 以播放位列子  这个时候就可以调用audio.play()来进行播放

JavaScript可读写的属性

下面是常见的方法
1、autoplay：是否自动播放，默认为false
2、constrols：是否显示控件，默认为false

3、currentTime：音频当前播放位置，以秒计

4、defaultMuted：初始是否静音，默认为false

5、muted：是否静音，默认为false

6、defaultPlaybackRate：默认播放速度
1：正常速度
0.5：半速
2：倍速
-1：向后正常速度
-0.5：向后半速

7、playbackRate：播放速度
1：正常速度
0.5：半速
2：倍速
-1：向后正常速度
-0.5：向后半速

8、loop：是否循环播放，默认为false

9、preload：是否在页面加载后立即加载

10、src：地址源

11、volume：音量，范围0-1

JavaScript的事件

加载时触发
loadstart:浏览器开始寻找指定的音频或视频
progress:浏览器正在下载指定的音频或视频
durationchange:音频或视频的时长已改变
loadedmetadata:音频或视频的元数据已加载
loadeddata:音频或视频的当前帧已加载，但没有足够数据播放下一帧
canplay:浏览器能够开始播放指定的音频或视频
canplaythrough:音频或视频能够不停顿地一直播放
progress:浏览器正在下载指定的音频或视频
2、加载出错时触发
abort:在音频或视频终止加载时触发
error:在音频或视频加载发生错误时触发
stalled:在浏览器尝试获取媒体数据，但数据不可用时触发
suspend:在音频或视频数据被阻止加载时触发(可以是完成加载后触发，或者因为被暂停)
empted:在发生故障并且文件突然不可用时触发
3、改变状态触发
play:音频或视频文件已经就绪可以开始播放时触发
playing:音频或视频已开始播放时触发
ended:音频或视频文件播放完毕后触发
pause:音频或视频文件暂停时触发
ratechange:播放速度改变进触发
seeked:指示定位已结束时触发
seeking:正在进行指示定位时触发
timeupdate:播放位置改变时触发[注意:播放和调整指示定位时都会触发]
volumechange:音量改变时触发
waiting:需要缓冲下一帧而停止时触发
4、总结以上开发常用事件
play:音频或视频文件已经就绪可以开始播放时触发
ended:音频或视频文件播放完毕后触发
pause:音频或视频文件暂停时触发
timeupdate:播放位置改变时触发[注意:播放和调整指示定位时都会触发]
volumechange:音量改变时触发
abort:在音频或视频终止加载时触发
canplay:浏览器能够开始播放指定的音频或视频

相关构造方法
使用Audio()构造函数可以构造一个audio实例
const audio = new Audio(‘source.mp3’);

因为也是查了很多资料上面属性引自
https://www.jianshu.com/p/1fe701c9179f

还请大家多多留言