Home > Technical & Creative Skills > Programming, Servers & Scripts

Autoplay audio not working properly (11)

05-07-2021 03:28 AM #1 anhka1990 (Member)
Autoplay audio not working properly

Hi! I've searched the forums but couldn't find an answer.

I'm using a autoplay audio script on my lander but the problem is that it only runs when the visitor interact with the lander (that means it doesn't play, only plays when user clicks on something).
But the best thing would be it to autoplay when the page loads!

This is the script:

Code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.0.0/howler.core.min.js"></script><script>
var sound = new Howl({
src: ['a.mp3'],
autoplay: true,
volume: 1
});
</script>

Does anyone can help me find what I'm doing wrong? Thank you!

@caurmen (probably!) @vortex (there were some old threads of you explaining how to do it, but those codes are not working for me) @jaybot (you said in an old thread that you use audio on some landers)

05-07-2021 09:44 AM #2 matuloo (Legendary Moderator)

Let me tag @jeremie our tech wizard, he might know how to help

05-07-2021 10:22 AM #3 jeremie (Moderator)

I don't know what browser you are using, but 2 years ago, Chrome has blocked autoplay until user interacts with the page.

https://developers.google.com/web/up...policy-changes

05-07-2021 12:03 PM #4 vortex (Senior Moderator)

Originally Posted by jeremie

I don't know what browser you are using, but 2 years ago, Chrome has blocked autoplay until user interacts with the page.

https://developers.google.com/web/up...policy-changes

There may be ways to "get around" this - I haven't tried any of them so have no idea if any of them would work. For example:

https://stackoverflow.com/questions/...play-on-chrome

Note: Beware that what you're doing isn't against the advertising policy of the ad networks you're running campaigns on, e.g. some networks don't allow iframes.

Another thought: If you have a lander where the user needs to interact with the page - for example click on an answer on a survey lander or click on a spinning wheel to start the spin - you may be able to start sound with the user click? @jeremie would it be possible?

Amy

05-07-2021 03:22 PM #5 iwanttofly (Veteran Member)

Originally Posted by jeremie

I don't know what browser you are using, but 2 years ago, Chrome has blocked autoplay until user interacts with the page.

https://developers.google.com/web/up...policy-changes

I noticed this behavior with Back Button Redirect scripts as well. It is probably fairly broad to prevent pages from hijacking the user's browser or behavior that users consider more annoying.
@anhka1990
Food for thought, does autoplay actually help? I added an Exit Intent Pop-up to my current landers and so far, not one single person has clicked on the exit intent. Perhaps focus on getting people interested in starting the video versus using autoplay?

05-07-2021 04:24 PM #6 jeremie (Moderator)

Originally Posted by vortex

There may be ways to "get around" this - I haven't tried any of them so have no idea if any of them would work. For example:
https://stackoverflow.com/questions/...play-on-chrome

I have just tested 3 methods on this page. They won't work before the user interact with the page. Look at the comments below each solution.
I think they cracked almost all the most simple by-pass methods using <audio>. I tried starting a muted <video> and umute it later, as Google says that muted videos can autoplay. Yet, when I try to unmute them after 500ms, browser block it.

I don't have much time at the moment. If some of you want to explore possible solutions, you can try loading your MP3 in a new AudioContext(), which might work, especially if created dynamically in JS after the DOM is loaded.

Originally Posted by vortex

you may be able to start sound with the user click? @jeremie would it be possible?

Yes, as soon as the user has interacted with the page, you can do what you want. For example casino-style win sounds to make the user warm and fuzzy. Or a nice NSFW sound for guys watching your adult landings at work

Originally Posted by iwanttofly

I noticed this behavior with Back Button Redirect scripts as well.

Yes, same concept. Just throw a classic JS alert(). User will be forced to click on it. Then you can immediately change the Back Button Redirect.

05-07-2021 05:10 PM #7 jaybot (Veteran Member)

I don't think my browsers are outdated, but I swear I have some spinners that still announce congratulations with some shitty text-to-speech even if they are in the background.

That's not exactly playing an audio file, but it's something worth looking at.

05-07-2021 05:49 PM #8 jaybot (Veteran Member)

Originally Posted by iwanttofly

Food for thought, does autoplay actually help? Perhaps focus on getting people interested in starting the video versus using autoplay?

Pretty sure it's for pops/push in which case, you must use every dirty trick in the book to get the user's attention. Interrupt marketing is the name of the game.

05-07-2021 07:13 PM #9 jeremie (Moderator)

Originally Posted by jaybot

I don't think my browsers are outdated, but I swear I have some spinners that still announce congratulations with some shitty text-to-speech even if they are in the background.

Unfortunately, it does not work in Chrome without previous user interaction. See error message

Code:

[Deprecation] speechSynthesis.speak() without user activation is no longer allowed since M71, around December 2018. See https://www.chromestatus.com/feature/5687444770914304 for more details

If you hear "you're so awesome jaybot", that's the voice in your head, not the lander text-to-speech

05-07-2021 07:19 PM #10 vortex (Senior Moderator)

Originally Posted by jeremie

If you hear "you're so awesome jaybot", that's the voice in your head, not the lander text-to-speech

Seriously - you guys add much laughter to my life.

@jaybot maybe the voice came AFTER some sort of user interaction with the page? Like for a spinner - the user would need to click on the wheel to make it spin first, correct? If so, then like @jeremie said said, you can play any audio.

Amy

05-07-2021 08:45 PM #11 jaybot (Veteran Member)

Originally Posted by jeremie

Unfortunately, it does not work in Chrome without previous user interaction. See error message

Code:

[Deprecation] speechSynthesis.speak() without user activation is no longer allowed since M71, around December 2018. See https://www.chromestatus.com/feature/5687444770914304 for more details

If you hear "you're so awesome jaybot", that's the voice in your head, not the lander text-to-speech

Damn, has it been that long?

For the record, it probably still works on firefox and other browsers.

I like this problem for no other reason than it seems like a fun thing to solve.

You'd think something like

Code:

onmouseover="var u = new SpeechSynthesisUtterance('OK'); u.text = 'Hello World'; u.lang = 'en-US'; u.rate = 1; u.pitch = .4;speechSynthesis.speak(u);"

Inside of the body or within a div enclosing the body would work, but noooooo still need to click on the page somewhere. Even a js alert() click doesn't count.

Only way of solving it so far was using sweet-alert.js and doing onclick with swa but that's not even close to auto-playing.

I'll keep picking at it when I have time.

Home > Technical & Creative Skills > Programming, Servers & Scripts