Ionic 3 Cordova按鈕單擊以停止音頻

Question

嗨，我有一個情況，在網格項目上有選項卡和新聞事件。 當我按Tab播放音頻1時，當我按它播放音頻2時，問題是當我多個選項卡或單擊音頻開始重疊時。 我需要停止上一個音頻並在按Tab或按下時再次播放，因此我克服了音頻重疊的問題。

<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參數，但是我不知道它的行為。

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

}