How to Embed MP3 Audio Player in a Web Page with Yahoo! Media Player

By On July 5, 2010 · 1 Comment · In Tools & Tips

Many webmasters requires an MP3 Audio Player which can embedded in a Web Page. You want to put an audio link or an MP3 link in a web page and also needs an embedded player for that. When you embed an audio player for your audio the reader can easily play the audio or listen to the audio without even downloading or opening any other audio player applications.There are many methods available to embed an audio player for your MP3 links.
Today we will discuss about the Yahoo! Media Player using which you can easily integrate your MP3 collection to the Yahoo! Media Player without much effort.
Yahoo! Media Player is an excellent tool with very simple configuration.

Embed Audio player for MP3 audio files with Yahoo! Media Player.

There are many flash players available that can embed on your page.If you have many audio files on your blog or maintain an MP3 blog or run a podcast and regularly link to MP3 files, it makes no sense to embed a separate Flash player with every MP3 file.There should be a common player that can be used to play all the files.
Yahoo! Media Player gives you exactly the above feature.All you have to do is insert one link to the JavaScript of Yahoo! Media Player in your blog template and all MP3 hyperlinks will be converted into inline MP3 players.It has a play-list feature that will create a play-list using all the mp3 files in your page.All the links can be played with one click, turning the page into a playlist.
Copy and paste the below code to your template page. Adding this Javascript to template code will ensure that this tool is available across all pages of your blog.This is the only configuration required.

1

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

This will add a play button next to each of your audio links:Yahoo! Media Player
For example see the below code for a simple HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

 
&lt;HTML&gt;
 &lt;HEAD&gt;
  &lt;TITLE&gt; New Document &lt;/TITLE&gt;
  &lt;META NAME=&quot;Generator&quot; CONTENT=&quot;EditPlus&quot;&gt;
  &lt;META NAME=&quot;Author&quot; CONTENT=&quot;&quot;&gt;
  &lt;META NAME=&quot;Keywords&quot; CONTENT=&quot;&quot;&gt;
  &lt;META NAME=&quot;Description&quot; CONTENT=&quot;&quot;&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;http://mediaplayer.yahoo.com/js&quot;&gt;&lt;/script&gt;
 &lt;/HEAD&gt;
 &lt;BODY&gt;&lt;FONT SIZE=&quot;2&quot; COLOR=&quot;&quot; face=&quot;verdana&quot;&gt;
  &lt;a href=&quot;http://www.globinch.com/audio/TextToSpeech.mp3&quot;&gt;TextToSpeech&lt;/a&gt;&lt;br/&gt;
  &lt;a href=&quot;http://www.globinch.com/audio/SimpleSEO.mp3&quot;&gt;SimpleSEO&lt;/a&gt;&lt;br/&gt;
  &lt;a href=&quot;http://www.globinch.com/audio/HowToGeek.mp3&quot;&gt;HowToGeek&lt;/a&gt;&lt;br/&gt;
  &lt;a href=&quot;http://www.globinch.com/audio/OpticalMagic.mp3&quot;&gt;OpticalMagic&lt;/a&gt;&lt;br/&gt;
  &lt;a href=&quot;http://www.globinch.com/audio/ReallyGood.mp3&quot;&gt;ReallyGood&lt;/a&gt;
  &lt;/FONT&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;

This will generate the below page with embedded Yahoo! Media Player. In the below screen-shot the Playlist is expanded. By default this will be collapsed.Yahoo! Media Player-Embed MP3 Audio PlayerVisit Yahoo! Media Player

, the author of Globinch.com, is a technology blogger and software architect. You can follow him on Twitter, Google+, Facebook. If you enjoyed reading the above article please consider sharing it.
If you enjoyed this article, please consider sharing it!
Reddit Facebook Twitter Delicious Mixx StumbleUpon Digg
  • Anandali

    Dear All,

    I created a little web document with this code and it generates the page with the embedded Yahoo Media Player as in the screenshot. The problem is that when I click on the arrows next to the MP3 files or on the player itself, I get no sound at all. The player “doesn’t play”!

    To test it further, I also replaced these MP3 files with some personal MP3s but the problem persists: no sound!

    What could be the problem?

    You can check my document at the following address: