Ionic 3 cordova 类型脚本按钮单击以停止音频

Question

我有一种情况，我在页面上有多个按钮，每个按钮在单击或长按时都会播放音频。在播放音频时，其他按钮单击了先前的音频仍在播放并与新单击的音频重叠。如何防止这种情况

这里是.html代码

<ion-grid style = "width: 80%;"  >
<div>
<ion-row  >

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

      <div id  = "container" >
      <div class = "sections" id = "w1pl1" >
       ـرَ  
      </div><!--
     --><div class = "sections" id = "w1l2" >
         مَـ  
      </div><!--
      --><div class = "sections" id = "w1l3" >
           اَ  
      </div>

</div>    

 <div id  = "container" (click)="p10_2()" (press)= "p10_2l()">
            <div class = "sections" id = "w2l1" >
              نَ  
      </div>
      <div class = "sections" id = "w2l2" >
           ذِ  
      </div>
      <div class = "sections" id = "w2l3" >
           اَ  
      </div>

    </div>    

这里是 .ts

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


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

})
 export class HomePage {

  constructor(public navCtrl: NavController) {

  }


  p10_1()
  {

      var bleep = new Audio();
      bleep.src = './assets/sounds/q1p10_1.mp3';
      bleep.play();

      }

   p10_1l()
  {
      var bleep = new Audio();
      bleep.src = './assets/sounds/q1p10_1l.mp3';
      bleep.play();

      }





  p10_2()
  {
      var bleep = new Audio();
      bleep.src = './assets/sounds/q1p10_2.mp3';
      bleep.play();
      }

   p10_2l()
  {
      var bleep = new Audio();
      bleep.src = './assets/sounds/q1p10_2l.mp3';
      bleep.play();
      }

感谢期待。

Answer 1

在 bleep.src 之前添加 bleep.stop();

p10_1()
  {
      var bleep = new Audio();
      bleep.stop();
      bleep.src = './assets/sounds/q1p10_1.mp3';
      bleep.play();
      }