Sound delay

Classic Plugins
1

Hello,
I have an integrated script on my website in RapidWeaver to be able to play a sound.

2

Does anyone have any idea how this could work?

Here is the website:

Thanks

3

Hi @aikonn,

You’re giving us little information to go on :slight_smile:

  1. What are you trying to do?
  2. When should it happen (on load, on a button click, something else?)
  3. Which script did you find and where did you put it? At quick glance, I don’t see any inserted script in your site’s source code.

Cheers,
Erwin

4

Thank you for your answer.
Oh! My original text has apparently disappeared.
So again:
I have an integrated script in a stack “Header pro”
The script allows me to play a sound as soon as the page is opened. It also works very well. But I would like to change the script so that the sound only starts 1-2 seconds after the page has been clicked on. what do I have to change in the script?
Here is the script:

5

the script always disappears here in the forum, I don’t know why. Here is a screenshot of the script:

Bildschirmfoto 2025-06-10 um 14.05.26
Bildschirmfoto 2025-06-10 um 14.05.261428×458 54.6 KB

Thank you

6

Hi @aikonn,

Hmmm, that’s a good one.

Even though you’ve used the script tag, you’re using the HTML5 autoplay feature. HTML5 doesn’t have a feature to delay things to be parsed - HTML5 just parses the lines as it sees them, and builds up the page. When it reaches your audio autoplay tag, the browser will load its built-in audio player, load in the file that you specify, and play it.

You could change the script into JavaScript, which will give you a number of options to delay execution of code by a set number of time (or even variable amounts of time if you need it). For example, running the audio playbak inside a delay function, such as setTimeout().

In order to do so, remove the code from Header Pro, and instead drag in an HTML stack (found in your Stacks library, as it comes with Stacks as standard).

Delete the example HTML that comes standard in the HTML stack, and replace it with the following:

<audio id="delayedAudio" preload="auto">
  <source src="%resource(sound.mp3)%" />
</audio>

<script>
  window.addEventListener("DOMContentLoaded", function () {
    setTimeout(function () {
      const audio = document.getElementById("delayedAudio");
      audio.play().catch(function(e) {
        console.warn("Autoplay failed:", e);
      });
    }, 2000);
  });
</script>

This code will load the file named “sound.mp3” located in Resources, but delays playback by 2 seconds. Change the “2000” to “1000” to make it 1 second.

There’s also a built in error message that will appear in the browser’s console should autoplay fail for some reason.

Cheers,
Erwin

7

Whow! That works. Thank you very much! Very nice.

Is it possible to hide the ‘music bar’?

8

I found out how to hide the music bar myself. I added:
div style=“visibility:hidden”
exactly at the beginning of the script.
Now everything is just the way I wanted it. Thank you!

1 Like
9

Good to hear @aikonn!

Cheers,
Erwin