# Continuous AUDIO over scenes

**URL:** <https://talk.atomisystems.com/t/continuous-audio-over-scenes/506>\
**Category:** Support Questions\
**Created:** [January 9, 2018, 8:29am UTC](https://talk.atomisystems.com/t/continuous-audio-over-scenes/506 "2018-01-09T08:29:36Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![steffeno](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/s/838e76/32.png) [@steffeno](https://talk.atomisystems.com/u/steffeno)\
**Post date:** [January 9, 2018, 8:29am UTC](https://talk.atomisystems.com/t/continuous-audio-over-scenes/506/1 "2018-01-09T08:29:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ToanLS](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/t/46a35a/32.png) [@ToanLS](https://talk.atomisystems.com/u/ToanLS)\
**Post date:** [January 9, 2018, 10:18am UTC](https://talk.atomisystems.com/t/continuous-audio-over-scenes/506/2 "2018-01-09T10:18:37Z")

</div>

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):

```auto
	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.

---

<div class="post-metadata">

**Author:** ![GioChrono](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/giochrono/32/3035_2.png) [@GioChrono](https://talk.atomisystems.com/u/GioChrono)\
**Post date:** [June 12, 2018, 7:28pm UTC](https://talk.atomisystems.com/t/continuous-audio-over-scenes/506/3 "2018-06-12T19:28:11Z")

</div>

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

Cheers

---

<div class="post-metadata">

**Author:** ![ToanLS](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/t/46a35a/32.png) [@ToanLS](https://talk.atomisystems.com/u/ToanLS)\
**Post date:** [June 13, 2018, 1:42am UTC](https://talk.atomisystems.com/t/continuous-audio-over-scenes/506/4 "2018-06-13T01:42:10Z")

</div>

Hi,

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

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

```

Regards

---

<div class="post-metadata">

**Author:** ![Shawn](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/s/f6c823/32.png) [@Shawn](https://talk.atomisystems.com/u/Shawn)\
**Post date:** [June 11, 2019, 12:13am UTC](https://talk.atomisystems.com/t/continuous-audio-over-scenes/506/5 "2019-06-11T00:13:58Z")

</div>

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

Thanks!

---

<div class="post-metadata">

**Author:** ![ToanLS](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/t/46a35a/32.png) [@ToanLS](https://talk.atomisystems.com/u/ToanLS)\
**Post date:** [June 11, 2019, 4:01am UTC](https://talk.atomisystems.com/t/continuous-audio-over-scenes/506/6 "2019-06-11T04:01:01Z")

</div>

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:

```javascript
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

---

<div class="post-metadata">

**Author:** ![Shawn](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/s/f6c823/32.png) [@Shawn](https://talk.atomisystems.com/u/Shawn)\
**Post date:** [July 11, 2019, 1:37am UTC](https://talk.atomisystems.com/t/continuous-audio-over-scenes/506/7 "2019-07-11T01:37:54Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![mackavi](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/mackavi/32/353_2.png) [@mackavi](https://talk.atomisystems.com/u/mackavi)\
**Post date:** [July 11, 2019, 7:25am UTC](https://talk.atomisystems.com/t/continuous-audio-over-scenes/506/8 "2019-07-11T07:25:02Z")

</div>

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](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](https://talk.atomisystems.com/t/objects-button-across-scenes/2145/3)

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.

---

<div class="post-metadata">

**Author:** ![MrCat](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/m/bb73d2/32.png) [@MrCat](https://talk.atomisystems.com/u/MrCat)\
**Post date:** [August 19, 2020, 1:30pm UTC](https://talk.atomisystems.com/t/continuous-audio-over-scenes/506/9 "2020-08-19T13:30:40Z")

</div>

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

```auto
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?

---

<div class="post-metadata">

**Author:** ![mackavi](https://talk.atomisystems.com/user_avatar/talk.atomisystems.com/mackavi/32/353_2.png) [@mackavi](https://talk.atomisystems.com/u/mackavi)\
**Post date:** [August 19, 2020, 6:51pm UTC](https://talk.atomisystems.com/t/continuous-audio-over-scenes/506/10 "2020-08-19T18:51:25Z")

</div>

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](https://talk.atomisystems.com/uploads/default/original/2X/a/af85eb52a505fb5b378dfca2ab67948a5cfe5d58.png)

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

 ![image](https://talk.atomisystems.com/uploads/default/original/2X/8/838d6c0928e2bccd758328f9c95b28c8bb40b92d.png)

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

![image](https://talk.atomisystems.com/uploads/default/original/2X/4/431e7658cc7dd8b966af52ecf83800145dcafc16.png)

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

 ![image](https://talk.atomisystems.com/uploads/default/original/2X/3/3acc90a15fc4d208cf679f1ece8151333f3dae3a.png)

---

<div class="post-metadata">

**Author:** ![MrCat](https://talk.atomisystems.com/letter_avatar_proxy/v4/letter/m/bb73d2/32.png) [@MrCat](https://talk.atomisystems.com/u/MrCat)\
**Post date:** [August 20, 2020, 3:09pm UTC](https://talk.atomisystems.com/t/continuous-audio-over-scenes/506/11 "2020-08-20T15:09:08Z")

</div>

Ahhhh fantastic! Thanks so much, never thought of that 🙂