一个页面多个audio播放时控制之播放一个
audio 是H5的新标签
常用的属性有
- src 资源
- autoplay 自动播放
- controls 显示默认控件
- loop 循环播放
- muted 静音
- preload 规定当网页加载时，音频是否默认被加载以及如何被加载。
- auto
metadata
none
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>
