Continuous AUDIO over scenes

Saola Animate Support Questions
1

Hi, I can’t seem to figure out how to play the SAME AUDIO (1 audio) over multiple scenes.
How do we do that?

Thanks,
Steffen

2

Hi,

Current version of Saola Animate doesn’t support it directly from the UI. We’ll consider implement it in future releases.
In the mean time, please take the following steps to play an audio over multiple scenes:

  1. Import the audio file (e.g. song.mp3) into Resource pane.
  2. Play the audio by using JavaScript code below (you can add this script to any event to execute it):
	if (!doc.myAudio) {
	    // replace song.mp3 by the audio resource name
	    doc.myAudio = new Audio('resources/song.mp3');
	}
	doc.myAudio.loop = true; // remove this line if don't want to loop
	doc.myAudio.play();

Please note that this method only works when exporting to HTML5, doesn’t work when preview (because the url to the resource is differerent).

Regards.

3

How can I use the same function to later stop the track playing?

Cheers

4

Hi,

To stop the track playing, please use the following code:

if (doc.myAudio)
  doc.myAudio.pause();

Regards

1 Like
5

What function can we use to fade out over 3 seconds rather than end abruptly?

Thanks!

6

Hi Shawn,

You can use Volume animation to fade out the audio.
However, this audio element is created by coding, so fade out also requires coding:

function fadeOutAudio(audio, duration /* in ms */) {
  var initialVolume = audio.volume || 1;
  var startTime = Date.now();
  function fadeOut() {
    var elapsed = Date.now() - startTime;
    if (elapsed >= duration) { // complete animation
      audio.volume = 0;
      return;
    }
    audio.volume = initialVolume * (1 - elapsed / duration);
    animationId = requestAnimationFrame(fadeOut);
  }
  var animationId = requestAnimationFrame(fadeOut);
}

To fade out your audio 3 seconds: fadeOutAudio(doc.myAudio, 3000);

Regards

7

2 Related questions:

  • How would you play a playlist instead of a single track?
  • How can we control the back, pause and next functions of A) a Single track and B) a playlist with our own buttons?

Thanks!

8

If you want to do this in JS, then there are lots of existing libraries for it - just google JavaScript Jukebox.

The whole reference for creating your own is here: https://www.w3schools.com/tags/ref_av_dom.asp

But you may want to look at Taonis’ answer to your previous question - Objects / Button across Scenes

You could create a jukebox as a symbol with the audio tracks on timelines and use this method to add it to all pages for continuous audio.

9

Excuse my ignorance, but I’m not great with JS…
Where would I paste the code

if (!doc.myAudio) {
	    // replace song.mp3 by the audio resource name
	    doc.myAudio = new Audio('resources/song.mp3');
	}
	doc.myAudio.loop = true; // remove this line if don't want to loop
	doc.myAudio.play();

Would it for example be in the HTML file, or one of the JS files once I’ve exported to HTML?
Could you give me an example?

10

You probably want to add it to the first scene that needs the music to start.

With the scene selected, in the scene panel click the event handlers button:
image

In the window that pops-up, click Scene Activate > Other Actions > Run JavaScript

image
image792×594 17.2 KB

When the action is added, click the Params selection and choose Add Function:

image

When the Script Editor window loads, paste the code between the lines:

image
image953×618 17.7 KB

2 Likes
11

Ahhhh fantastic! Thanks so much, never thought of that :slight_smile: