Play Music And Video On Your Blog Using Yahoo Web Player

[Update Feb 2013] Update tutorial to reflect Yahoo!'s upgrade of Yahoo Media Player to Yahoo Web Player.
[Update Jul 2013] Unfortunately Yahoo has shutted down Yahoo! WebPlayer, so the service is no longer available.

So you want to add music (or video) to your blog? You want it playable right on your blog, yet you don’t want to annoy your readers with an auto-playing, difficult-to-stop audio? Well if that’s the case, you might want to consider a web-based music/audio player.

With Yahoo! Web Player, adding a music/video player and playing it in your blog has never been easier. You don’t need any trick to add this player, what you is only one line of code!

music player in blog

Yahoo Web Player is easy on your blog readers too because they won’t have to download or install anything. And they will have total control over the audio playback –when to start/stop, which file to play etc. The player supports MP3, WMA, WAV audio formats, and Yahoo! Video and YouTube video formats.

Visitors can start enjoying music and video in your blog in just three steps:


Step 1: Upload audio file to a web host

Just like the pictures or graphics used in your blog, your audio or video file must be hosted somewhere on the web, and the host must allow direct linking. Once uploaded, get the link to the file and use it in your blog.


Step 2: Adding audio/video link

Add the link to your file into your post, sidebar, footer or any part of your blog. The HTML format for the link is similar to that of a normal link. For example, below is the HTML code for the Yahoo! sample audio link in this article.

<a href="http://sites.google.com/site/bloggersentral/file-storage/GetaranJiwa.mp3">Sample audio 1</a>


Step 3: Adding Yahoo Web player code to Blogger

Copy and paste this code into your blog.

<script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"></script>

You can place the code:

  • In a HTML/Javascript gadget or
  • Inside your template –insert it right before </body> tag or
  • If you want to use the player just once (like what I am doing in this tutorial), place it in the post together with the audio/video links.

Once the web player code is added, it will scan your entire page for audio and video links, and then generates a playlist. I’ve added two audio and a video links below. Notice a play button in front of each link. They are added automatically by Yahoo! Web Player. Click either one to play.

Sample audio 1
Sample audio 2
Tron (Yahoo! Movie)

During the playback the player console pops up and floats on bottom left of your screen. The console can be minimized so it won’t take up your readers’ screen space.

For more information on the media player, go to Yahoo! Web Player website.

Enjoy!

Last update: December 12, 2011

39 comments to "Play Music And Video On Your Blog Using Yahoo Web Player"

Josh Darr June 27, 2009 at 5:45 AM    

Once you get to google sites how do you navigate to upload media files? I found where you go for docs but I dont think thats the right place.

Greenlava June 27, 2009 at 10:01 AM    

Josh,
After you logged in and create your site, you click Create Page button on top right. Once there, select File Cabinet, give a name to it and click Create Page button.
To upload a file, click on the file cabinet you've just created, and then click Add File button. A pop up will appear, click Browse to select the file inside your PC, the click Upload.

Josh Darr June 27, 2009 at 8:12 PM    

So I have the file uploaded, and I copied the link and posted it to the html. Is there any additional code I need to type with it? Im not sure what I did the link appears on the post but does not play when you press it?

Greenlava June 27, 2009 at 8:53 PM    

The Yahoo audio snippet plays ok from here. Did you disable Flash in your browser?

Josh Darr June 27, 2009 at 9:15 PM    

Okay, i fixed it...can you show me the proper way to hot link a site at the bottom of the post?

Greenlava June 27, 2009 at 9:48 PM    

The same way you link the audio file. In Edit HTML mode, go to the end of your post then add the HTML.

Josh Darr June 27, 2009 at 11:23 PM    

okay..cool, how come the links now show next to the read more even though they are at the end of the post?

Greenlava June 28, 2009 at 1:05 AM    

That's probably because you added the link after the < /span > (remember the < span id="therest" >?). Go to post editor Edit HTML mode and move the < /span > to the end of the post.

Josh Darr June 28, 2009 at 3:22 AM    

thats what i figured...but the html is way too confusing to do what you said...is there an email address i can email you the current ending of the html?

Greenlava June 28, 2009 at 10:04 AM    

You can see my email at the bottom of this page, under Contact.

Josh Darr June 28, 2009 at 10:41 AM    

i fixed it...took a break from it and came back, thank you again i really appreciate your help

Josh Darr July 4, 2009 at 10:23 AM    

seriously though, is there something wrong with my audio files or something?

Greenlava July 4, 2009 at 1:18 PM    

I'm not sure but I think it's the audio file. Could try something else, with smaller size.

Josh Darr July 9, 2009 at 5:40 AM    

Is there another entry about rss feed? how do they work?

Greenlava July 9, 2009 at 9:39 AM    

Yes there is: What is RSS ?

Indra 'Dandy' Pradana August 1, 2009 at 5:34 AM    

When i want to put the music inside my post, you said that i must insert the Yahoo media player's code, together with the audio link.

My question is :
what about the placement of the code's composition? Can i just copy-paste the YMP HTML code and then i copy-paste the audio link code right beside the first code? Or i'll need to put the audio link's code...IN THE MIDDLE of the YMP's code? Thanks!

Greenlava August 1, 2009 at 12:02 PM    

Separate the audio link and YMP code, but place it within the same post. You can put them one after another.
But remember, putting YMP code inside a post will activate YMP only when that page is displayed.

Indra 'Dandy' Pradana August 1, 2009 at 5:10 PM    

Resolved.
Thanks a lot

MONK September 18, 2009 at 1:08 AM    

OK..I give up...I got the slideshow on my blog..works great...now I'm trying to add music..have followed all of above instructions..uploaded my songs to esnips..got the URL and posted to HTML of blog along with the player and when I pull up the blog I get the Http url written into the blog and no sign of a player or list..what am I doing wrong....thanks

Greenlava September 18, 2009 at 9:47 PM    

MONK,
I don't think you can hotlink esnips files. To test your player, try putting this audio snippet in your post. See if the player comes out.
http://mediaplayer.yahoo.com/example2.mp3

rownie23 November 19, 2009 at 6:41 AM    

This might be a silly question, but where can I upload my audio files/host them from?

Greenlava November 19, 2009 at 5:21 PM    

rownie23,
Try FileAve or Google Sites.
Google "free audio hosting" for more...

samcruise December 26, 2009 at 12:25 AM    

hi...thanks for helping me out on the topic 'opening a link in new window'. I hav a question for u here in adding a music player to my blog.I have created a google site and uploaded a few mp3 files in it and right clicked on the download option to get the url and pasted it in the code in the blog. I can play the songs in the blog when i am logged into the googlesites but once i log out i cant play them...to be clear if my frnds want to listen to those songs on my blog they r nt able to...wat am i doing wrong...i hav tried uploading the file on 'fileave' and that works fine. I want to knw wat am i doing wrong with googlesites...

Greenlava December 26, 2009 at 7:38 PM    

samcruise,
Are you sure it's not due to some other reasons? I can listen to all 3 songs, even without logging in to Google sites.

xena submarina February 26, 2010 at 9:51 PM    

I can't make it work. Have gone thru steps a dozen times, here and with other blog help forums. You r post seems helpful. I added player code to gadget, using HTML deal. Nothing

I tried pasting it into ost. Nothing

I used file host for audio clip. Added address to replace your sample address. Got erroe message about opening bracket

Clearly I am deficient in blog skills

Greenlava February 26, 2010 at 10:32 PM    

@xena submarina
1. The link to scream.wav you put in your blog is not really a link (it's just a text), so the player ignores it. To make a link, follow Step 2: Adding audio link.
2. The link to scream.wav is not a direct link. For the file to play, you need direct link.
To check whether a link is a direct link, you copy the link and paste it your browser address bar and hit Enter. If your computer default music player or an "open file..." dialog pops up, then it's a direct link. If the link take you to a web page then it's not.

Fallen Angel May 16, 2010 at 11:29 AM    

its not working for me..pls help...

Greenlava May 17, 2010 at 9:17 AM    

@Fallen Angel
Could you be more specific?

wawan October 29, 2010 at 10:07 PM    

thank you. its work

Drupal video player February 15, 2011 at 6:18 PM    

Fantastic article! It works great, Thanks for the useful steps and code reference.......

Morgan February 26, 2011 at 10:46 PM    

How come I cant put other links that i dont want to play, yet they show up with the player?

Blu February 27, 2011 at 9:55 AM    

Is there a way to get then to Autoplay?

Greenlava February 27, 2011 at 11:49 AM    

@Morgan
Music file links will be included automatically, I'm afraid there's no way of stopping that.
(Yahoo media player wiki suggests adding a type="image/png" attribute into the link will prevent it from being included to the playlist. I tried, but it didn't work.)

@Blu
To autoplay, add this script after the player script:
[script type="text/javascript"]
var YMPParams = {autoplay:true}
[/script]

"Is there a way to get then to Autoplay?" - Blu! I was about to ask exactly the same query? Thanks in advance!

Greenlava April 9, 2011 at 9:50 PM    

@Wordpress Video Gallery
It was answered in reply#33.

Anonymous,  June 23, 2011 at 11:49 PM    

@Greenlava
when i put ur auto play comment it gives error
---> We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute "{1}" associated with an element type "type".

Greenlava June 25, 2011 at 5:25 PM    

@Anonymous
You probably left out the open quote in [script type="text/javascript"]

video service July 5, 2011 at 4:10 PM    

A very usefull article - Thank you very much I wish you will not mind me writting about this post on my blog I will also leave a linkback; As well, I will bookmark your web blog in hopes of potential updates. Thanks for sharing.

Yey! it worked! luv it! thanks so much!....not much of a techie here but with your help, my blogging life is so much easier..kudos!

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.

Click to go to top Click to comment