How do I hide the music player and put it to auto play?

Here are a few reasons, in addition to my browsing at work scenario, that autoplay non-stoppable music can be undesirable:

1. Users on smartphones are forced to stream audio that wastes their bandwidth.
2. Users may be already listening to audio on their device, or be multitasking by browsing on their device while watching TV. Autoplay music is an unwanted distraction in that case.
3. If a user journey spans many pages that have autoplay music and/or they revisit the same page multiple times they end up hearing the same starting section of music again and again. Annoying.
4. Doesn’t the fact that you ‘do not find that people will click on the player’ prove that it’s not important to people in the context of your site?
5. After hunting around the screen for a (not present) mute/volume button they are just as likely to hit the back button as they are to turn their speakers down.
6. You need to clear the rights with copyright owners and music publishers before putting commercially available music on your site.
7. For a website to engage with its users it should allow them to feel like they can choose their own path without intrusion or distraction. Forcing users to break from their chain of thought in order to seek a mute button will break their concentration.

After all of those caveats, here’s how to hide the player. Add the following CSS to the header injection point:

<style media="screen">
.sqs-audio-embed {
 visibility: hidden;
}
</style>

There should be a way of autoplaying by triggering the same function that is attached to the player’s onclick state, but it’s beyond my understanding of the script to work out which function(s) would need calling and in which order.

Edited June 26, 2014 by silvabokis
Remove “above”, what above?

Honestly I myself look at pages while at work, and know to mute sound...I do not find that people will click play on the player, and this feature really enhances the experience, I love pages with automatic sound, playing music, its a feature that really adds to the browsing experience...

Playing music automatically without the user asking for it and, as the controls would be hidden, with no means of stopping it, can annoy users.

Imagine a scenario where someone sneakily views your website at work, the music starts blaring, they can't stop it and they know they could get into trouble for browsing at work. They're not likely to have positive associations with your site.

I have the same question, any luck? I just want the song to play once people click, I don't want them to have to search for the bloc and have to click to play.

Agree, this is not a feature that will likely be built into the platform. There is probably a good use of sound on a webpage, but auto-playing a song on page load is not it.

I have to agree with @silvabokis -- auto playing music and hiding the player is not a good idea.

Edited May 9, 2013 by kale

There should be a way of autoplaying by triggering the same function that is attached to the player's onclick state, but it's beyond my understanding of the script to work out which function(s) would need calling and in which order.

Thanks for all the comments so far.

I just want to play my typical intro sound that I use for my Intro Logo.
It’s only 2 seconds long. It’s not that I want to play a 3 minute or so song.

Edited May 16, 2013 by Stylow

Thanks for the first part of the solution Silvabokis.I hope somebody can find how to autoplay it now.

If you upload the file to SoundCloud you can set it to autoplay and get an iframe code to embed on the page/entire site.

Once you have this you can add it to the page settings header code injection like so:

The div container ensures that just the player gets hidden.

Edited August 20, 2013 by EmmaKnowsSomeThings

Piggy backing off of @silvabokis...

Found a workaround for this without using SoundCloud or other iframe resources.

Use the audio player to import your audio to the page on Squarespace. If you place it on a page and do not want it to display, use the following code as seen on this question and answer:

/* AUDIO CONTROLS */
.sqs-audio-embed {
 visibility: hidden;
}

Then view the page and inspect the element. Once you have the URL for the audio/MP3 file hosted on Squarespace. Place a code block on your site somewhere it is not in the way. Use the following code and replace the file name with your URL:

<audio autoplay="autoplay" controls="controls">
   <source src="http://file.mp3" />     
</audio>

You should now have a workaround for you hidden audio that will play on page load!

Note: You may hear the music play on your editing page as well.

Edited September 10, 2014 by Guest

C'mon I know you guys can do better than this!

There should be a way of autoplaying by triggering the same function that is attached to the player's onclick state, but it's beyond my understanding of the script to work out which function(s) would need calling and in which order.

Edited June 26, 2014 by silvabokis

@stylow -

Ever find out how to auto play music?

I inserted that and it is not working. Is it because my music link is from YouTube?Is it because I inserted the code into the wrong page (homepage)?

Edited January 29, 2014 by arielladadesign

OMG I figured it out myself!!

So this was by chance because I have no coding experience what so ever, im an architecture student and just launced my website like 4 days ago! I got my site to do it www.blumintshop.com with automatic sound on my home page!

So do exactly like it says above with the sound coud embeded code then put it into the page header.

*IMPORTANT-Now this is how you hide the sound.In the code where it says [<iframe width="100%" height="166"...] Instead insert [<iframe width=0%" height="0]

All you do is change the width from 100% to 0% and the height from 166(or whatever your height is) to 0.It worked for me immediatley it just make sense if the width and height is 0 then it cant be seen!!!

OMG PLEASE SHARE THIS TO EVERYONE!!

Much Love,

Blake Alexander

Edited August 13, 2014 by Guest

This is really helpful! My song is playing automatically on my website but I want it to play continuously across Pages as you navigate through the website. How do I do that?!

Wow, this was a tough one to crack.

Finally figure out how to auto-play the album player.

<script>
 window.onload = function () {
   (function(w,d){      
     setTimeout(function(){w.soundManager.start(w.soundManager.soundIDs[0]);}, 3000);      
   })(window,document);
 }
</script>

There are two "sound manager" references "soundManager" with a lowercase s is the better choice, as it's the YUI create module ref.

So, in summary, the

window.onload = function()

is just making sure the script doesn't run until the page as loaded, since Squarespace has all of their modules loaded at that point as well.

The second function

(function(w,d) {...

is an auto-executing javascript, the first parameter is the "window" context which is what Squarespace is loading pretty much everything to, and the document is the second, which can be ignored.

Finally, I have a setTimeout because depending on the load time the script wouldn't trigger, it's waiting three seconds then starting up.

Should still work with the section set to display:none, haven't tested it myself.

Edited September 14, 2014 by Steiner

There is a way to completely get rid of the visual “sound cloud” player on your website.

The key is to .. “when putting the embedded code into the Configure page> Advanced

The code might read “ <iframe width= “100%” height = “450” You want it to read.. so edit it. <iframe width= “100%” height = “0”This deletes the sound cloud visually but you can still hear the music on auto play.

... yea, my answer no long really applies. The newest version broke the Sound Manager work-around I was using..

Has anyone had success in using the above to autoplay their audio, particularly 'This Guys' method? I've tried, but can't seem to get it working. I'm creating a wedding website, and pulled the audio file from my iTunes account:

http://www.mashandkev.com/

I don't want to hide the player, as I'd like to give the user an option to stop the track if they'd like. And I'd like to avoid using a Sound Cloud audio file, if possible.

I don't have any coding experience, so any help here would be greatly appreciated! Thanks.

Has anyone had success in using the above to autoplay their audio, particularly 'This Guys' method? I've tried, but can't seem to get it working. I'm creating a wedding website, and pulled the audio file from my iTunes account:

http://www.mashandkev.com/

I don't want to hide the player, as I'd like to give the user an option to stop the track if they'd like. And I'd like to avoid using a Sound Cloud audio file, if possible.

I don't have any coding experience, so any help here would be greatly appreciated! Thanks.

Has anyone had success in using the above to autoplay their audio, particularly 'This Guys' method? I've tried, but can't seem to get it working. I'm creating a wedding website, and pulled the audio file from my iTunes account:

http://www.mashandkev.com/

I don't want to hide the player, as I'd like to give the user an option to stop the track if they'd like. And I'd like to avoid using a Sound Cloud audio file, if possible.

I don't have any coding experience, so any help here would be greatly appreciated! Thanks.

Edited February 24, 2015 by kegee15

Your a Genius! :-)

<p>Though I used:</p> <p><audio autoplay loop> <source src="url.mp3" type="audio/mpeg"> </audio></p> <p>without the ="" so no controls came up.</p> Edited March 20, 2015 by sciversimon