Sounds are not being Played

Question

I have a HTML page in which I have six buttons . Each button has an onClick event handler and onClick a sound will be played. Sounds are in mp3 format. Now when I click on any button,sound will be played but if I click on another button when the first sound is being played, then the first sound stops playing.After this,if I click on any button sound will not be played.

I am not able to understand the problem.Thank you for the help.

Here is my code.

<div
    style='display: block; background-image: url(./images/backgroundImage.jpg);' >

    <button class="stage1" id="button_1" style="width: 280px;height: 130px; margin-top: 40px;margin-left: 40px; background: transparent;  "onclick="audio('a')" ></button>
    <button class="stage1" id="button_2" style="width: 280px;height: 340px; margin-top: 20px;margin-left:960px;background: transparent; "onclick="audio('ab')"></button>

    <button class="stage1"  id="button_3" style="width: 220px;height: 250px; margin-top: 390px;margin-left: 40px;background: transparent; "onclick="audio('abc')"></button>
    <button class="stage1"  id="button_4" style="width: 220px;height: 250px; margin-top: 390px;margin-left: 300px;background: transparent; "onclick="audio('abcd')"></button>
    <button class="stage1"    id="button_5" style="width: 220px;height: 250px; margin-top: 390px;margin-left:560px;background: transparent; "onclick="audio('abcde')"></button>
    <button class="stage1"  id="button_6" style="width: 400px;height: 250px; margin-top: 390px;margin-left:840px;background: transparent; "onclick="audio('abcdef')"></button>
</div>

In Javascript:

function audio(audio_name) {
    audioElement.setAttribute('src', 'audio/' + audio_name + '.mp3');
    audioElement.play();
}

I am confused with your question now.Should the same button play and pause the audio? Can you please explain properly? — Harsha Venkataramu, Jun 03 '13 at 05:51
@User42490 : But you mentioned about `pause` in your previous comment which you just removed! — Harsha Venkataramu, Jun 03 '13 at 05:56
Actuall on all these button i have onclick function which will play a sound on click. Now when i click on button_1 it will play a sound with name "a" and when i click on buton_2 it will play a sound with name "ab". all the sounds are in my audion folder with name a.mp3,ab.mp3,abc.mp3,abcd.mp3,abcde.mp3,abcdef.mp3. Now i have sound a.mp3 with small duration but i have sound ab.mp3 with little bit large duration. Now when i click on sound ab.mp3means on button_2 it will play a sound. — User42590, Jun 03 '13 at 06:01
Now sound is playing and i click on sound a.mp3 means button_1 then now this sound will not be played because the lengthy sound was interpted — User42590, Jun 03 '13 at 06:02

score 2 · Answer 1 · edited May 23 '17 at 12:18

2

Referring to this SO question - although it uses jQuery - you need to pause and load before you play the new song.

function audio( audio_name ) {
    audioElement.setAttribute('src', 'audio/' + audio_name + '.mp3');
    audioElement.pause();
    audioElement.load(); // This is probably the important part.
    audioElement.play();
}

edited May 23 '17 at 12:18

Community

1
1

answered Jun 03 '13 at 05:17

Kiruse

1,703
1
12
23

i have tried your suggestion but its not working in my problem – User42590 Jun 03 '13 at 06:03

score 1 · Answer 2 · answered Jun 03 '13 at 05:27

1

Can you please try this?

function audio(audio_name) {
    var audioElement = document.createElement('audio');        
    audioElement.setAttribute('src', 'audio/' + audio_name + '.mp3');
    audioElement.play();

}

answered Jun 03 '13 at 05:27

Harsha Venkataramu

2,887
1
34
58

if i create audioElement in audio funtion then previous sound will not pause on new sound. So how to get rid of this. And if create audioElement outside of this function then problem describe in question will be arise – User42590 Jun 03 '13 at 05:43

score 1 · Accepted Answer · answered Jun 03 '13 at 09:19

simply did this and its working. What i was looking for was exactly that

var audioElement = document.createElement('audio');

function audio(audio_name) {
Disable();
audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'audio/' + audio_name + '.ogg');
audioElement.load();
audioElement.play();

}
function Disable() {

audioElement.pause();

}

Sounds are not being Played

3 Answers3