Playing an external sound clip on a loop.

Community Beginner ,
Feb 03, 2021

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.

Views

51

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Feb 03, 2021

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

 

 

image.png

 

I hope this helps.

 

Regards,

JC

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
dc257 AUTHOR
Community Beginner ,
Feb 03, 2021

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.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Feb 03, 2021

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

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
dc257 AUTHOR LATEST
Community Beginner ,
Feb 03, 2021

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.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more