Ionic 3 Cordova нажмите кнопку, чтобы остановить аудио

Question

Привет, ребята, у меня есть ситуация, когда есть вкладка и событие нажатия на элемент сетки.когда я вкладываю, он воспроизводит аудио 1, а когда я нажимаю, он воспроизводит аудио 2, теперь проблема заключается в том, что когда я вкладываю несколько вкладок или щелчок, звук начинается поверх притирки.Мне нужно остановить предыдущее аудио и воспроизвести его снова при нажатии или нажатии, поэтому я преодолеваю перекрытие аудио.

<ion-content >

      <ion-col  (tap)="p10_1()"  (press) = "p10_1l()">

  <ion-grid >
    <ion-row >
<div id  = "container">
      <div class = "sections" id = "sec1" >
        A 
      </div><!--
      --><div class = "sections" id = "sec2" >
        B 
      </div><!--
      --><div class = "sections" id = "sec3" >
        C  
      </div>

    </div>    

        </ion-row>

      </ion-grid>

это html выше

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'

})
export class HomePage {
     bleep: Audio;

    p10_1()
    {
         document.getElementById("sec1").style.color = "red";
         document.getElementById("sec2").style.color = "red";
         document.getElementById("sec3").style.color = "red"
         if (this.bleep) {
         this.bleep.stop().then(() => this.bleep = 
  this.play('./assets/sounds/q1p10_1.mp3', true));
        } else {
            this.bleep = this.play('./assets/sounds/q1p10_1.mp3', true);
        }           


    }

     p10_1l()
    {
        if (this.bleep) {
            this.bleep.stop().then(() => this.bleep =  
 this.play('./assets/sounds/q1p10_1l.mp3', false));
        } else {
            this.bleep = this.play('./assets/sounds/q1p10_1l.mp3', false);
        }       
    }

     play(x:string, black:boolean): Audio {
        let bleep = new Audio();
        bleep.src = x;
        bleep.play();
        return bleep;
     }

}

это .ts

спасибо в ожидании.

Answer 1

Вы должны добавить свой bleep var в качестве атрибута контроллера, чтобы вы могли остановить его перед повторным запуском.Я совместил ваш код в функции play ().Вы также можете использовать uniqueId param , но я не знаю его поведение.

    export class YourComponent  {

    bleep: Audio;

    p10_1()
    {
        document.getElementById("sec1").style.color = "red";
        document.getElementById("sec2").style.color = "red";
        document.getElementById("sec3").style.color = "red"
        if (this.bleep) {
            this.bleep.stop().then(() => this.bleep = this.play('./assets/sounds/q1p10_1.mp3', true));
        } else {
            this.bleep = this.play('./assets/sounds/q1p10_1.mp3', true);
        }           


    }

    p10_1l()
    {
        if (this.bleep) {
            this.bleep.stop().then(() => this.bleep = this.play('./assets/sounds/q1p10_1l.mp3', false));
        } else {
            this.bleep = this.play('./assets/sounds/q1p10_1.mp3', false);
        }       
    }

    play(x:string, black:boolean): Audio {
        let bleep = new Audio();
        bleep.src = x;
        bleep.play();
        if (black) {
            bleep.onended = function() {
                document.getElementById("sec1").style.color = "black";
                document.getElementById("sec2").style.color = "black";
                document.getElementById("sec3").style.color = "black";
            }
        }
        return bleep;
    }

}