使用同一个音频对象时多次播放 JavaScript 音频答案

【问题标题】：JavaScript audio playing multiple times whilst using same audio object使用同一个音频对象时多次播放 JavaScript 音频
【发布时间】：2019-08-07 14:19:00
【问题描述】：

我有一个播放 JavaScript 音频的函数，如下所示：

  playSound(sub) {
    console.log(sub);
    if (sub.audio.paused) {
      sub.audio.ontimeupdate = function (i) {
        if ((this.currentTime / this.duration) > 0.9) {
          this.currentTime = 0;
          this.play();
        }
      };
      sub.audio.play();
    } else {
      sub.audio.pause();
      sub.audio.currentTime = 0;
    }
  }

我在我的 HTML 中这样调用这个函数：

(click)="playSound(sub)"

一切都很好并且工作得很好，直到我以编程方式尝试播放音频，我在 if 语句的另一个函数中调用 playSound() 函数。音频播放成功，但每当我尝试使用上述（点击）函数调用 HTML 中完全相同的函数（据我所知）参数中给出的完全相同的音频对象时，声音会播放双倍？

这是缓存问题吗？还是一个 Angular 问题，它会复制原始文件以便音频实例播放多次？

我也尝试过 HowlerJS，这给了我完全相同的问题，Howler 在玩游戏时似乎制作了不同的 ID。

这是调用 playSound 函数的地方

  setSleepyset() {
    this.muteAll();
    for (let i = 0; i < this.items.length; i++) {
      for (let x = 0; x < this.items[i].subitems.length; x++) {
        if (localStorage.getItem(this.items[i].subitems[x].audio.src) !== null) {
          this.playSound(this.items[i].subitems[x]);
        } else {
          this.items[i].subitems[x].audio.pause();
          this.items[i].subitems[x].audio.currentTime = 0;
        }
      }
    }
  }

这是制作 HTML 音频对象的地方：

items = [
    {
      category: "Weather",
      expanded: true,
      subitems: [
        {
          name: "Rain",
          background: "../assets/backgrounds/rain.jpg",
          sound: "../assets/sounds/rain.ogg",
          audio: new Audio('../assets/sounds/rain.ogg'),
          icon: "../assets/icons/rain.png",
          playing: false
        },
        {
          name: "Thunder",
          background: "../assets/backgrounds/thunder.jpg",
          sound: "../assets/sounds/thunder.ogg",
          audio: new Audio('../assets/sounds/thunder.ogg'),
          icon: "../assets/icons/thunder.png",
          playing: false
        },
        {
          name: "Wind",
          background: "../assets/backgrounds/wind.jpg",
          sound: "../assets/sounds/wind.ogg",
          audio: new Audio('../assets/sounds/wind.ogg'),
          icon: "../assets/icons/wind.png",
          playing: false
        }
      ]
    }
]

目标是同时播放多个声音并同时加载它们，全局音频变量不是解决方案，除非我可以在同一个变量中播放/暂停多个音频源。

【问题讨论】：

标签： javascript angular typescript ionic-framework html5-audio

【解决方案1】：

已修复！

原来我从另一个实例调用了该函数，我使用了一个提供程序，它创建了一个 Home 类的新实例，每次从侧面菜单调用 playSound 时都会创建一个新的音频对象。

【讨论】：