Use the link below to find a gadget that will take your source and write the HTML code for you. Just copy and paste!
Open a gmail account, start a google sites website, start a cabinet page. There you can upload your MP3 from your desktop. Then right click where your MP3 says download and copy.
Your MP3 is now stored on Goggle sites and you have a link to use in your audio player code. The whole process takes 15 minutes and you now have a location to store images, audio, even videos.
Google sites is a largely unknown resource in the blogger community.
How to easily add an HTML5 mp3/audio player to your blog posts or layout. No JavaScript, Flash or plugins are required, and with a fallback for older browsers which don't support the player.
Basic HTML5 Audio Tags Explained
The <audio> tag is a new feature of HTML5 which we can use to natively embed audio playback in our sites.It is supported in Internet Explorer 9, Firefox, Opera, Chrome, and Safari, and can be set to play the linked audio file automatically (autoplay) or loop if required.
The audio player is produced using the following HTML code:
<audio controls>In the example above, all code related to the audio player is wrapped in <audio> tags. By including controls in the audio element, a simple player is displayed, enabling the user to begin playback when (or if) they want, and to adjust the volume.
<source src="url-of-audio-file" />
If you cannot see the audio controls, your browser does not support the audio element
</audio>
Any text between the audio tags (which is not enclosed in the <source> tags) is displayed in browsers which do not support the audio element (IE8 and below).
If you would like the audio to begin playback as soon as it is ready, you can enable autoplay as in the following example:
<audio controls autoplay>
<source src="url-of-audio-file" />
If you cannot see the audio controls, your browser does not support the audio element
</audio>
By retaining the controls attribute, you give visitors the option to stop or resume audio playback if they choose.
To loop audio (specify that the audio will start over again, every time it is finished), include the loop element in the <audio> tag, like this:
<audio controls loop>
<source src="url-of-audio-file" />
If you cannot see the audio controls, your browser does not support the audio element
</audio>
Hosting files for your audio player
Blogger does not allow us to upload or host audio files, so in order to add an audio player you will need to find a host for your mp3/ogg files.While Blogger Help suggests hosting providers which offer free and premium packages, I anticipate most of you would prefer a simple free solution, so here are a few suggestions:
Once you have uploaded your audio files, make a note of the direct link
to the file which you'll need to add in the code for your audio
player.
How to add a music player to a blog post
While using the compose tab, write the main content of your post as
normal, then place your cursor where you would like the audio player to appear.
Then use one of the example code snippets above (substituting the direct link to
your audio file) or use the code generator below and paste into your blog post. Use previous link to get to article on bloggerbuster.com and use code generator and gadget generatort
Be sure to check the Interpret Typed HTML option on the post
Options in the right side of the post editor, otherwise the raw code for
your player will be displayed instead!
Alternatively, switch to the HTML mode when composing a post and paste your code as HTML.
Alternatively, switch to the HTML mode when composing a post and paste your code as HTML.
