Playing music in your blog using Yahoo media player

If you are owner of music site ,or podcast ,or blog ,and you want to embedded a music player into your site so that visitors can listen to the audio in the browser itself without requiring an external player like QuickTime or Windows Media Player.
I recommend using the Yahoo! Media Player that auto-detects links to MP3 files in your web pages and creates an embedded player for each link.




Live demo

How to use ?

1,Adding this code into HTML code of your webpage
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

in blogger ,you can paste this code before </head> tag of blogger template .

2,Adding audio links to your page ,like this :

<a href="http://..../example1.mp3">First link</a>
<a href="http://...../example2.mp3">Second link</a>
<a href="http://..../example3.mp3">Third link</a>
...........

Ok. You are done !
Each time when you click on the links in step 2 ,a player will appear . Easy to install ,no quicktime or window media plugin required .
But this is not a perfect player .It can only play audio file in mp3 format ,in various bitrate .

Some Options for Yahoo Media Player

To tell player which link are playable ,you can use these method :
1, Use the file extension like this <a href="http://mediaplayer.yahoo.com/example1.mp3">First link</a> ,the extension of file is mp3 ,so player will consider this link playable .

2,Use the type attribute to hint that the file type is playable. If the type attribute is set, the music player ignores the file extension.
In this example, the link would be considered playable:

<a href="http://example.com/mysong.php" type="audio/mpeg">this is a song</a>

And in this example, the link would not be considered playable:

<a href="http://example.com/mysong.mp3" type="image/png">this is a song</a>

3,Give the link the class "htrack", like this:

<a class="htrack" href="http://example.com/mysong">this is a song</a>

If the htrack class is set, the music player includes the link, regardless of the file extension or the type attribute.

Adding album art by this way :

<a href="example.mp3"><img src="example.png" alt="" />my song</a>

The dimensions of the image should be square, not rectangular.

If you don't want the image to show up directly in the main web page, add style="display:none" to your img tag:

<a href="example.mp3"><img src="example.png" alt="" style="display:none" />my song</a>

Other options can be found in homepage of yahoo media player

Have fun with it !