版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/CodingNoob/article/details/87929524
最终效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="view">
<audio id="audio" loop controls>
<!-- <source src="horse.ogg" type="audio/ogg"> -->
<source src="warn1.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
</div>
<h1>时间：<span id="time"></span></h1>
<button id="play">播放</button>
<button id="pause">暂停</button>
<button id="jy">静音</button>
</body>
<script>
function $(str) {
return document.querySelector(str);
}
let obj = $('#audio');
$('#jy').onclick = function () {
// 静音状态
if (obj.muted) {
this.innerHTML = '静音';
obj.muted = false; // 是否静音
} else {
this.innerHTML = '取消静音';
obj.muted = true; // 是否静音
}
};
$('#play').onclick = function () {
obj.controls = true; // 显示控制条
// obj.load(); // 重载
obj.play(); // 是否暂停
console.log(obj.controls); // 获取控制条
console.log(obj.currentTime); // 获取时间
$('#time').innerHTML = obj.currentTime;
clearInterval(window.$time);
window.$time = setInterval(() => {
$('#time').innerHTML = obj.currentTime;
}, 1000);
console.log(obj.currentSrc);
};
$('#pause').onclick = function () {
obj.pause(); // 是否暂停
};
</script>
</html>