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!
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 1Sample 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"
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.
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.
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?
The Yahoo audio snippet plays ok from here. Did you disable Flash in your browser?
Okay, i fixed it...can you show me the proper way to hot link a site at the bottom of the post?
The same way you link the audio file. In Edit HTML mode, go to the end of your post then add the HTML.
okay..cool, how come the links now show next to the read more even though they are at the end of the post?
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.
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?
You can see my email at the bottom of this page, under Contact.
i fixed it...took a break from it and came back, thank you again i really appreciate your help
seriously though, is there something wrong with my audio files or something?
I'm not sure but I think it's the audio file. Could try something else, with smaller size.
Is there another entry about rss feed? how do they work?
Yes there is: What is RSS ?
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!
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.
Resolved.
Thanks a lot
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
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
This might be a silly question, but where can I upload my audio files/host them from?
rownie23,
Try FileAve or Google Sites.
Google "free audio hosting" for more...
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...
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.
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
@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.
its not working for me..pls help...
@Fallen Angel
Could you be more specific?
thank you. its work
Fantastic article! It works great, Thanks for the useful steps and code reference.......
How come I cant put other links that i dont want to play, yet they show up with the player?
Is there a way to get then to Autoplay?
@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!
@Wordpress Video Gallery
It was answered in reply#33.
@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".
@Anonymous
You probably left out the open quote in [script type="text/javascript"]
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.