重叠时的 Ionic 3 音频处理

Question

我有一种情况，我在页面上有多个按钮，并且单击时每个按钮都有音频。当我单击一个按钮时，它会播放音频，而当我单击其他按钮时，音频会重叠。单击其他按钮时，我需要停止第一个音频。

这里是代码

<div class= "sections" style="width: 18%;" (tap)="wajid1()"  (press) = "wajidlong1()">
      <div class = "sections" id = "sec1b" >
       ﻊَ  
      </div><!--
      --><div class = "sections" id = "sec2b" >
         ﻤَ  
      </div><!--
      --><div class = "sections" id = "sec3b" >
           ﺟَ  
      </div>

    </div> 

这是我的 .ts 代码

wajid1()
   {
   document.getElementById("sec1b").style.color = "red";
   document.getElementById("sec2b").style.color = "red";
   document.getElementById("sec3b").style.color = "red"
   var bleep = new Audio();
   bleep.src = './assets/sounds/p10_2.mp3';
   bleep.play();
   bleep.onended = function() {
   document.getElementById("sec1b").style.color = "black";
   document.getElementById("sec2b").style.color = "black";
   document.getElementById("sec3b").style.color = "black";
  }

 }

在期待中帮助我实现这一目标。

Answer 1

您可以使用以下代码 sn-p。在全局声明 Audio() 并为 Audio 对象使用 pause() 方法和 currentTime

export class HomePage {
    bleep = new Audio();
    wajid1()
    {
        this.bleep.pause();
        this.bleep.currentTime = 0;
        document.getElementById("sec1b").style.color = "red";
        document.getElementById("sec2b").style.color = "red";
        document.getElementById("sec3b").style.color = "red"

        this.bleep.src = './assets/sounds/p10_2.mp3';
        this.bleep.play();
        this.bleep.onended = function() {
            document.getElementById("sec1b").style.color = "black";
            document.getElementById("sec2b").style.color = "black";
            document.getElementById("sec3b").style.color = "black";
        }
    }
}