javascript - Stop audio after X seconds in js - Stack Overflow

admin管理员组

文章数量:1401431

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

Share Improve this question Follow edited Mar 31, 2014 at 16:16 Suman Bogati 6,35122 gold badges2424 silver badges3636 bronze badges asked Mar 31, 2014 at 16:13 user3414480user3414480 11511 gold badge22 silver badges77 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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();

本文标签： javascriptStop audio after X seconds in jsStack Overflow