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

Solved
Highlighted
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
Highlighted
Shopify Partner
242 59 113

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

2 Likes
Highlighted
New Member
4 0 0

Great I will try this, Thank you Brian!!

0 Likes
Highlighted
Shopify Expert
9933 106 1766

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.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Highlighted
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
Highlighted
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
Highlighted
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
Highlighted
Explorer
49 1 13

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
Highlighted
New Member
2 0 0

i just did that and no sounds plays help?

0 Likes
Highlighted
Explorer
49 1 13

What did you do from these solutions?

0 Likes