audio 是H5的新标签
常用的属性有
controls控件中每个小控件的显示
可以设置显示控件
controlslist="nodownload nofullscreen noremoteplayback"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.record-audio {
display: block;
}
</style>
<body>
<audio class="record-audio" controls controlslist="nodownload nofullscreen noremoteplayback">
<source src="./audio.mp3" type="audio/mpeg" />
</audio>
<audio class="record-audio" controls controlslist="nodownload nofullscreen noremoteplayback">
<source src="./audio.mp3" type="audio/mpeg" />
</audio>
<audio class="record-audio" controls controlslist="nodownload nofullscreen noremoteplayback">
<source src="./audio.mp3" type="audio/mpeg" />
</audio>
<audio class="record-audio" controls controlslist="nodownload nofullscreen noremoteplayback">
<source src="./audio.mp3" type="audio/mpeg" />
</audio>
<audio class="record-audio" controls controlslist="nodownload nofullscreen noremoteplayback">
<source src="./audio.mp3" type="audio/mpeg" />
</audio>
<audio class="record-audio" controls controlslist="nodownload nofullscreen noremoteplayback">
<source src="./audio.mp3" type="audio/mpeg" />
</audio>
<script type="text/javascript">
// 多个音频时播放一个
const audios = document.getElementsByTagName("audio");
// 暂停函数
function pauseAll() {
var self = this;
[].forEach.call(audios, function(i) {
// 将audios中其他的audio全部暂停
i !== self && i.pause()
})
}
// 给play事件绑定暂停函数
;
[].forEach.call(audios, function(i) {
i.addEventListener(‘play‘, pauseAll.bind(i))
})
</script>
</body>
</html>原文：https://www.cnblogs.com/zhtian/p/14931215.html