I'm facing an issue with multiple buttons on a page, where each button plays audio when clicked or long pressed. The problem is that when one audio is playing and another button is clicked, the new audio overlaps with the previous one. How can I prevent this from happening?
Here is the HTML code:
<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>
Here is the TypeScript file (.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();
}
Thank you in advance.