I do a little car game in 3D. For example, I want when the player, press up to speed, he has the sound start at first and after speed. But the start only one time and speed in a loop. My HTML:

<audio preload="auto" id="start"><source src="sounds/start.mp3" type="audio/mp3"></audio>
<audio preload="auto" id="speed"><source src="sounds/speed.mp3" type="audio/mp3"></audio>

I have tried this thing in JS, but did not work:

document.getElementById('start').play();
setTimeout(document.getElementById('speed').play(),2000);
setTimeout(document.getElementById('start').pause(),2000);

How can I do ? Thanks

I do a little car game in 3D. For example, I want when the player, press up to speed, he has the sound start at first and after speed. But the start only one time and speed in a loop. My HTML:

<audio preload="auto" id="start"><source src="sounds/start.mp3" type="audio/mp3"></audio>
<audio preload="auto" id="speed"><source src="sounds/speed.mp3" type="audio/mp3"></audio>

I have tried this thing in JS, but did not work:

document.getElementById('start').play();
setTimeout(document.getElementById('speed').play(),2000);
setTimeout(document.getElementById('start').pause(),2000);

How can I do ? Thanks

• javascript
• audio

• this document.getElementById('speed').play() will invoked immediately, will not wait for 2 seconds. – Suman Bogati Commented Mar 31, 2014 at 16:17
• Yes, but how to do for, play start, when finish, play speed in loop? – user3414480 Commented Mar 31, 2014 at 16:18

2 Answers 2

You need to wrap your calls in an anonymous function so that they aren't immediately invoked, for example:

var player = document.getElementById('player');
setTimeout(function(){
    player.play();

    setTimeout(function(){
        player.pause();
        player.currentTime = 0;
    }, 2000);
}, 1000);

Fiddle: http://jsfiddle/fyfRd/

To stop the file, you need to pause and reset the currentTime to 0

Due to the play() function being asynchronous, I wanted to ensure that the time is truely X seconds after the start of the track playing, so I put it in an onplaying callback like this:

let audio_start = document.getElementById('start');
audio_start.loop = false;
audio_start.currentTime = 0;
audio_start.onplaying = function() {
    setTimeout(function() {
        audio_start.pause();
        let audio_speed = document.getElementById('speed');
        audio_speed.loop = true;
        audio_speed.currentTime = 0;
        audio_speed.play();
    }, 1000);
};
audio_start.play();

Assuming your start audio clip doesn't have white noise before or after it, you can also use the onended event to listen for when the start noise audio is pleted to then start the speed noise. That way, you don't have to try and calculate the timing yourself.

let audio_start = document.getElementById('start');
audio_start.loop = false;
audio_start.currentTime = 0;
audio_start.onended = function() {
    let audio_speed = document.getElementById('speed');
    audio_speed.loop = true;
    audio_speed.currentTime = 0;
    audio_speed.play();
};
audio_start.play();