How to play audio on page load?

This works when you first interact with document by button click. But when you directly try to open that route /home for example or just refresh the page, audio doesnt play.

Some devs have managed to bypass this. Example is https://feetpix.wtf/home

You don't (Chromium on Gentoo).

@Oktokolo so how has that dev made it work? Open his site and see for yourself. On desktop background music plays automatically without user interaction. While on mobile it requires just to touch the screen anywhere to trigger playing background music.

How?

@b2plane Nah, doesn't play automatically. Definitely requires a click first.

Plug in a powerful speaker system to your server and play a sound every time someone sends a request

@Oktokolo lol no. Open it on your pc

@Oktokolo i just tested on a different laptop. Seems like it starts playing on click anywhere on the page. So how is it automatically playing on my main pc?

Autoplay on websites totally sucks for users, even more so if with audio.

Every web dev who does that should be forced to lick some poorly maintained motorway latrine until he can't tell shit from French fries anymore.

@Oktokolo holy shit i just found a way. It's a very hacky thing to do but its possible

Desktop:
1. Load a video and start auto playing it, but mute its volume
2. In useEffect grab the audio reference to that video and unmute it programmatically

Mobile:
1. Load a video and start auto playing it, but mute its volume and make sure to set intrusivePlaying to true (so the video can start autoplaying on ios/safari)
2. In useEffect set a an event listener for mouse touch. So as soon as you just touch the screen the audio gets unmuted

On desktop it works even when you directly now type the route /home and also when you refresh the page - no click interactions needed!

Finally figured all of this by myself and hours of googling testing and failing

@Fast-Nop i know. This is a degen meme website so its not supposed to be taken seriously. Although there is an interactive agency website where they do play background music and it fits well to their vibe of company. Check https://lusion.co/

@b2plane I didn't have any audio on that website until the first click - and that was the last click before I immediately closed the tab.

you can't. and if you could: don't. and if you do: i hate you.

@tosensei i think i can. Even if i could: im about to. If i do: i just did

It’s a shame that apparently you can circumvent the mechanisms of the browsers that are supposed to protect the users from retarded autoplay.

@b2plane Sure, you can do it that way - but then, the user experience just sucks and people will hate you.

Browser makers will lock stuff down even more and at the end the answer to questions like "why can't we have good things?" will be: "Because people like you don't repect boundaries."

Btw: Is there a reason why sound on the web always has to be at the maximum possible volume before the first manual adjustment no matter whether it actually is meant to be background or not? Do designers generally watch TV on max volume too? Do they all copy the same HTML snippet?

@Oktokolo depending on your system, you may lose resolution or get rounding errors if you cut down volume earlier in the chain.

@electrineer Sure, but is "document.getElementById("myaudio").volume = 0.5;" really too much code for doing it at the end of the production chain?

@Oktokolo my comment still applies.

@Oktokolo It's a reasonable ask. But I've had this debate with UX and the counter was that if we set our volume to 50% some users will think their speakers are quiet, raise their system volume and then get screwed on the next webpage where the volume is 100%

(unless we show the volume in an exaggerated way, but it's kinda ugly that all new video viewers on our site would see a huge "volume: 50%" blurb)

@jiraTicket So users prefer using OS volume control over adjusting the volume in the player?