zl程序教程

您现在的位置是:首页 >  其它

当前栏目

页面上多个audio只播放一个

一个 页面 多个 播放 Audio
2023-09-11 14:17:27 时间
// ts版-vue
private justPalyOne() {
    const audios = document.querySelectorAll("audio");
    // 暂停函数
    const pauseAll = (exclude: any): any => {
      audios.forEach((audio, index) => {
        if (exclude !== index) {
          audio.pause();
        }
      });
    };
    audios.forEach((audio, index) => {
      audio.addEventListener("play", ()=>{pauseAll(index)});
    });
}

 

// 普通js版
const justPalyOne = () => {
    const audios = document.querySelectorAll("audio");
    // 暂停函数
    const pauseAll = (exclude)=> {
      audios.forEach((audio, index) => {
        if (exclude !== index) {
          audio.pause();
        }
      });
    };
    audios.forEach((audio, index) => {
      audio.addEventListener("play", ()=>{pauseAll(index)});
    });
 }