In general, I’m not a big fan of anything Yahoo!, but the Yahoo! Media Player is actually a really cool and easy way to stream music from your site. The only unfortunate thing is that there is a long list of to-do’s on the Yahoo! wiki (some of which should be standard).
Trackseek, Trackresume, Trackfocus Hacks
The good news is that this guy Eric Fehrenbacher developed a few amazing hacks, but for some reason the hyperlinks to the javascript files arent’ available and he hasn’t been replying to comments.
I’ve been trying to get these hacks to work on my other site, so I went ahead and extracted the .js files. Copy these files and then link to them in your HTML header:
This code is necessary for all 3 hacks:
http://www.danceatthepostoffice.com/js/ef.ymp.utilities.js
And then you can choose which extension(s) you want:
http://www.danceatthepostoffice.com/js/trackseek.js http://www.danceatthepostoffice.com/js/trackresume.js http://www.danceatthepostoffice.com/js/trackfocus.js
I’m not taking any credit (or responsibility) I just extracted the code. Please don’t deep link to these files, copy the code to your own server, and then also check back with Eric’s site in the future as he’ll hopefully be making updates.
How To Remove “Learn More About This Player”
Also, I couldn’t figure out how he got rid of the “Learn More About This Player” link. So I made up my own simple hack with CSS, just add this to your stylesheet or header:
<style type="text/css">
#ymp-relevance {
visibility: hidden;
}
</style>
Thanks for doing this. I had a Learn More hack but it isn’t as good or as simple.
It’d be handy for others if you reposted your “Learn More” hack on goose.wikia.com, and maybe a link back here to your other comments.
Good idea Lucas, I put a link to this page on the wiki: http://yahoomediaplayer.wikia.com/wiki/Requests_and_Ideas
Excellent. Thanks for doing this. Do you happen to know how the code was originally licensed by Eric? Is it Creative Commons? GNU?
@Clint, I’m not sure how he licensed the files, I don’t see mention of it on his site or in the code
Here’s the site where he was sharing the code…take a look and let me know:
http://fehrenbacher.com/technology/code/ymp-trackseek/
Your tip is great
Couldn’t make it work in the header, but like a snap in an external style sheet… Thanks!
wow this trackseek is amazing but i’m really struggling with the removal of “learn more”
where do i put the code?
@pad …
do you know how to use CSS/HTML?
just add the code listed above within your HEAD tags:
if that doesn’t work post the URL and I’ll try to take a look
hi Chris
i’m kind of learning as i go along, using an ecommerce package.
i’ve managed to remove the “learn more” so i’m very pleased, thank you!
the seek bar is now causing me a real headache. it’s working on all my pages except possibly the most important one and i can’t for the life of me work out what’s gone wrong, it was working last night i’m sure.
please take a look at the problem page then check my other pages and you’ll see it’s working fine?!?!
http://tiny.cc/aeZOs
@pad …i looked at your page and it seems to be working fine for me. The only glitchy thing in general is that it usually takes 1-10 seconds to kick-in and work. Maybe Eric will update that code – we should probably check in.
hi Chris, yes it just started working on the faulty page an hour or so after i posted my last message! very weird but i’m happy’ish with it.
it does seem slow like you say though, hopefully future updates will improve things.
all the best, will keep an eye on this page.
Hi Chris, thank you very much for your website!
I was wondering, do you know if there is a way to get the default start volume to be 100% rather than the current 60-7%?
@aaron…
i havent looked into it too much, and im not sure if there is a way. You might want to check back with the yahoo wiki, or eric´s site (linked above) for updates on that. but i agree, it is a bit of a problem.
I modified the code snipped above to get rid of the empty space.
#ymp-relevance { visibility: hidden; } .ymp-player-max #ymp-body #ymp-body-base #ymp-body-strip { width: 560px; } .ymp-player-max #ymp-body.ymp-skin { width: 570px; }Used it on a project at http://www.arbiteronline.com – for the next couple days it’s just live right here: http://www.arbiteronline.com/2009/08/30/test-post/
I’m looking for a way to direct the buy button to a url through paypal instead of amazon.
Hey guys. I did as much research as I could, read this page up and down a few times and tried some of this code before I had to ask… I am not an advanced web-creator by any means. I am currently using Yahoo Media Player on my Blogger music blog and would love to have it work exactly like it does on Israel Shirk’s page.
http://www.arbiteronline.com/2009/08/30/test-post/
So i guess my question is where am I putting the code? when you said up top “I went ahead and extracted the .js files. Copy these files and then link to them in your HTML header:” Does that mean I need to download all 3 of those .js scripts and host them on my site? How do I link them in my HTML header? THEN…. where do I apply Israel Shrik code to remove the “learn more”?
If anyone could walk me through the process (or if its just one section of code I could copy?)
Sorry for the 20 questions, but you guys are the experts and its the perfect player for my music blog! THANK YOU guys for your time in advance.
-Bijan
headphonewhiplash.blogspot.com
@Bijan
so your first problem…with the code…..
1) Install the Yahoo script according to their directions
2) Copy/paste the code at these 3 URLs, and paste it into similarly named files on YOUR SERVER.
http://www.danceatthepostoffice.com/js/trackseek.js
http://www.danceatthepostoffice.com/js/trackresume.js
http://www.danceatthepostoffice.com/js/trackfocus.js
3) Then, on THIS page (my blog) View the source code (in your browser View Source)
-See the line with this link?
http://www.danceatthepostoffice.com/js/trackseek.js
-it begins with
-you need to copy that entire line, and the 2 below it
-BUT redirect the code to those 3 files on YOUR SERVER
so like headphonewhiplash.blogspot.com/js/trackresume.js
although maybe you don't have access to do that on blogspot? I don't know?
let me know how this works, ok?
it's actually really basic, so if this is confusing maybe ask a friend who knows some more about HTML/FTP
Works like a treat Chris. Had to edit the code in trackresume.js. Comment marker was in the wrong place at the beginning and you needed to add the ef.ymp.utilities script as well in the main code. Perfect. Just what I was looking for
Some files were not available on my site for awhile due to plugin problems with my wordpress install and me not noticing cause I was off the grid… should be good now.
I am noticing that these are being used without the utilities file. That file includes the cookie and md5 hash functions which the other scripts need to track files and positions. Without those the scripts should fail gracefully. That means they will not get in the way but the will not do their job either.
I have updated the utilities file recently with an improved md5 function.
I’m also hearing people having problems with trackseek and the slider causing songs to skip instead of seek. I have not been able to reproduce this error on the browsers I use(firefox and chrome). If some has a reproducible case I can look at I could possibly fix the problem.
@Eric
Thanks for the reply and updates.
Is the utilities update your referred to this file: http://fehrenbacher.com/lib/ef.ymp.utilities.js
I’ve never seen the trackseek problem you mentioned, the only (small) problem is that it takes 5 seconds to load before you can start moving the bar (even on your site, in FF). Thanks again for all your work on this!
Hi there, I’ve got some strange track-seek problems – have posted over at Eric’s site.
Any ideas?
Cheers!
@andrew – i went to your site and took a look. there is definitely a buffer on the track-seek… and because your track is so long you can really feel it. I’m not really sure about how that works… eric is the guy to talk to about that. I’ll keep updated and let you know if something changes.
I have been scouring various blogs & forums to find solutions for glitches i’m experiencing, but so far haven’t been able to find any mention of these problems. However, i’ve just noticed that you seem to be having the same issues with the player on this site.
1. the song info in the center white panel displaying too far over to the right. This seems to be linked to settings in the CSS (in my particulat case the links to the mp3 files are in a table, the table has a 10px margin > the text is offset by 10px) which would be almost imperceptible but for the target crosshairs overlapping the panel edge.
2. the volume slider, when it’s clicked on initially to move it, jumps to 100% & is then unmovable (except by shift arrowup/down). This seems to be a problem peculiar to Firefox 3.6. as I’m noticing the same problem here, but only in said browser.
Any ideas on a workaround for this?
i notice now that the volume slider works just fine as long as the page is parked all the way at the top; once you start to scroll the page down (in Firefox that is), the cursor’s contact spot for the slider moves further & further down the page.
Iv’e also noticed that while the trac is playing I only have the playtime displayed and not playtime/total time as on the player on your site. I have disabled all the hacks but still nothing.
I would really love to use this player on my site as it’s elegant & unobtrusive, but it seems quite temperemental & prone to disruption by other elements on the page.
My apologies, i can see now how that the counter shows total time once the whole trac has downloaded into the buffer, untill then there’s only a playtime count. Similarly, the tracseek only begins to move once it knows the total trac length.
The volume slider however, remains a mystery; i have a few add-ons in Firefox, it’s quite possible one of them is causing the problem as iv’e seen no-one else mention it.
@tristan – I agree, that sometimes the player can be a bit temperamental. For instance, sometimes on this post only (probably because of the code we’ve added) the music will just start playing after 1 minute without hitting play.
About the volume control: I hadn’t ever noticed this problem, I wonder if it is a new sideeffect of some yahoo updates. It seems to be happening in FF, and Safari. And even the original player on the yahoo site has the bug.
used the code like you posted, in the style sheet as-is, including how to get rid of blank space – anyone needing specific direction, i am glad to help. anyway, thx for the code in the first place – how did you learn which tags, names, etc, to use to address the msg and the blank space issue??
Hey Guys! I have been using this YMP Hack on my blog for some time now with great success! A good friend of mine also figured out the 100% volume issuse, so here is the complete script (with all of the other hack like the track seek, removed “learn more” etc. running as well!) Enjoy!
This code goes in the HEAD tag area:
Also, I know the problem of not being able to seek for the first 4-15seconds a song is playing it is not seek-able has been mentioned before: Currently if you click on the seek bar to try to advance it durring that first few seconds, it just starts the mp3 over again. Is this something that can be fixed or is it just a condition of how the song loads? Just curios…
@bijan yes, i know thats an annoying problem.
I’m not really sure if someone is working on that project? you think yahoo would be on top of integrating those changes
If you check out my site you will see i have implemented a few of the hacks listed here – i was wondering if someone knows how to include a purchase basket (linking to amazon/wherever) on the player?
Re: the seeking problem I mentioned before (and others)
I was reading around and it seems that the Yahoo Media Player doesn’t know the duration of a track until the whole track has been loaded into the buffer. Trackseek depends on the duration to calculate the elapsed time based on user-dragging, hence the seek doesn’t work until the entire track has been downloaded.
I don’t suppose this would be easily fixed, if at all. The best suggestion I can come up with is to disable track-seeking until the entire track has downloaded. At least that way you don’t confuse users with a bar that doesn’t appear to do anything!!
This blog claims that all 31 of the above comments was posted on “Sunday 29, 2010″. Not sure if that’s really true (August 29? That was a Sunday), but for the record – I’m posting this comment on Monday, September 6, 2010.
Regarding seeking, it’s true that track duration is not known until the track is fully loaded. However, it’s possible to seek forward or back without knowing the duration. The only requirement for seeking is that the track must have started playing. I’ve created a test page with a custom YMP player that includes seek forward and seek back buttons:
http://terrillthompson.com/tests/flash-yahoo3.html
These buttons seek forward or back in 15 second increments. They’re set to disabled=true by default, but I’m listening for the onTrackStart() event, and enabling these buttons once that event is triggered. If the 15 second interval results in a target position that is farther in the track than is currently loaded, the player simply advances to the farthest possible position in the track.
Underneath the name of the song, the media player by default displays the name of the server the mp3 file is on. Is there a way to either change this text or hide it completely?
@Glenn, really? I don’t think mine does that. Do you have a link to an example where I can see?
Chris,
My site isn’t live yet, so I can’t really show you. I just did the default set-up of the player, linked to an mp3 file on my server, and the server’s URL showed up underneath the song title. If you check out this guy’s blog, you’ll see the same thing though:
http://hindisongss.blogspot.com/
I did find a solution, by the way. Using Safari’s CSS inspector, I determined that the parameter that sets this is #ymp-meta-album-title, so adding the following before the tag did the trick:
#ymp-meta-album-title {
display:none !important;
}
This just removes the text altogether, which is fine, but it would be useful if there’s a way to change the text to something else instead. I couldn’t figure it out with my very limited CSS chops though. Any suggestions?
@Glenn, I see what you mean. It wouldn’t be possible to do that with CSS, you’d probably need some Javascript that took the “Title” from the parameter and output it within the player. So yeah, it’d require a bit more hacking.
Does the Yahoo Media Player work on the iphone/ipad? I don’t have either to test…. if not, is there something similar to YMP that works on those?
thanks
@Ashley, I just tried it on my iPhone. It displays, but doesn’t seem to play for me.
hello i have a question ,, i created everything according instructions, and i want to test this script on my local computer,, is this possible or i have to use a server ??
@Victor I’m not 100% sure, maybe give it a try and let us know? It should work if all the script is being hosted and linked to locally. But if you are using the YAHOO http links then you’d at least need to be hooked up to the internet.
Hi there
I have implemented the track seek/resume code within my website, but it doesn’t appear to be working. The trackbar comes up but the slider will not let me seek through the track. My “songs” are actually mixes so they are over 1 hour long. It takes around 3-4mins for the track length to appear, prior to that i assume seeking is not possible. Once this does appear though, it still will not let me move the track marker on the bar.
Also, when i press pause, the track restarts from the beginning upon pressing play again, so the “resume” code is not working either.
Any ideas/help?
Cheers
Mark
This thread seems to have been dropped, but I’m having the same problem as Mark and hope there might be a solution… when I press pause on a track, ex: http://foundscapes.com/archive/2_satanmonica/satanmonica.html (also one side of a mix, approx. 45 mins. total), it goes back to the beginning.
I appreciate any/all help!
Cheers,
N.
a new yahoo player is out. the hacks listet above arent’ working anymore