时间戳

首页 > 解决方案 > Ionic 3 cordova 按钮单击以停止音频

html - Ionic 3 cordova 按钮单击以停止音频

问题描述

嘿伙计们，我有一种情况，即网格项目上有选项卡和按下事件。当我标签时它播放音频 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

期待中的感谢。

标签： htmlcordovatypescriptionic-frameworkionic3

解决方案

您应该将 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;
    }

}

推荐阅读