Ionic 3 Cordova按钮单击以停止音频

Question

Hey guys i have a situation that there is tab and press event on a grid item. when i tab it plays an audio 1 and when i press it plays an audio 2 now the problem is when i multiple tab or click audio starts over lapping. i need to stop previous audio and play it again when tab or pressed therefore i overcome overlapping of audios.

<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>

this is html above

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;
     }

}

this is .ts

thanks in anticipation.

Answer 1

You should add your bleep var as controller attribute, so you can stop it before relaunching. I have mutualized your code in play() function. You may also use the uniqueId param but I don't know its behaviour.

    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;
    }

}