How to get an audio clip to automatically play at the loading of the homepage?

Solved
navs
New Member
4 0 0

Hello I am currently building a website on Shopify. Does anywhere here know how to get a 2-3 second audio clip to automatically get played at the beginning of the homepage when it loads? 

0 Likes
BrianAtWork
Shopify Partner
242 58 140

This is an accepted solution.

Hey @navs,

 

One way to get an audio clip to automatically play at the loading of the homepage is to customize your theme and add an audio tag. Here's a quick how-to:

 

Before you customize your theme:

 

  • Duplicate your theme to create a backup copy. This makes it easy to discard your changes and start again if you need to.

 

Edit your theme code

 

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Actions > Edit code.
  3. In the Assets directory, click Add a new asset.
  4. Click Choose File, select your audio file, click Upload asset.
  5. In the Layout directory, click theme.liquid.
  6. Find the </body> tag in the code, and paste this code above it:
    (Be sure to replace 'filename.mp3' with your audio file's name and extension.)
    {%- if template.name == "index" -%} 
       <audio src="{{ 'filename.mp3' | asset_url }}" autoplay></audio>
    {%- endif -%}
  7. Click Save.

 

That's it! Do let me know if this answered your question or if you need further help.

Brian | Shopify Partner | Ecommerce Consultant
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Click Accept as Solution  
 - Need further assistance? Visit www.BrianAtWork.com

navs
New Member
4 0 0

Great I will try this, Thank you Brian!!

0 Likes
Jason
Shopify Expert
10294 146 1949

Be ready to source feedback from your customers if you add this. Autoplay audio is rarely something that customers appreciate so would generally caution people about implementing it. It could end hurting conversions. There's also a big difference between music, or just some subtle ambient sounds.

 

You might have that niche demographic that's cool with it. Would be worth tracking how many customers drop off from the home page once you add it (assuming you have some traffic today). If there's an instant drop off that could highlight a problem.

I jump on these forums to help and share some insights. Not looking to be hired, and not looking for work.

Don't hand out staff invites or give admin password to forum members unless absolutely needed. In most cases the help you need can be handled without that.


★ http://freakdesign.com.au ★
0 Likes
navs
New Member
4 0 0

Yes I agree I will have to test it out and see how it converts. Just trying be creative & think outside the box. It will be a 2 second clip welcoming the customer in an alien voice. 

0 Likes
anil11
New Member
3 0 0

hello 

i have follow the same format, 
i have upload the mp3 file in to assets and i replace the code. 
but not able to listen the audio, please help

 

 

sound_test.jpg

0 Likes
anil11
New Member
3 0 0

hello,

 

finally i did it. but its only coming in IE, i am not able to do it in crome, still trying, if u have code then please send me.

 

0 Likes
kub
Pathfinder
80 2 25

Hi. I came here because i have some items which have like a property a particular sound. All one of a kind and customers ask me sometimes how the sound is. On the market there are sone which ahve awful noise.

 

So my question. Howto autoplay this custom sound?

 

I thought about your solution but i have to upload as asset each product sound which is not a sultion i would prefer because at template update i need to transfer also.

 

So i thought to create a template for product like

product-sound-template.liquid

and insert your code

{%- if template.name == "product-sound-template" -%} 
   <audio src="shopify-file-url" autoplay></audio>
{%- endif -%}

but it doesn't seem to work

I'm quit esure the template name syntax is wrong. Any help?

Thanks in advance

 

 

-----EDIT ----

nevermind i got it by my own..

 

The solution was.

1. upload the file in your admin file section,

2. copy the file url and paste in the code below

3. go to the product description in code section and paste the code below inside

 

   <audio src="https://cdn.shopify.com/s/files/1/your-url/example.mp315876322310" autoplay></audio>

and it will repeated one time if you want to loop just use tag loop .

 

Should work also if you simple paste it in your theme.liquid

 

Thanks for reading

0 Likes
Farmland_shop
New Member
2 0 0

i just did that and no sounds plays help?

0 Likes
kub
Pathfinder
80 2 25

What did you do from these solutions?

0 Likes