原生audio
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
</head>
<body>
<!-- video视频控件：
autoplay：是否自动播放，值：autoplay。
controls：是否显示播放控件，值：controls。
loop：是否循环播放，值：loop
src：视频路径。
muted：布尔属性，若存在则音频默认静音。
preload：定义音频的预加载方式，可选值：auto：自动预加载音频；metadata：仅加载音频元数据（如时长、采样率）；none：不预加载音频。
-->
<audio autoplay="autoplay" controls="controls'"loop="loop" src="file://D:/测试材料/1.mp3"></audio>
</body>
</html>
script
var trainaudio = document.getElementById("train_audio"); if (!iscontinue) { trainaudio.src = this.cs_url; } if (!trainaudio.duration) { trainaudio.onerror = function () { // 音频错误处理 trainaudio.pause();
alert('音频资源加载错误'); }; } else { trainaudio.play(); // 播放 trainaudio.volume = this.volume / 100; // 设置音量 trainaudio.oncanplay = function () {}; trainaudio.onended = function () {}; trainaudio.onerror = function () { // 音频错误处理 trainaudio.pause(); }; }
/**
在视频或音频加载过程中，事件的触发顺序如下：
- onloadstart：开始加载媒体资源时触发。
- ondurationchange：媒体资源的持续时间发生变化时触发。
- onloadedmetadata：元数据加载完成时触发。
- onloadeddata：初始数据加载完成时触发。
- onprogress：媒体资源下载过程中周期性触发。
- oncanplay：可以开始播放时触发。
- oncanplaythrough：可以流畅播放时触发，无需缓冲1。
*/
额外补充： - play: 当媒体开始播放时触发,这是最常用的媒体事件之一 - seeked: 当用户完成了进度条拖动操作,媒体跳转到新的时间点后触发 - abort: 当媒体加载终止时触发,比如网络中断或用户主动停止加载时
。对于媒体加载相关的事件: - loadstart:开始加载媒体 - loadeddata:已加载当前帧的媒体数据 - loadedmetadata:已加载媒体的元数据 其他常见的Video/Audio事件还包括: - pause:媒体暂停时触发 - ended:媒体播放结束时触发 - volumechange:音量改变时触发 - timeupdate:当前播放位置改变时触发
更多信息，可以看看这个博客：html5中的audio和video属性和事件汇总 - 凉城丶旧梦 - 博客园
浙公网安备 33010602011771号