Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
Stylow

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

Question

Is there a way that I can hide the music player and autoplay the sound?I think with code it's possible but I don't know where to start.The audio file is not large its only 6 seconds long.

Thanks!

Edited by Stylow

Share this post


Link to post

Recommended Posts

  • 6

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 by silvabokis
Remove “above”, what above?

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 4

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...

Share this post


Link to post
  • 2

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.


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 1

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.


Developer Evangelist at Squarespace.

Share this post


Link to post
  • 1

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

Edited by kale

Share this post


Link to post
  • 1

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.


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 1

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 by Stylow

Share this post


Link to post
  • 1

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.

alt text

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

alt text

The div container ensures that just the player gets hidden.

Edited by EmmaKnowsSomeThings

Share this post


Link to post
  • 1
Guest

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 by Guest

Share this post


Link to post
  • 0

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 by silvabokis

Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0
Guest

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 by Guest

Share this post


Link to post
  • 0

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?!

Share this post


Link to post
  • 0

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 by Steiner

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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 by kegee15

Share this post


Link to post
  • 0
<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 by sciversimon

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...