CODEWITHSUNDEEP
javascripthtmlcanvasaudio
scrblnrd3
scrblnrd3

Reputation: 7416

Play a JavaScript sound file without a delay

I have a HTML5 canvas game with sounds, but one of the problems that I am running into is that when the sound is played, all other action stops until the sound has finished playing. I used this code

document.getElementById("music").innerHTML="<embed src=\""+surl+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />"


Where surl is the url of the sound and music of the span element that is playing the music. Does anyone know how to play a sound without delaying the entire program?


I tried it with a considerably larger file, and it turns out that while it DOES play in the background, there is still a considerable delay between starting the sound and continuing the game.

Upvotes: 7

Views: 15682

Answers (5)

VJAI
VJAI

Reputation: 32768

Web Audio API is right tool for this job. There are plenty of libraries available that simplifies using the little complex API. You can also checkout musquito a tiny library created by me that manages the complexity in Web Audio API and helps to create and manage single or group of sounds.

Upvotes: 0

Daiz
Daiz

Reputation: 338

You are relying on whatever external plugin the user might have to play the audio by using embed, so the performance might vary wildly from user to user.

My recommendation would be to use a library like howler.js, which was built with games in mind. HTML5 audio can be quite the pain to get right, especially for games, so you're going to save yourself from a lot of headache by using a library instead of trying to fiddle with HTML5 audio elements yourself.

Upvotes: 2

Luke Channings
Luke Channings

Reputation: 1083

Try using the native HTML5 Audio API. First, create the instances of the sounds you will need:

var ping = new Audio("ping.ogg");

Note: You do not need to insert these audio instances into the DOM at any point.

When you're ready to play the sound, e.g. when someone clicks:

document.querySelector(".ping").addEventListener("click", function() {

    // ping clicked, play ping sound:
    ping.play()
})

Because the ping instance is pre-loaded there should be no delay in playing the sound, and you can play it as many times as you like.

Keep in mind that codec support is not consistent cross-browser, so you will have to have an ogg source and an MP3 source, or another combination (support tables can be found here http://en.wikipedia.org/wiki/HTML5_Audio#.3CAudio.3E_element_format_support).

If you want a more backwards-compatible approach I recommend SoundManager2 as a complete solution with an easy API: http://www.schillmania.com/projects/soundmanager2/

Otherwise, the documentation for the native HTML5 Audio API can be found here: https://developer.mozilla.org/en-US/docs/HTML/Element/audio and here https://developer.mozilla.org/en-US/docs/DOM/HTMLAudioElement

Upvotes: 9

scrblnrd3
scrblnrd3

Reputation: 7416

I did a bit of digging around on some other stackoverflow posts, and I found that in HTML5, you can just do 

var sound=new Audio("hello.wav");

and then call

sound.play();

That seems to do the trick, and there is no delay.

Upvotes: -1

lmortenson
lmortenson

Reputation: 1605

I've had good success using this framework: http://www.schillmania.com/projects/soundmanager2/

It has decent cross browser support, and you can preload/start/stop sounds with JavaScript. I've used it with sounds playing while animations are occurring and didn't see any delay. You can also have it wait for all your sound assets to be loaded before doing something, and in the meantime show a loading screen or something.

Upvotes: 1

Related Questions