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

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

1 个答案: