We need help with custom code on a freshly finished project https://alreadyeverything.co.uk
There is an audio player on each page with lottie animation, which remembers the on/off state in the cookie.
In Chrome if you click on any link in the menu, on a newly loaded page autoplay works, but as you just land on a site for the first time it blocks the autoplay. What we’d like is to make it autoplay even if you first land on the site or refresh the page. I noticed that if I interact with the website more it starts doing that too, but not if you just first see this site.
For Safari, I couldn’t find any workaround for autoplay at all. Apart from showing a banner to enable autoplay in site settings, which doesn’t feel that slick. Although some people claim they used howler.js to hack autoplay restriction, I didn’t have any luck with it.
I’m happy to share what I have so far for you to use in your projects, but would love some genius code help to finish this.
P.S: If you want to say “omg don’t autoplay” please restrain. The client wants it, and the music is very gentle, not something screaming in your face. There must be some way to do it.
As I understand Safari on either a Mac or iOS requires a user to actively click something in order for anything with audio to play.
Maybe my workaround might help you. I once had a video playing inline (so without visible controls) and it played automatically without sound. The problem was that Safari disables autoplay when the device was in low power mode. I made a simple workaround using jquery that listens for any user interaction with the body, and used that to trigger the video.
$('body').on('click touchstart', function () {var videoElement = document.getElementsByClassName('inlinevideo');
if (videoElement.playing) {
//do nothing
}
else {$('.inlinevideo').trigger('play');}});
It’s not a perfect solution, but it might help you.
I had the luck that my videos were lower down the page anyway, so you never actually noticed that they weren’t playing before scrolling down. On desktop unfortunately, it does require a click anywhere on the page. But again, in my case that wasn’t an issue because there’s no such thing as low power mode on desktop, and videos without audio are allowed to autoplay.
Edit: maybe you can try if you can trigger it with some kind of mouse over event for desktop?
@Iskandar Offtopic, but maybe you also know how to disable bounce/rubber band scroll in Safari desktop and iOS. I only managed to do it in chrome. Most of our websites have full screen sections and bouncing when you reach the edge of the screen really kills the idea.
Note that there is a custom script added in the Header of the Custom Code tab in the project settings, without it cookies won’t be saved.
It overall works in Chrome, however it works best when you go from one page to another, i.e you need to interact with the website, if you reload the page, or type th address directly it most likely will pause the autoplay. If you will make any improvement for this code (especially for Safari), please share.