<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>音频</title>
</head>
<body>
<audio >
<source src="resource/audio/OUTPUT.mp3" type=‘audio/mpeg‘>
<source src="resource/audio/OUTPUT.aac" type=‘audio/aac; codecs="aac"‘>
<source src="https://cdn.xiaohigh.com/野狼disco.m4a" type=‘audio/mpeg‘>
您的浏览器不支持，<a href="resource/audio/OUTPUT.mp3">请下载</a>
</audio>
<hr>
<audio id="music" src="./resource/mp3/飞云之下.m4a"
preload
></audio>
<br>
<button>增加音量</button>
<button>降低音量</button>
<button>静音</button>
<button>1.25倍播放</button>
<button>2倍播放</button>
<button>播放</button>
<button>暂停</button>
<script>
//事件
var audio = document.querySelector(‘#music‘);
//当音频文件元数据加载完毕之后 触发
audio.onloadedmetadata = function () {
//音频的播放时长
console.log(audio.duration);
//属性是否处于暂停
console.log(audio.paused);
}
//当播放时间发生改变的时候触发
audio.ontimeupdate = function () {
//当前的播放时间
// console.log(audio.currentTime);
// console.log(audio.ended);
}
//当音量改变的时候触发
audio.onvolumechange = function () {
console.log(Math.random());
}
//音量控制
var btns = document.querySelectorAll(‘button‘);
btns[0].onclick = function () {
audio.volume += 0.1;
}
//降低音量
btns[1].onclick = function () {
audio.volume -= 0.1;
}
btns[2].onclick = function () {
audio.muted = !audio.muted;
}
//1.25快速
btns[3].onclick = function () {
audio.playbackRate = 1.25;
}
btns[4].onclick = function () {
audio.playbackRate = 2;
}
//点击播放
btns[5].onclick = function () {
audio.play();
}
//点击暂停
btns[6].onclick = function () {
audio.pause();
}
</script>
</body>
</html>
原文：https://www.cnblogs.com/eric-share/p/13772032.html