Copy link to clipboard
Copied
Hi, sorry if this is an obvious thing, but I can't seem to find the answer.
I've made a simple HTML5 game and want to use a sound clip on a loop to give an ambient background noise. The method I've been using to play sounds is:
var ambience = new Audio('jungleSounds.aac');
ambience.play();
It works fine for one-off sound effects triggered but button clicks etc, but how would I loop a sound like this so that it plays continuously?
Thanks.
Copy link to clipboard
Copied
Hi.
It's better to use SoundJS, which is part of the CreateJS suit of libraries, to play and handle sounds. These libraries are integrated by default in HTML5 Canvas documents.
If, for example, you want to play a sound in the Library with a linkage of Noise and set it to loop indefinitely, pass a PlayPropsConfig object as an argument to the static play method and set the loop property to -1. The code could be something like this:
var noise = createjs.Sound.play("Noise", { loop: -1 }); // "Noise" is the symbol's linkage name in the Library
I hope this helps.
Regards,
JC
Copy link to clipboard
Copied
That is great, thank you. Would this method also work with an external sound file from a folder rather than the library?
My .aac files will not import into the library - I'm not sure if this is because that file format is unsupported by Animate, or if it is a result of the way they have been exported from Audition.
Copy link to clipboard
Copied
To handle external sounds, you're gonna need extra steps like in the example below:
https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/fade_sound_on_toggle
But, if possible, try converting your sounds to MP3. It will be much easier to work with, IMO.
Regards,
JC
Copy link to clipboard
Copied
Thank you for that. I will have a look through and also read the CreateJS / SoundJS documentation and play with some examples.
Incidentally, I also managed to get my loop to work by using the following:
var loop = new Audio('jungle.aac');
loop.addEventListener('ended', function() {
this.currentTime = 0;
this.play();
}, false);
I am guessing that using CreateJS is preferable as it has better cross-browser compatibility?
I also noticed that using either method, there is an annoying small delay in the sound loop which is not a result of the sound file having space at the beginning or end. After trying several workarounds, I found that I could eliminate this tiny gap by using two instances of the same audio clip and using 'setTimeout' with a value of the length of the clip to play each concurrently.