Langsung ke konten utama

How To Add A Music Player In Blogspot

Since this archived post was written in 2007, web design and Blogger templates have changed immensely. The development of HTML5 and <audio> tags enable us to add music to our Blogspot websites and posts far more simply, and with improved control.

In preparation for explaining how to podcast with Blogger, this tutorial explains 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.

I've even created a simple form to generate basic tags for you! Adding music to your Blogspot site has never been so easy!

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.

Here's a basic example using the <audio> element:




The audio player above is produced using the following HTML code:
<audio controls>
<source src="url-of-audio-file" />
If you cannot see the audio controls, your browser does not support the audio element
</audio>
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.

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.

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.


Generate code for audio player



Preview of audio player will appear here

Add an audio player gadget to Blogger

You could use the methods above and paste your code into an HTML/JavaScript gadget in your Blogger layout.

Or for a faster, easier option, use the tool below to automatically add a gadget to your template:


Generate a Blogger gadget for audio player





Did you find this post useful?

I hope this tutorial for adding a simple HTML5 music player to your blog has been useful for you. In the next week I'll be following up with a tutorial for podcasting with Blogger, so if you have any suggestions or comments about this post please feel free to leave your comments below.

Credits:

Komentar

Postingan populer dari blog ini

Import Blogs From Another Service To Blogger With The Google Blog Converters Project

A few months back, Blogger announced the ability to import and export Blogger hosted blogs. At the time, it was not possible to import blogs from any other service to Blogger, which left many of us a little disappointed though wondering when this service could be made available. Well it seems there is hope that Blogger can make such a service available through our Blogger dashboards soon enough! Today the the Google Blog Converters project : an open source project which aims to make available the ability to import/export feeds from many different blog platforms: This new Open Source project provides the ability to easily move blog posts and comments from service to service. This initial release provides Python libraries and runnable scripts that convert between the export formats of Blogger, LiveJournal , MovableType , and WordPress . In addition, the source code includes templates for hosting these conversions on Google App Engine . Future additions to the project will includ

Download Mp3 - blackpink is suffering

download lagu 123 blackpink is suffering - download lagu terbaru Iconic Blackpink Rose moments- free download lagu mp3 Iconic Blackpink Rose moments- download lagu mp3 full Blackpink-download lagu 123 MP3 chaotic blackpink moments that i can&#;t forget, Semua Lagu-Lagu, Video dan Lyrics tersedia disini, Semua Musik ini berasal dari Youtube.com dan gratis untuk didownload. Belilah Lagu blackpink is suffering dan kasetnya di Toko Terdekat Maupun di iTunes atau Amazon secara legal, ini hanya sebagai Review dan Promosi saja. Video Terkait Video Download MP3 blackpink is suffering Download MP3 Iconic Blackpink Rose moments Download MP3 Iconic Blackpink Rose moments Download MP3 Blackpink Download MP3 chaotic blackpink moments that i can&#;t forget download lagu 123 blackpink is suffering - download lagu terbaru Iconic Blackpink Rose moments- free download lagu mp3 Iconic Blackpink Rose moments- download lagu mp3 full Blackpink-download lagu 123 MP3 chaotic blackpink moments