Can I play an audio file using HTML5 in SiteBuilder?

  • 0
  • 33
  • Question
  • Updated 1 year ago
  • Answered
  • (Edited)
Yes!   First you will want to save, or convert your audio file to a common format such as MP3.

1. Upload the audio file into the File Manger and publish the file using the upload button on the top menu.  Where is the file manager located?

2. Paste the following html code into your web page where you wish for the audio player controls to appear. How to add html code?

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>


3. Save & Publish the page

Important: Be sure to edit the name of the file name in the html code to match the name of the audio file you imported on step 1.

When the page is published, it will produce a nice clean looking audio player like shown below.

Chrome


Firefox


Internet Explorer


Safari




Photo of Mike F.

Mike F., Alum

  • 184,368 Points 100k badge 2x thumb

Posted 4 years ago

  • 0
  • 33
Photo of Michael9397

Michael9397

  • 94 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled
I have multiple Audio Files (Players) on a single page..


I have multiple Audio Files (Players) on a single page. It appears visitors using Google Chrome will access all audio files simultaneously. If visitors are using Internet Explorer or Firefox this does not happen. What can I do to correct this from happening.
Photo of Matthew4621

Matthew4621

  • 90 Points 75 badge 2x thumb

The only problem with embedding the code is that you can adjust the size of the audio player. Apparently, this is a problem the developers need to work on.

-- Matthew



Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
Good morning Matthew4621,

This is true and it is on the road map to update the media players, but there are still many backend things going on as a result of the sale from Intuit, so I can't give you an ETA at this time.  There may be a 3rd party player that can do this, or you should be able to add some CSS code to the head tag in the Page Settings > Advanced, to define the width.  Something like this,

<style>
audio { width: 200px; }
</style>

The number in the width is in pixels and you can change it as needed.  This should work for you until the developers are able to revamp the built in players.

Thanks

Drew
(Edited)
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
Sorry Matthew, I was having trouble getting the code to display properly.  Seems right now.

Drew
Photo of Matthew4621

Matthew4621

  • 90 Points 75 badge 2x thumb

Thanks for the help Drew - I was able to resize the player and everything works well in Chrome. Please keep me updated if things change. Once again thanks for all your help and the speed of response.

-- M

(Edited)
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
You're very welcome.  We will update relevant topics when we have new information.  Have a great weekend!

Drew
Photo of Jonathan T.

Jonathan T.

  • 5,512 Points 5k badge 2x thumb

Is there a way to make it play automatically using this code?

Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
Hi Jonathan T.,

You should be able to yes.  Be careful using to much auto play on a site.  Typically most visitors want to hit the play button if they want to hear it.  That being said, it might be appropriate to your site and business.

In the first line that says audio controls, add the word autoplay after controls, still inside the bracket.

Thanks

Drew
Photo of Jonathan T.

Jonathan T.

  • 5,512 Points 5k badge 2x thumb
Thank you.
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
You're welcome
Photo of Jonathan T.

Jonathan T.

  • 5,512 Points 5k badge 2x thumb
To keep uniformity, I'm using Amazing Slider software for my Audio file. As soon as I can make it work, I plan on buying the commercial license since the slider works so good from them. Not sure if you can help though, the audio works great on all browsers so I can tell, but on Mobile and Ipads, the screen size gets messed up now. It appears that It may be layering, but according to all my sizes embedded it shouldn't be? http://pfloyd.homestead.com/
Photo of Mike F.

Mike F., Alum

  • 184,358 Points 100k badge 2x thumb
Jonathan T.

Since it's 3rd party code we can't really troubleshoot it. However you are welcome to repost this question to the following page and solicit help from others on the Community.

HTML Help! Can you help me troubleshoot my code (or 3rd party software)?

Photo of tom1712

tom1712

  • 82 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled
How to stop audio file from playing automatically?.


How can I stop my audio file from playing automatically? I inserted the file and it looks good but when I preview it starts playing even though I have not chosen the play automatically button.
Thanks,
B
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
This is a known issue in Google Chrome.  You will need to use an alternate method for the time being.  We are sorry for the inconvenience.

Thanks

Drew
Photo of Roy5584

Roy5584

  • 266 Points 250 badge 2x thumb
This reply was created from a merged topic originally titled
audio player plays automatically when setting is off.


When I put the audio player on my site and un-check the box that says "play automatically" the player plays as soon as you open that page. How do I get it to not play automatically?
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
Hi Roy558,

This is a known issue with the built in player and Google Chrome.  You will need to use a 3rd party player, or you can use these instructions to add the audio using HTML.

Thanks

Drew
Photo of William0457

William0457

  • 82 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled
Why are all the samples playing at once?.


when I click on the samples page all the files are playing at once. They need to be silent until clicked.
Photo of Mike F.

Mike F., Alum

  • 184,358 Points 100k badge 2x thumb
Hi William0457,   for some reason, the Chrome browser ignores the code for the player controls and just plays all audio files when the page loads.  The best work around that I've found that seems to work on all major browsers is using the html5 code snippet in this thread and just remove the SiteBuilder audio player. 

Mike 
Photo of Michael9397

Michael9397

  • 94 Points 75 badge 2x thumb

Thanks, I'll give it a try and let you know,

William0457

Photo of Mike F.

Mike F., Alum

  • 184,358 Points 100k badge 2x thumb
You're welcome. 
Photo of Sharon7975

Sharon7975

  • 82 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled
Hiding the Sound Player and Continuous Play.


I would like to hide the sound player and have it play automatically and continuously when the page loads. I checked the appropriate boxes but the player remains visible and I have to layer it behind the picture frame to hide it. I am okay with the sound if it just repeats once but I should be able to hide the player at least. Can you please help? Thanks
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
Hi Sharon7975,

Some browsers are now ignoring the check boxes for those controls.  Currently you will have to use the html5 code to do this.  A slight change in the code for you should do the trick.  If you just copy and paste this code, then make sure your audio file is called music.mp3.

<audio controls autoplay hidden>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>

Drew
Photo of info7661

info7661

  • 502 Points 500 badge 2x thumb
This reply was created from a merged topic originally titled Audio plays automatically, even though it's set not to..

Using the Homestead audio player, the tracks begin as soon as the page loads.  In the Audio Player Settings, "Play automatically" is unchecked.  I have tried checking, then saving, then unchecking and saving.  Have deleted and re-added the player.  Nothing's working. 
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
Hi info7661,

This is a known issue with the Chrome browser.  For now, you will need to use the instructions in this topic.

Thanks

Drew
Photo of wrightbarry44196

wrightbarry44196

  • 82 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled MORE THAN ONE AUDIO FILE ON A PAGE..

AM I ABLE TO PUT MORE THAN ONE AUDIO FILE ON A PAGE WITHOUT CONFLICT.
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
Hi wrightbarry44196,

You can do so using an HTML box.

Thanks

Drew
Photo of Jerry5835

Jerry5835

  • 102 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled How do I stop all of the entries on Songs and Sermons stop playing at the same ti....
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
Hi Jerry5835,

This is a known issue with Chrome.  For now, you will need to use HTML code to do this.

Thanks

Drew
Photo of Aaron7653

Aaron7653

  • 82 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled i have sound files on a page and they start automatically even though i have not ....
Photo of Drew N

Drew N, Community Manager

  • 255,898 Points 100k badge 2x thumb
Hi Aaron7653,

This is a known issue with Chrome and some versions of Firefox.  For now, you can use HTML to add the players.

Thanks

Drew
Photo of Amy0261

Amy0261

  • 102 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled sound player running automatically.

My sound player is running automatically and I have not checked the box. How can I prevent this?
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
Hi Amy0261,

This is a known issue with Chrome. For now, you will need to use the HTML in this topic to do this.

Thanks

Drew
This reply was created from a merged topic originally titled MP's on the site auto playing.

I am trying to put up MP3's and the player auto starts. Does anyone know how to stop it from doing so, it does not give me that option in the side bar. I want to put up 3 but they are all starting and playing at the same time.
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
This is a known issue with Google Chrome. For now you will need to use HTML to have multiple items on 1 page.

Drew
Photo of Doug0752

Doug0752

  • 162 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled Audio player looks ugly (cleared cache) and audio for all start playing as soon a....

Audio player looks ugly (cleared cache) and audio for all start playing as soon as I go to page. I have tried checking the settings in the property manager for the link and tried clicking the radio buttons on and off. What's up?automatically
Photo of Doug0752

Doug0752

  • 162 Points 100 badge 2x thumb
I am on the resource page of doyouknowme.org 
Photo of Doug0752

Doug0752

  • 162 Points 100 badge 2x thumb
I have tried everything I can think of to make this audio file work.  the closest I can get is to use explorer to create the link with file manager - but chrome still doesn't see it.  I've inserted the file name into the code like below.

<audio controls>
  <source src="UNITY_Friday_Spkrs.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>  

I have also tried it taking out the line about the browser not supporting this format.  


 Is there something else I need to do?  Can you use this info and show me what it should look like please?
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
This code is looking for the music file in the root directory. Your mp3 is in another folder. Also, are you previewing? Publish it and see if the live site works. Preview is an emulation mode and doesn't always work with all HTML.

Drew
Photo of Doug0752

Doug0752

  • 162 Points 100 badge 2x thumb
I have put the file in the root directory.  I have published.  I have previewed.  I've tried different browsers.  I've done everything you and tech support have suggested.  The player appears but there is nothing to play.

This is what I am entering into the HTML window. 

<audio controls>
  <source src="UNITY_Friday_Spkrs.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>  

Is this correct?  Please tell me exactly what is wrong and what I need to do to make this work.  Or you can make it work. 

very frustrated   
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
That should work on the published page, but are you waiting long enough. A player like this requires the file to download prior to playing, and it is 45MB, so it will take some time to get down to your computer. You may be better off using a streaming service like Youtube or something else.

Drew
Photo of Darrel7106

Darrel7106

  • 114 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled Audio Problems On My Site.

On the preview page my audio files auto play and the play controls look broken. Auto play is not selected on any of the songs in the backend.
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
Darrel7106,

This is a known issue with Chrome. For now, you will need to use HTML to play audio.

Drew
Photo of bobo8546

bobo8546

  • 10 Points
How Do I get my music to play continuously on all pages rather than just the first page?
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
bobo8546,

I don't know that it can be done effectively. I have read of some players they claim they can, but then see comments by people that there are limitations. One was a flash player. That won't work on iphones. Some other methods require php, which Homestead doesn't support. So, if this can be done, then you will need to find a 3rd party player or see if you can find some HTML5 code to do it.

Drew
Photo of Laura5954

Laura5954

  • 82 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled Sound Files all play at once.

We have various sound files on our site.  On some computers when you go to our site all the sound files start playing at once.  Other computers click play and it works perfectly.  Is there anything I can do in set up to prevent them from all playing automatically?
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
Laura5954,

This is a known issue with Chrome. You will need to use HTML if you wish to have multiple sound files on a single page

Drew
Photo of Michele R.4628

Michele R.4628

  • 384 Points 250 badge 2x thumb
I have had a problem for almost two years with all the audio players starting to play all at once.  I can not tell you about the embarrassment my Flute and Violin Wedding Duo has incurred, with prospective Clients.  I have been incredibly patient.  Absolutely, it's been well over a solid year and reaching two years.  SIncerely, Michele, www.BridalMusic.org
Photo of Michele R.4628

Michele R.4628

  • 384 Points 250 badge 2x thumb
When I contact Homestead, a tech will tell me about HTML to resolve my audio problem.  But Homestead has to understand that I signed up with Intuit, three years ago, because the templates, etc., were easy for a non-computer person -- a classical musician like myself -- to handle.  I can't handle HTML.  Asking me to do an entire page of HTML codes, so that my abundance of audio samples will properly work with Chrome, is just not fair.  It's like giving a musical instrument to the tech and telling him/her to sit in with the orchestra!   Sigh... So many Prospective Wedding Music Clients have told me about this embarrassing problem and I know I have lost work due to this ongoing malfunction with the Chrome Browsers.  This problem is now going on two years where it has not worked properly. 
 Sincerely, Michele, Bridal Music
(Edited)
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
Michele R.4628,

You do not have to do the whole page, just the media player, and if you need help you can ask here. Our agents don't support HTML, but here in the community we can help you with these types of snippets.

Drew
Photo of Lawrence5219

Lawrence5219

  • 610 Points 500 badge 2x thumb
This reply was created from a merged topic originally titled URL pointer is not working.

I re-designed "www.howareyouliving.com"; However, when I publish it, the URL that shows is "livingwell financial services." That is the pointer site and should not be showing. Also, my "Voice Services" page publishes but cannot be found when clicked in the navigator bar.
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
Lawrence5219,

This is a known issue with Google Chrome. For now, you are best off using HTML to add the player. This will give each file the player controls

Drew
Photo of William1659

William1659

  • 136 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled Can't turn off automatic play on audio player.

I'm working on http://williammurraycomposer.homestead.com/index.html I have not checked the "play automatically" box under audio player settings, but all of the audio files start playing automatically anyway. How do I correct this? Also, the audio player icons are distorted when published. How do I fix that?
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
Hi William1659,

This is a known issue, at least with Google Chrome. For now you will need to use the HTML code above to play the audio.

Drew
Photo of William1659

William1659

  • 136 Points 100 badge 2x thumb
Hi Drew, 
Inserting the code brought up a good-looking audio player that didn't start automatically, but the sound, when played, is horribly distorted -- kind of "pixelated". Any ideas what's going on? Thanks!
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
What page is your audio on? I have never seen that before

Drew
Photo of William1659

William1659

  • 136 Points 100 badge 2x thumb
I deleted and tried again, this time with good results. I'm not sure what caused that hiccup. Thanks for your speedy response.
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
Excellent. I am glad it worked There a controls to the controls as well, like auto play and repeat, if you care to do more with it.
Photo of Megan3286

Megan3286

  • 82 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled Error with music player playing automatically when it is not set to..

I have several mp3's on one page and none of them are set to play automatically. However, when you visit the page several of them are playing automatically AND at the same time! Ugh! What do I do? They are already set to not play automatically! What is the problem? Help!
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
Megan3286,

This is a known issue with Google Chrome. For now, you will need to use HTML code.

Drew
Photo of Jim2481

Jim2481

  • 126 Points 100 badge 2x thumb
This reply was created from a merged topic originally titled audio player for my website that will also work on cellphones.

I need a audio player my visitors can play my audio clips for most browsers including mobile phones. Turns out there is no way to choose a clip to play when using Android using the players provided by Homestead sitebuilder.
Photo of Leola2409

Leola2409

  • 82 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled All of my sound files play automatically and at the same time even though I didn'....

This is on the Radio link....
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
Leola2409,

This is a known issue with Google Chrome. For now, you need to use HTML to have multiple sound files on the page. Or you can find a 3rd party player option
(Edited)
Photo of stinky1117201507

stinky1117201507

  • 92 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled How can I add music to my pages???.
Photo of elden2008529

elden2008529

  • 92 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled ADD MULTIPLE AUDIO FILES.

Can add multiple audio files that viewers can click on?
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
You will need to do this using code. Google Chrome will play all the files at once if you use the built in tool.
Photo of elden2008529

elden2008529

  • 92 Points 75 badge 2x thumb
What do you mean by code?  I am currently using foxfire.
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
HTML code as described at the top of this page.
Photo of Mary Ellen0090

Mary Ellen0090

  • 82 Points 75 badge 2x thumb
This reply was created from a merged topic originally titled how do I get the audio to quit playing automatically?.

the audios play at the same time even though I have the play automatically button unchecked. no boxes are checked...the continuously or the hide sound player...
Photo of William S

William S

  • 18,858 Points 10k badge 2x thumb
Hello,

This is a problem with our audio players and Google Chrome. The only other option is to use the HTML5 audio players show in the article above.
This reply was created from a merged topic originally titled All audio players playing simultaneously even though not "set to play automatical....

As soon as website is accessed all audio players start playing.  Also issues with Google Chrome, when will that be fixed?
Photo of William S

William S

  • 18,858 Points 10k badge 2x thumb
Hello,

This is a problem with our audio players and Google Chrome. The only other option is to use the HTML5 audio players show in the article above.
Photo of Russ3073

Russ3073

  • 688 Points 500 badge 2x thumb
I have the player installed but where do I get the code for the audio file.  can you show me step by step how to do this? thank you.    p.s. tell the management team they really need to get this audio thing figured out...homestead customers are patient but this is crazy...thanx
<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>
Photo of William S

William S

  • 18,858 Points 10k badge 2x thumb
The article above will break down the steps to do this. The only thing you want to change in the code is the 'music.mp3' to the name of your file.
Photo of Pamela1609

Pamela1609

  • 144 Points 100 badge 2x thumb
I did this and it worked for 3 of my 4 mp3 files. One of them will work in the preview, but as soon as I go to publish it the audio file will not play. What can I do to fix this?
Photo of Drew N

Drew N, Community Manager

  • 256,518 Points 100k badge 2x thumb
Pamela1609, fool.mp3 has not been published. Go to the file manager and select the file and hit publish. Then try again.