Embed an HTML5 audio player in Google Sites

Dale

Want to add audio files that play in your Google Site without forcing visitors to download the files first?

audio player in Google Sites
An HTML5 audio player embedded in Google Sites

Do you need this to work on the iPad or in other browsers that do not support Flash?

Below is the URL to a gadget I made that will embed an HTML5 audio player in Google Sites.

https://sites.google.com/site/basler45678/home/html5-audio-player.xml

Watch the video below to learn how to use it.

145 thoughts to “Embed an HTML5 audio player in Google Sites”

  1. Pingback: Embed an HTML5 audio player in Google Sites : walkertecharts.com

  2. Thanks so much for this HTML5 help. I am updating my course to nuke the flash. Your help was just what the doctor ordered. 🙂

    1. Dale,
      Thank you for the help with the audio gadget – works as advertised. Is it possible to relocate this gadget into a folder, let’s call it “Audio Files” on a “File Cabinet” page so that the gadget is visually connected to a specific folder?

      1. I think that will work. You’re welcome to download the file and try it in the new location.

      2. Hey David! How are you? So, could ya manage downloading the gadget, putting it into “File Cabinet” in your Google Sites and make it work?

        1. We figured it out. Paulo wanted his own copy of the XML file (the gadget) so he posted it on his site. However, the site was still private. If you wish to use your own copy of the gadget, it needs to be somewhere public.

    2. Thanks SO much for the gadget! I teach computers to middle school students and every year it seems Google “disables” the gadget I use to have students embed their projects on their website portfolios. Yours is the best one so far.

  5. Hi Dale,

    Thanks for the great little gadget but I have hit a weird problem. On my website all the music plays properly except for 5 mono tracks on “page 4” near the bottom that play only through the central speaker of my 7.1 set up.

    The original files play in iTunes properly through the two L & R speakers so I thought the file may have some hidden code embedded. I then tried downloading the file from Google Drive back to my pc and it plays in iTunes fine again.

    That points to their being something causing it in your gadget. I have other mono tracks playing OK (e.g. the Who on page 7) so am at a bit of a loss. Any ideas?

  7. Many thanks for making this and for making it so clear to use. I really appreciate it. After trying for quite awhile to figure it out, this was a real productivity saver and exactly what I was trying to do! Sue

  9. It looks like Google hates your gadget. When I inserted it into a Google Sites page and saved, the gadget appeared for about a second, but then was deleted.

  11. Dale, thanks so much for your post! I looked all over before finding your simple and elegant solution — and IT WORKS!!! Several others didn’t; so you have saved the day for us. Again many thanks!

    Don Hirst
    Webmaster
    Eugene Symphony Guild

  12. Hello Dale,

    how are you? Hope your girl is doing fine with her Pebble Accelerometer… very nice story to share. Thank you for your generosity : )

    Happy Thanksgiving!

    Google finally dismantled your audio player. One day I found them taken out with simple explanation “unsupported feature”, next day even the explanation was taken out.

    I guess Google does it in order “to eliminate some competition” as the wise Garlfield once said in the cartoon.

    Oh well, at least we are able to place direct link to our mp3 file.

    Also, there is also YouTube video path as well.

    Warm regards,

    Artu

  14. Hi Dale – thanks very much for making this available. With the “google audio player” going down recently I have been looking for an alternative and this HTML 5 version is a better replacement.

  15. Sorry everyone. I missed a bunch of comments that went into the spam folder. Oops.

    So glad I can help. Your sites are wonderful.

    And yes, Google changed something on November 20th that broke the gadget for a while but I fixed it on the 21st. All should be working fine. 🙂

    1. Hey Dale. I recently used your mp3 player on a new site of mine dor our gold team….its an iron maiden gold themed site with their songs parodied with golf lyrics. The player works great, but i was windering if there was a way to leverage a marquee the scrolls the song lyrics at the sane time?? Riight now i have a separate page that has lyric sheets, but if you surf to them while the player is playing, the player stops since toure leaving the embedded pointer page. Thoughts on this?? Heres my site- http://www.nineironmaiden.com

      Regards
      Marc / sf ca

  16. This works perfectly –except for Safari users. The volume slider pops up vertically and gets cut off. Any ideas for a workaround?

  17. @Elisabeth I made a small adjustment to the gadget’s positioning. If you need to show the whole volume slider in Safari, change the height to 145px in the gadget’s settings. Unfortunately, this leaves a big gap above the player.

    I should note that this gadget is optimized for Chrome. However, If you want IE11’s ridiculously large native player to fit, you will need a width of 535px and height of 95px (that’s with the download link displayed).

    Perhaps, I work on some browser detection to get the sizes right for all browsers in the future.

  18. @Dale Thanks for the note. You’re right, the 145px height + gap leaves too much white space to be feasible, especially considering the browsers that wouldn’t need this. With users across the browser spectrum, work on browser detection with adjusted sizes for the gadget would be much appreciated.

  19. RE: IE
    The IE11 width has been easy to accommodate just using the 100% setting. (No download link)

    1. @aagg, you need a direct link to the file. In Google Drive, even if it is a public file, you don’t get a direct link to the file. Instead, Google wraps tbe file in a Google Drive page for viewing.

      I suggest uploading the file as an attachment to one of the pages on you Google Site. Then copy the download link to use in the gadget.

  22. Is it possible to add more than one track to my website? I would like to have multiple audio tracks from one story.

    Thanks

  23. Hello Dale . . . (2-12-2015, Salem, Oregon) People like you are so amazing and helpful to so many others. Thank you for the use of your brilliance to help us lowly folk. And, now, talking about lowly folk, I am 65 years old, I have a series of soundtracks I wish to place on my google sites of children’s books I have written. I watched your video and it all went so fast that I couldn’t follow it. Is there a place where there is a step by step direction process for old farts like me?

    Thanks Again

  24. One more comment . . . I just started building my site; I am a novice about such things, but am eager to learn. I was SOOO THANKFUL that I came across your comments this day. My hard drive crashed (with about 20 years of work, some backed up) on December 15th. So, I’ve just been trying to piece-meal things together to get sound to my sites location and without success; I am SO thankful for you, my friend. You don’t have to answer this—I know that you are a busy man; but I figured it doesn’t hurt to ask. “Is there a way to charge money for products (books) on SITES?”

    If you can’t answer this, I understand. Thanks RISH

  25. I watched your video and stopped it and took notes to go step by step to upload this sound player onto Google sites; but, when I got to the point of copy and pasting the URL you have posted above . . . the ADD box remains inactive to where you can’t click it. I don’t know if Google has eliminated this possibility or what . . . do you have any suggestions?

  26. @RISH Sorry, but I don’t know anything about charging money on Sites. I’m not sure what is happening on your end. I just tested the gadget. I was able to add it as shown in the video.

  27. Thanks for the xml gadget. Works nicely. The new google drive does support hosting. I think you just have to get the right id for the folder it’s in. If you go back to the old drive, you can get the link. I may be wrong. It’s working for me though to put mp3s in drive.

    Odd that Blogger supports the simple audio tag, but Sites doesn’t

  28. Dale —

    Congrats on a great work-around for Google Sites’ oldish DTD.

    Is it possible to copy and modify your gadget, then upload to my site?

    Thanks muchly in any case,

    John Kwasnik

  31. Thanks very much for sharing your useful gadget. We’re a buddy band that needed exactly what you built for our Google Site-in-the-Making. My hat is off to you!

  33. Pingback: Google SiteにAudioを埋め込む方法 | Techforlearning's Blog

  34. @Dale
    For the last two years, i did search the best way to embed an mp3 to my blogger site.
    from Flash Player to HTML5 Audio..from Dropbox to Google Sites and Drive as well..
    in some cases, it won’t play if i logged out from Google..
    in other cases, it works on Chrome but not on iPad.
    i was so confused and today i came to this site.
    Your video is brilliant and i can do it on my Google Sites, exactly the same as shown in your video. The problem is, i want to do this on my Blogger site. Can you tell me how to do it? i’m done with the forums, i have spent two years searching and asking for the best way to embed an mp3 into blogger. Thank you very much!

  36. Hi Dale,
    I run a Google Site for our choir and your technique is just what I’ve been looking for for several months; thx for sharing. In your YouTube video at approx 4:54, you mention that the MP3 file on the Google Site page can be hidden. Can you give me a hint on how to do it?
    thanks!

  37. Thank you a million times! I desperately needed to add some audio for my teachers and was getting all kinds of errors and unsupported Quicktime. This fixed everything! So thanks from me, about 75 teachers and over 1000 students!!!!!

  38. Hi Dale,
    I greatly appreciate this music player, which I now have on the top of my website. I am curious though, and haven’t seen anyone else ask, why does it render differently on an iphone display? It looks beautiful on my android; it’s black and I can see all the features. But it just looks like a white block on my friend’s iphone. Any idea how to make it look good on both?
    Thanks,
    Dale

  39. I am a music technology teacher and my students make portfolio’s where they host their music. This solution for the google audio player is one I have been using for awhile now and it was an awesome fix so I just want to say thanks.

    I am running into something funny this year though. Some of my students can use the link for the gadget just fine. Others are completely unable to add the link to their site. I have tried, from their computer and from my own… I have done it myself to make sure it wasn’t a student error. Any idea why it will add to some google site pages and not to others?

  40. Dale, thank you so much for providing this audio player. I needed a Google player for my school library’s website, so I could play the library podcast I created. Surprised that Google doesn’t have something, but I’m grateful you created this player. Thanks again!

  41. Hi,

    I tried using the gadget. I got it to work on Chrome (win 8.1 enterprise). However the chrome on my Sony Xperia Z1 running android 5.1.1 did not play the audio file. I would have swithed from the flash player to the HTML5 if it had worked. Pitty.

  43. Thank you!!! I tried several other things to share audio files for a choir class with students who have ipads and I could not get anything else to work!!! I am so glad I found this!

  45. This is great and awesome! Can a playlist be combined for multiple files without having to have multiples players?

  48. I plan on hosting about 10 MP3 files on my File Cabinet Style page. Will I be doing this step for each and end up with several little player bars, one for each MP3 file?

  50. Thanks so much Dale for creating and sharing this! The tutorial was super-easy to follow and attaching my phone-recorded quotes was super simple. Awesome-sauce!

  53. Hi Dale,
    Followed your instructions to the letter (very clear by the way), and pasted in your link: (https://sites.google.com/site/basler45678/home/html5-audio-player.xml) Clicked the Add button and nothing happens. Tried it numerous times. Add button briefly turns blue and then nothing. I am working in IE. I am a teacher that needs to make my Google site course 508 compliant and so I am trying to add MP3 audio files of each web-page. Help?????
    Many thanks,

    1. Try adding a space after the URL that you paste in to activate the button.

      Also, this works best in Chrome.

  55. Hi Dale

    I insert the audio player on my google sites page and I want to get rid of of the white stripe that leaves on the page. The background color of the page is blue.

    Thank you.
    Panagiotis

  56. Dale on 31 Aug 2015 at 3:39 pm
    Under “Page settings” you can uncheck “Show attachments”

    I don’t see the “Show Attachments” listed to uncheck to hide.

    Also if we could insert a link from Google Drive but they don’t show the .mp3 link. You get 15GB from Google Drive and only 100MB on sites. Is there another site that would allow us to upload mp3 to link back?

  57. Also could I suggest you make it possible for us to put the “Display Title On Gadget” and “Download Link” to either side of the player instead of above and below the player. Then we can get everything in one line so we could get more on a page by making the box short and longer.

    1. @bob I don’t have control over these things. Some of this is baked into the behavior of Gadgets and how the

  60. Dale,
    Thank you so much for your directions! I was able to follow them to insert the player on my site, but here is where I have trouble. I don’t know how to change the sample audio file with the mp3 audio file that is saved on my computer. In your video you already have the audio on the bottom of your screen, but I don’t know how to do that. Thank you in advance for any help you can offer!

    1. @Kelly_S The audio at the bottom of the screen was uploaded as an attachment to page. You may need to turn on page attachments under page settings.

  61. Thanks very much for this. As a music teacher I’ve been looking for a solution for this annoying problem and here it is! Great work.

  62. Pingback: Does Google hate audio? – dalebasler.com

  63. I can’t thank you enough for this fantastic gadget. I was faced with teaching an oral First Nations language I don’t speak. With the use of this gadget, students are creating an audio dictionary online by posting images and then recording people from the First Nations community saying the vocabulary word for the image. Brilliantly easy to insert into the site and link to the sound files!

  64. Pingback: Hvordan legge lyd til Google Sites sider. – baredigitalt

  65. This gadget is fabulous and just what we needed for a school project. Thank you so much! Just curious if you’ve ever experienced a gadget not playing in Chrome, but it will play in Firefox. Our site has about 150 audio files on one page and at about #46-#48 it stops playing them in Chrome. When I launch in Firefox it plays just fine. Any insight?

    Thanks in advance.

  66. I am in high school and we are doing a project, I would like to add music but i am not sure how to change the link to make it my own music or where to get music.

    1. @KIM You need a direct link to the file.

      I suggest uploading the file as an attachment to one of the pages on you Google Site. Then copy the download link to use in the gadget.

  67. Dale,
    Thanks so much! Do you have a donate button somewhere so I can buy you a coffee or beer?

    Two question/suggestions:

    1) Would it be possible to stretch the actually player wider to get more control over moving around in longer length audio?

    2) I am guessing there isn’t an option when choosing the file to browse the files on the webpage, is there?

    It’s early so hopefully I’m typing clearly.

    1. Sean, Thanks again for the comment. I took your advice and added a “Donate” button to the bottom of my website. Best!

      1. Oops! I forgot to answer your questions.

        Unfortunately, you cannot stretch the play because the width of the player is specific to the browser. 🙁
        Also… no, there isn’t a file browser.

  68. you answered with “you can change the background color of the gadget to match you site’s background”, but how does one do said task? IT’S ASKING FOR A CODE WHICH APPEARS TO BE #FFFFFFF

  69. THANKS !! This works great and adds more character to my site.

    – When my 5 minute audio clip finishes can I add a 2nd or 3rd audio file to follow the first?
    – How do I make the audio file play on my second and third pages? Do I have to install a new audio gadget for each page and for each audio file?

    1. Craig, you need to add a new player for each audio file and each page. I cannot do playlists.

  70. Hi Dale,

    I was directed here from another forum saying that this would work for uploading an audio file to “Google Slides”, but I can’t seem to get it to work in any form by trying to “insert” your URL…

    Am I doing something wrong? Or was this gadget never intended to work with Slides?

    Thank you,

  71. hi dale,
    is there a way to disable the downloading of the music content? i unclicked the box to show the download link, but if i right click on the player anyone can save the audio. thank you 🙂

  74. Dale

    This was just what I was looking for to develop my website about the history of my street and to include sound files about residents that viewers could play.

    However, although the test file works on my website (page link below) – when I go into it from elsewhere the sound file aspect does not work. Any thoughts?

    Thanks

    Barclay

  75. Sorry – got it sorted – my stupidity!

    Thanks again for the excellent app.

    Barclay

  77. It seems as if html5audio player is no longer working on Google Sites. Please help!

    1. The player now reads “The gadget spec URL could not be found” on my website. Do you know why it is suddenly doing this? Thanks again!

      1. Are you still having trouble? I just checked several sites that use the gadget. It is still working for me.

        1. It’s still not working on my site. Do you have any idea what may be wrong? I’m glad the gadget is working on other sites. It would be wonderful to simply correct a small issue if I can…

  78. Hi Dale,

    Thanks for the great player. I use 20 of these players on my site for 20 different files. My problem is as soon as you go to that page, all the players start loading their mp3 files. Is there anyway to prevent this pre-loading of files. So the file is only pre-loaded on clicking

    thanks again

    1. Neal, pre-loading cannot be prevented. If they are all playing when the page loads then you can turn off Auto Start.

  79. Thanks, Dale. I might have a solution… I played around with the xml file and it seems like the preload=”none” command can be used.

    So this below works for me. Not sure if it will cause problems in other browsers or anywhere else. But Chrome/firefox, IE okay

    html = “”
    + “”
    + “You cannot use audio tag with your browser” + “”
    + s_downloadlink;

  80. Sorry, didnt notice that the code was filtered out. Basically, you need to add preload = ‘none’ to the html injection line in the xml file

    This will prevent the html5 player preloading audio files.

  82. Hi Dale

    I have recently used your guidance to embed audio on my class site but since updating to a MacBook Air and Chrome Version 52.0.2743.116 (64-bit) I keep getting this error when trying to add gadget by URL.

    The gadget you added is not valid

    Unsupported feature: org.apache.shindig.common.xml.XmlException: Content is not allowed in prolog. At: (1,1)

    Any ideas?

  84. Hi Dale,
    I am using your HTML5 player on my choir’s members-only Google site. I have 4 web pages with players. The smallest page has 11 players and the largest has 45 of them. When landing on a page only 2-4 of the players load (i.e. the PLAY icon is dark, the slider dot is blue, and the play time is displayed). The others have either the dark PLAY arrow and blue dot but no play time, or a grayed-out arrow, no dot, and no time display. After refreshing the page, still only 2-4 of the players load as above but not the same ones. My download speed is 15Mbps.
    This is a new symptom that was not there a month ago. Has something changed?
    Let me know if you need access to the site as it is not public.
    Thank you.

  85. Hi Dale,
    The MP3’s are in a Google Drive and shared to all the users/members. As I mentioned, some of the MP3’s play, but not always the same ones. Every time one lands on the page, different MP3’s are playable, so it doesn’t seems to be an access issue. This method worked flawlessly for over a year. Are you aware of any changes?
    Thanks again,
    Fabio
    PS. As mentioned I would be glad to give you access to the files/shares if you would like to inspect in detail.

  87. Your revised gadget seems to work for us, so thank you much for sharing.
    In most of your examples and those of respondents here, the audio (.mp3) source was already online somewhere else. The player in your gadget seems to require a full http URL. Does google sites or google drive provide the opportunity to host an .mp3 with a URL? We can upload the .mp3 to google sites attachments, and we can “publish” .pdf docs, slideshow presentations, videos, other html pages, etc., but I have not found a way to create an http link for the .mp3 file WITHIN Google sites or Google Drive that will play in your gadget. Any help would be greatly appreciated. Thanks much,
    Lance

    1. Hosting on Google doesn’t work. You can attach the files to a page in Sites and use the download link from the attachment as the file’s URL. However, the page with the attached files must be public.

  88. Hello,

    Thank you for your gadget. I can get the sample audio file to play, but when I add the link for my mp3 file. The gadget shows a grey forward button and 0:00 time. I tried adding a space at the end of the link as you suggested above, but it still doesn’t work. Any suggestions? The mp3 file is in my google drive. I have created a google site using old google site interface, not the new one. I am setting this up using Chrome.

    Thanks for any suggestions you might have!

    KDavis

  89. Hi Dale,

    This is great!!! I had a quick question/issue. I have the player set to auto play and it works perfect on a computer, but when I view the site via a mobile device it doesn’t auto start, but still plays when I press play. Any thoughts?

  92. Hi Dale,

    Here’s a little challenge I’m working on… The audio I’m trying to embed is actually a stream for our school radio station that we want to embed in our Google site. Your gadget works fine, but I’m trying to get it to work with a ‘refresh/reload’ button also (see http://radiokps.weebly.com ).

    The related code, uses autoplay id=RadioStream and javascript:document.getElementbyID then uses .load to refresh and .play works as normal as in your gadget.
    see source code at radiokps.weebly.com

    I’m not sure how to make that into a gadget like yours.

    Any thoughts? Thanks

  94. Thanks Dale for a very nice gadget. It solved my purpose. One thought…Is there a way to find out count of number of play’s to downloads made using this gadget?

    Actually I am designing a website for a charitable organisation using google sites and they are interested in knowing this information to see interest of the people for each track.

  95. Thanks Dale for a very nice gadget. It solved my purpose. One thought…Is there a way to find out count of number of play’s or downloads made using this gadget?

    Actually I am designing a website for a charitable organisation using google sites and they are interested in knowing this information to see interest of the people for each track.

  96. Hi Dale, I have been using your gadget (https://sites.google.com/site/basler45678/home/html5-audio-player.xml) on my Google Sites based-website to play audio saved and made shareable on the web on my Google Drive. Suddenly these have stopped working. The gadget will play if linked to attachments made to the pages but I need it, instead, to play from files on my Google Drive. Videos on Google Drive work well using their standard drive link. Any ideas of a workaround?

  97. Hey Dale. I recently used your mp3 player on a new site of mine dor our gold team….its an iron maiden gold themed site with their songs parodied with golf lyrics. The player works great, but i was windering if there was a way to leverage a marquee the scrolls the song lyrics at the sane time?? Riight now i have a separate page that has lyric sheets, but if you surf to them while the player is playing, the player stops since toure leaving the embedded pointer page. Thoughts on this?? Heres my site- http://www.nineironmaiden.com

    (fyi this is a repeat question as I didn’t see an answer around the time you had spam loss issues) –
    Regards
    Marc

    1. Sorry Marc, my player cannot do this. You may want to make YouTube videos with the lyrics and audio synced together.

  98. Hi Dale, thank you for this wonderful gadget!

    My high school students will be using Google Sites as academic ePortfolios during their upcoming trimester abroad. Part of the requirement is to post audio Spanish conversations.

    I ran through the step-by-step tutorial today. The student’s test audio wouldn’t play – they got gray arrows with time 0:00. My test audio worked as designed. I had a student send me the link to his site, and his clip played on my computer, but not his! Any ideas on how to troubleshoot?

    1. This usually happens when the audio file isn’t public. If it is attached to a Sites page, that page needs to be public as well.

  99. Hi Dale,

    After a lot of playing around with the code, I have managed to create a gadget that will enable the streaming of online audio with a gadget that includes play / pause / reload buttons. I have created options for style customisation also.

    Thought I’d post the link here for your interest, and the interest of others who may want a similar alternative.
    Thanks for your initial gadget that helped me work out what to do.

    https://goo.gl/acqay0

Comments are closed.