一个页面中有多个audio标签,播放其中一个时暂停其他,只允许一个audio播放

本文介绍了一种使用JavaScript来实现网页中多个音频文件播放控制的方法。通过监听播放事件并调用自定义函数,确保同一时间只有一个音频文件正在播放,从而避免了多个音频同时播放导致的声音混乱。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

var 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));
})

在Vue.js中,如果你有一个音频列表并且想要实现点击其中任何一个开始播放,同暂停其他正在播放的音频,你可以这样做: 首先,你需要为每个音频元素绑定一个唯一的标识符,并在一个全局变量或者数据对象里跟踪当前播放状态。例如,可以创建一个数组`audioList`存储音频对象和一个变量`currentAudioIndex`来表示当前播放的音频索引。 ```html <template> <div> <audio v-for="(audio, index) in audioList" :key="index" @click="play(index)"> <source :src="audio.src" type="audio/mpeg"> </audio> </div> </template> <script> export default { data() { return { audioList: [ { src: 'path/to/audio1.mp3', isPlaying: false }, { src: 'path/to/audio2.mp3', isPlaying: false }, // 添加更多音频... ], currentAudioIndex: null, }; }, methods: { play(index) { if (this.currentAudioIndex !== null && this.audioList[this.currentAudioIndex].isPlaying) { this.pause(this.currentAudioIndex); } this.currentAudioIndex = index; this.audioList[index].isPlaying = true; // 设置当前音频为播放状态 this.audioList[index].element.play(); // 开始播放 }, pause(index) { this.audioList[index].isPlaying = false; this.audioList[index].element.pause(); // 暂停音频 }, }, }; </script> ``` 在这个例子中,当点击一个音频,会先检查是否已有其他音频正在播放,如果有则暂停那个,然后将`currentAudioIndex`更新到新选中的音频并开始播放。如果当前没有正在播放的音频,直接播放
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值