Autoplay Music

Kyle_Noir
New Member
1 0 0

Who has experience with autoplaying music/sound on shopify homepage? Not asking about the morals and complex discussion between, does anyone have any experience/ know how you would configure such a thing? Would be so appreciated!!!

Replies 16 (16)
Alex23
Shopify Staff (Retired)
521 1 106

Hey, Kyle!

I'm Alex, with the Shopify team!

Understood! This isn't a recommended customization, not so much for moral reasons but more due to usability and customer experience; autoplay tends to annoy customers, and interrupts their browsing experience.

That said, if this is something you'd like to introduce to your site, there's a few options I can recommend:

  • There's several music player apps available in our app store - it's not clear from their descriptions whether you can set those tracks to play automatically, but you could always reach out to the developers to see if that's an option, or if a customization could be made. I'd suggest in particular checking out Music Player by Websyms, Widgetic (Audio Players), or Osaria Audio Player. Each of these apps offers a trial period or a free plan, so you can try them out to see if they'll work for you.
  • I see that you've got a video background in place on your site - how did you go about introducing that? There's at least one app in the app store that allows for video backgrounds with sound; I'd suggest checking out Video Background.  You might consider using this app for your background, if you already have (or can create) a video with the audio track that you'd like to hear.
  • Finally, if those solutions won't work for you, then you could always reach out to one of our listed third-party design experts for help in making this change; they'll be able to add this via custom coding in your theme!

Hope that's helped! Please feel free to let me know, and you can always give us a call or start a live chat at any time. We're open 24/7 for your convenience and always happy to assist!

Cheers,

Alex | Shopify

Alex | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Ninthony
Shopify Partner
2247 339 900

I'm not sure why Alex has to refer you to shopify apps, there's an easy solution to how you can get music to autoplay on your homepage. 

 

If you go into your index.liquid you can just add an iframe and set it's display to none.

  <iframe src="youraudiofile.mp3" allow="autoplay" style="display:none" id="iframeAudio">
  </iframe>

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
saifali
New Member
1 0 0

Hi ninthony 

i have applied the code as you have instructed in the index.liquid, but where can i apply the audio file and how can i call it to "src="?

AmotApparel
New Member
1 0 0

That didn't work

Ninthony
Shopify Partner
2247 339 900

Upload the file to the CDN. Settings in the bottom right of the admin, Files, Upload, copy the url it gives you after upload and place it in the source. Since it had been so long since I posted this I just copied and pasted my code into my index.liquid on my developer store, uploaded an MP3 to my CDN, copied the link and pasted it into the source of my code and it's working. So there :P

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
hanisharun
New Member
19 0 0

This solution worked for me. As addition, does anyone know how to modify the codes to display button that enable use to mute or pause the song?

Ninthony
Shopify Partner
2247 339 900
I wont be at a PC till Monday morning but when I get in I'll try to figure it out and post a codepen for you.
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
hanisharun
New Member
19 0 0
I have manage to add the music, but i have problem on the media control. I have posted here: https://community.shopify.com/c/Technical-Q-A/Removing-black-iFrame-background-or-make-it-transparen...

Please check and help. Thanks
AndrewMV
New Member
5 0 0

Can you remove the player from the homepage with a line of code?
I entered the url of the audio file, but the problem is that that horrible music player remains at the bottom of the page! It also allows you to download the audio I uploaded ...

Solutions?