How to start and stop an audio file in jQuery?

Question

$("ul").on("click", ".start", function() {
    console.log("started");
    var timeInput = $(this).parent().children('.time');
    var timeInputValue = timeInput.val();
    var milliSeconds = Number(timeInputValue)*60*1000;
    console.log(milliSeconds);

    setTimeout(() => {
        audio.play();
        alert("Time Over");
        audio.pause();
        $(this).parent().children('.task').toggleClass("completed");
    }, milliSeconds);
})

<audio src="assets/audio/siren.mp3" id="audio"></audio>

I have no idea about this. I am kind of pulling app features out of the thin air and trying. So, obviously what I am doing is wrong because it doesn't work.

What I am trying to do is, make the setTimout function play an audio file. then would come an alert box, and after that a stop.

Please, help me with this.

Thank You

What you have should work - assuming that your `audio` variable is a reference to the ` — Rory McCrossan, Nov 22 '16 at 13:41
Please refer below link having step-by-step explanation. http://stackoverflow.com/questions/8489710/play-an-audio-file-using-jquery-when-a-button-is-clicked — , Nov 22 '16 at 13:41
@RoryMcCrossan yes. It worked. I don't how, but there is one problem. couldn't we stop the audio? instead of pausing it? — relentless-coder, Nov 22 '16 at 13:48
You can set the `volume` property to `0` if that's what you mean — Rory McCrossan, Nov 22 '16 at 13:48
@RoryMcCrossan for example, I have 30 seconds long audio. Suppose, the pause function is called at 25th second. Now, whenever the user would trigger the audio, it would start at 26th second and stop after 4 seconds. What I am looking for is, when the user triggers the audio again, it should start from the beginning. Or at least, the audio should keep looping instead of stopping at 30th second. — relentless-coder, Nov 22 '16 at 13:54
I have no idea what you're describing, however it's broad enough to warrant its own question. I'd suggest you delete this one as your problem was not re-producible. — Rory McCrossan, Nov 22 '16 at 14:05

score 1 · Answer 1 · answered Nov 22 '16 at 13:41

1

You never actually set audio to anything.

var audio = document.getElementById('audio');

audio.play();
alert('this is a blocking function, once closed the audio will stop');
audio.pause();

Also, you're setting your audio to play, alert, then stop all after the timeout. alert is a blocking function so the audio will play until you close the alert, making the timeout useless other than delaying the audio start by milliSeconds.

answered Nov 22 '16 at 13:41

bcr

3,791
18
28

Hi, yes, my code started working. However, is there to stop than to pause? – relentless-coder Nov 22 '16 at 13:48

score 0 · Answer 2 · answered Nov 22 '16 at 13:59

You do not need to use jquery to play a sound in javascript

Javascritpt

var audio = document.getElementById('audio');
//Play
audio.play();
//Pause
audio.pause();
//Stop
sound.pause();
sound.currentTime = 0;

If you want to detect the end of an audio, you can use the ended media event

audio.addEventListener("ended", function(){
    audio.pause();
    audio.currentTime = 0;
    $(this).parent().children('.task').toggleClass("completed");
    console.log("ended");
});

How to start and stop an audio file in jQuery?

2 Answers2