Play audio on page load

Ask the community
,
1

I would like to know if there is a possibility that when loading the page the audio that exists on the page will play, without the user interacting with the page, I want to do this if the URL ends with “#autoplay”.I want to do this function to give more accessibility to users, but when I did the function there is an error in the console, where it says the user needs to interact with the document in order to work

Look at the code below:

import paginaLocation from 'wix-location-frontend';

function autoPlay(id) {
    let url = paginaLocation.url;
    if (url.endsWith("#autoplay")) {
        id = $w("#audioPlayer1");
        setTimeout(() => {
            id.play();
        }, 1000);
    }
}

$w.onReady(function () {
    autoPlay()
});

Error photo:

image
image1858×77 10.1 KB

1 Like
2

most browsers now block auto play of sound, so I dont think any code will help with that.

1 Like
3

Its not only about SOUND!

All interactions, which requesting for USER DATA-INPUT, have to be applied, for example…

-audio
-mic
-camera

  • and so on…

To solve your problem is to generate a preventing USER-ALLOWENCE on the very beginning on your site for example asking the USER for allowance to activate such functions, before he starts to browse your site (for example directly after LOGIN).

But this will have pros and cons → not everybody will give that allowens.
So you will have to explain in detail, what for your site needs allowens.

Once the user accepts → parts of mentioned elements will be activated.
Now user continue to surf on your site until landing on the page where you need the allowens → the rest is selfexplainable.

Just an idea.

1 Like
4

Hi there! This is my first time here. I just used this code, and it worked perfectly.

The code plays an elevator sound when the page loads…

$w(“#audioPlayer1”).play()
.then(() => {
console.log(“Audio started playing”);
});

$w(“#audioPlayer1”).onProgress((event) => {
let targetId = event.target.id;
console.log(“Audio is progressing on:”, targetId);
});

$w(“#audioPlayer1”).onEnded(() => {
console.log(“Audio has finished playing”);
});