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.
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;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.