How to add music to website/bypass browser blocking?

[bunkerparty]

I know its possible `` seeing melon's site and being able to hear music has convinced me so! I'm using Neocities and use windows 10. I tried downloading firefox and coding while using the browser, but it seems it isn't so cut and dry. I'm sure there is something obvious that I'm missing, but I haven't been able to find a solution on my own. Here are some sites I'm working on that I'd like the add a bit of music to. The second one sends you on a bit of a journey through my other sites. As you can see in the top left corner I added a boombox button--(A temporary solution)-- but I'd munch rather not have to click/activate for music to be heard. Help! How do other websites do it?!

https://collectionandcustoms.neocities.org/

https://virtualbunker.neocities.org/

[Melooon]

I'd munch rather not have to click/activate for music to be heard. Help! How do other websites do it?!

You can't. If someone has autoplay blocked, the only way to make music play is for the visitor to actively interact with something that is triggered to start the music.

So its not really about bypassing the autoplay block, its more about social engineering to get the visitor to click something that starts the music

EDIT:
If they don't have autoplay blocked then you just use the autoplay flag - but most people do have it blocked by default.

Code

 <audio autoplay loop>
  <source src="horse.mp3" type="audio/mpeg">
</audio> 

[bunkerparty]

You can't. If someone has autoplay blocked, the only way to make music play is for the visitor to actively interact with something that is triggered to start the music.

So its not really about bypassing the autoplay block, its more about social engineering to get the visitor to click something that starts the music

/
Oh, but then how is it possible I can hear your music play on my default browser? Actually, I went looking for an example and may have answered my own question. I was looking through YTMND sites and noticed that without even realizing, each site has a play button before launching you into the site.
SO, hypothetically,  before people are lead into my 'homepage' it would need to say aomthing like.. "Enter bunker>>"...

[chantolove]

Bypassing autoplay blocking is probably a great way to get people to click off your site. It's there for a reason, a lot of people don't want sound to start automatically without their control... if you're going to tie it to an 'enter site' button, you should probably set some sort of disclaimer that clicking it will start music ^^'

[lakes]

It'd be kinda invasive to bypass autoplay-blocking, since that's a setting that's probably on for a reason. (I know sometimes I'm listening to my own music I browse sites. So it can be kinda weird to hear 2 songs at once.) But you can put a warning on your site to enable autoplay OR have an interactive music player, so they can play it on their own.
Browsers usually come with the option to enable autoplay either in site permissions or the settings themselves. So if someone wanted every site to autoplay music, they'd probably have that enabled.

[Melooon]

click off your site. It's there for a reason, a lot of people don't want sound to start automatically without their control... if you're going to tie it to an 'enter site' button, you should probably set some sort of disclaimer that clicking it will start music

But you can put a warning on your site to enable autoplay OR have an interactive music player, so they can play it on their own.

I really disagree here. Browsers are often hostile spaces for indie site makers, they are designed for and by a fundamentally different web than what indie sites offer, and their features are not always in our favor. Browsers don't offer clear auto-play alerts or controls that the average person understands, most people vising my sites simply don't know there is supposed to be an audio component, and even if they do, they don't understand how important it is until it actually starts working.

Sound is an essential part of human experience, and when you silence sound, you are taking away part of the humanity of a space. Encountering the unexpected is also part of human experience. When everything is known or per-warned, you're basically living in an airport, its a dead reality. People always complain about unexpected things, but those things are also what make their lives interesting. People need to be bothered by good things.

There's also finally a theatrical component. The arrival and departure of sounds and images are what make creative media creative; theatrical contrast between silence and noise is essential. David Lynch described it as the contrast between motion and stillness, and I really agree with that.

There's a reason why the things people talk about most on my sites are the sounds, there's a reason why an elevator page that terrifies everyone who clicks it, with a sudden noise, is the page I get the most people asking how they can replicate.

Giving people noise, giving them a shock and giving them something they maybe didn't even want; it gives them their humanity back, on a web that on every front tries to suck experience away into the void banality. So I'm in the camp of fighting for autoplay on every front, on every page and with every trick in the book

[Dan Q]

Story time (there's a point, I promise!):

Back in the early naughties I was doing some work for a company who wanted their website to let the user fill out a form on a web page, then the website would generate them a PDF file, and them the user's printer would print out the PDF file. It was really important to the client that the latter step happened automatically.

"I can't make the user's printer print things out without them doing something," I told the client, "It's not possible."

The client, who had routinely been a challenge to work with, countered: "Of course it's possible. Just send the document to the printer. Why can't you?"

I should have just stuck to my guns, but instead I tried to educate my customer: I tried to explain why it wasn't possible for a web page to just send something to your printer without you, the user, taking some kind of deliberate action.

"There are lot of reasons it can't be done. What if you don't have a printer - then where does it go? What if they have two printers - which does it use? What if they have something that looks like a printer, like a print-to-fax service or a print-to-PDF tool? But fundamentally, the reason is this: if any web page could print to your printer just because you visited that web page... then web advertisers would be serving you print ads, where you pay for the ink, every time you went online! It'd be a nightmare! There's no way that any browser manufacturer would add the capability for web pages to allow automatic printing, because hundreds of website would abuse the power!"

"I don't need you to fix it for all those websites," countered the client, who clearly wasn't listening, "I just need you to fix it for mine."

"And I'm telling you I can't do it."

"Well I'll go find somebody who can!" he retorted.

And that's what he did. Well, tried to. He'd assumed that my objection was ethical, not technical, and he contracted with a third-party company to implement that piece of functionality. They came up with a Java applet that could be embedded on a web page that would automatically print. Rolling my eyes, I added the applet to the website and showed the result to the client.

He filled the form, he submitted it, and then... up popped a scary warning that the next web page wanted to run a Java applet. Yes, the applet could automatically print... but first the user had to consent to the applet running.

There's no way around consent.


In the early days of the Web, you could absolutely make a background sound play without user intervention. You'd do this:

Code

<bgsound src="/my-sound.wav" />

The problem? People sound - and did - embed sounds that couldn't be blocked, couldn't be stopped, could be used for trolling purposes. You could embed a sound which was 30 seconds of silence followed by a bloodcurdling scream, or the sounds of pornography, or something else that could be shocking or embarassing to a user who might have just opened that link in a background tab or window and now have no idea what was going on or how to stop it. It was a problem.

So browser manufacturers changed the rules. Nowadays, a web page cannot make sound unless you interact with it. And this applies to everything. If you do this:

Code

<video src="my-video.mp4" autoplay>

Then you'll probably find that the autoplay directive gets ignored because the browser doesn't trust you not to have annoying audio in the video! You either need to drop the autoplay attribute, or demonstrably mute the video with e.g.:

Code

<video src="my-video.mp4" autoplay muted>

In that latter case, you can un-mute it in response to user interaction (clicks or keypresses, for example) - again, interaction is key! And that can be simple. Some JavaScript like this would work, for example:

Code

<script>
document.addEventListener('click', ()=>{ document.querySelector('video').muted = false; });
</script>

That's the bottom line here. There are some things that browsers just won't let you do unless it's in response to user interaction, or the user has already interacted with the page. And that's a good thing... because if that rule didn't exist - and trust me, because I can remember the time that it didn't exist - then browser manufacturers would be racing to add it!

Noisy advertisements were a thing, and the first browser to "block" them from being noisy had people switch to it in droves. Other browsers had to follow.

Incidentally, this is also why a site can't "fullscreen" itself without you clicking something, can't steal cursor focus or capture the entire keyboard without you clicking something, etc... which is why all those games on itch.io need you to click on them to start: they don't just start by themselves! Again, this is a good thing for the web as a whole. But it's something that, as a developer, you just have to work around.

[sunnyp4rk]

I'm going to be that person to say that I would absolutely click off a site if there was suddenly music that started playing, or I'd immediately mute the tab, especially if it's loud music (some sites I don't mute, like Melon's, but that's because the music isn't super intrusive since it's midi.)

If someone wants to hear your site's music, they'll unmute the tab themselves. Don't force it on people.

[chantolove]

Browsers don't offer clear auto-play alerts or controls that the average person understands, most people vising my sites simply don't know there is supposed to be an audio component, and even if they do, they don't understand how important it is until it actually starts working.

Ok, this is a really good point. It did take me a while to get used to how to work the autoplay controls once my browser updated to include them, and often I don't notice it blocking sound from random webpages. If you're trying to be Maximum Artistic, the intermediary tech taking away an aspect without the audience noticing is definitely a hindrance... I maintain that some kind of introductory telegraph is necessary (especially since even if you silently opt them in with some first interaction you're risking blasting music over a screenreader) but I can definitely understand deeper the motivations beyond 'tunes go brrrr' now.