• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Playing an external sound clip on a loop.

Explorer ,
Feb 03, 2021 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

165

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 03, 2021 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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 03, 2021 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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Feb 03, 2021 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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 03, 2021 Feb 03, 2021

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

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