Обработка звука 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

Вы можете использовать приведенный ниже фрагмент кода. Объявите Audio () в глобальном и используйте pause () method и 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";
        }
    }
}