jPlayer Jukebox add-on: Yahoo! Media Player replacement

Michael Ryvkin
2 2

Yahoo! Media Player was a great audio and video player and definitely had its niche because of its simplicity and rich functionality. However Yahoo! decided to halt its further development on June 30, 2013, see this announcement for more information.

There was a temporary workaround to make the player work after June 30, 2013, but it’s no longer applicable.

Jaap Spitz and Eric Din attempted to revitalize the player, but these attempts possibly conflict with Yahoo! Terms of Service.

After seeing that no direct replacement is available I have created an add-on (jPlayer Jukebox) for jPlayer media library to replicate Yahoo! Media Player functionality.

Please visit dedicated jPlayer Jukebox add-on page for demo, installation and usage information.

Initial version doesn’t support all of the Yahoo! Media Player functionality, features will be gradually added based on feedback from users.

jPlayer Jukebox add-on

jPlayer Jukebox add-on on mobile device

You May Also Like

jQuery DataTables: Row selection using checkboxes and Select extension
jQuery DataTables: Row selection using checkboxes
Hacking the Yahoo! Media Player
jQuery DataTables: Why click event handler does not work
Michael Ryvkin

Freelance web developer based in Perkasie, Bucks County, PA. I design and develop custom websites and web applications, perform website maintenance and provide technical support for small and medium-sized businesses.

Contact me for a free quote or consultation on your project.

Comments

  1. Super happy to find this actual YMP replacement, everything else I’ve seen is demonstrably worse. This, however, is awesome.

    I have one feature request. On my WordPress blog, I use the Infinite Scroll plugin to extend the homepage rather than having people click through pagination for older posts. With YMP I was able to use the callback capability of Infinite Scroll to trigger a playlist re-build after the plugin appended new posts to the end of the page which made all the new links playable. I can’t seem to suss out how to do that with jPlayerJukebox.

    If this capability is already available, my apologies. I’m no JavaScript developer, it’s possible I’m overlooking something obvious.

    Thanks!

    Reply

  3. Hi Michael, I looked through the developer options and couldn’t find what I was looking for. Is there a way to make the player auto-appear when clicking a link, rather than manually toggling?

    Reply

  4. Michael,

    I’m in the same situation with Michael S. When a user clicks the play button, I would like to toggle the player open.

    In addition, how can I make the play button larger? I see the .jp-page-btn-play and .jp-page-btn-pause CSS classes. I thought about replacing them with font awesome some how. Thoughts?

    And thanks for this.

    Reply

  5. My player is showing the name of the file rather than the text of the link (like Yahoo MP did). Is there an option to change this behaviour?

    Reply

    1. Use title attribute to set song title, for example <a href="filename.mp3" title="Song title">click here</a>. This is undocumented for now, thank you for bringing it to my attention.

      Reply

  6. I’ve been working to find a solution, but I’m afraid I’m not skilled enough with syntax. I want the player to maximize anytime an mp3 link is clicked on. I believe this will require api (after initialization) code. Any suggestions?

    Reply

  7. Michael,

    I implemented the jPlayer Jukebox add-on (see code at bottom) on my website and it works (plays, displays, etc.) fine on my PC (with Chrome browser). However, when I tried it with my mobile phone (Moto E with Chrome browser), the jPlayer Jukebox tab that floats on the bottom left doesn’t collapse to the left when the mobile phone is in the vertical position…it does work fine (does collapse) when the phone is in the horizontal position.

    This problem also occurs on the http://www.gyrocode.com/projects/jplayer-jukebox/ website.

    Please let me know if you will be providing a fix for this.

    Thanks…

       $(document).ready(function(){
      // Initialize jPlayerJukebox
      var jpjb = new jPlayerJukebox({
         'jukeboxOptions': {
            'position': 'float-bl',
	    'uiCover': 'true',
	    'className': 'ui-dark ui-flat'
         }
      });
   });



.jp-jukebox .jp-gui-bg {
  background-color:#000000 !important;
}
    Reply

      1. OK, but the problem with that feature is that the player covers over some of the website contents at the bottom of the page. For example, on http://www.gyrocode.com/projects/jplayer-jukebox, the text under “Action is the basis of success. Fortune” can’t be seen due the player covering it over….the only way to see the text is to position the phone horizontally.

        Reply

  8. Hi Michael — this is such a terrific player and I have used it quite a bit. Thank you many, many times!

    Yahoo Media Player had an option we liked: Whether or not the text of the audio link actually triggered the player or remained a direct link to the file. We always preferred to set it so that the automatically inserted play button triggered the player, but the text to the right (that links to the mp3 file) remains a direct link. Is this possible in any way?

    We have an old, huge website that isn’t responsively designed (hopefully some day soon that will change!), and many of our mobile users like using their browsers built-in player via clicking on the mp3 link text directly.

    Reply

  9. There is a problem which could be related to this, my links wont display that play button on left side? i am using php to display files like this: echo '<a href="client/music/'.$file.'" rel="nofollow">'.$file.'</a>';
    which gives this output <a href="client/music/my song id1.mp3" rel="nofollow">my song id1.mp3</a>. The files are displayed on playlist but no play button next to links. How to fix this?

    Reply

  10. Sorry didn’t know how links display on comment here. Fixed Displaying mp3 files with this echo '<a href="client/music/'.$file.'" rel="nofollow">'.$file.'</a>'; And output is this <a href="client/music/my song id1.mp3" rel="nofollow">my song id1.mp3</a> Play button on left side doesnt display like in examples. How to fix?

    Reply

    1. You’re also adding class="jp-media" in PHP, this is class that player adds to the links that are already processed, that’s why play button doesn’t appear. Remove class="jp-media" from your code and it should work.

      Reply

  11. Fabulous! What a find this is! My archived Yahoo! Player only just not working for me in Firefox and Chrome, but still does in IE curiously. It was only matter of time.

    Reply

  12. I embedded script in Blogger template. The player works fine, but there is no small play button shown before the mp3 link. What do I miss? Please advise.

    Reply

  13. I want display the play button on the left side of the MP3 link.
    I want click on the link to start the play.
    It is possible?
    Thanks
    Viky

    Reply

  14. Truly excellent work, so grateful to have a player that performs like the old Yahoo Media Player. Only improvement I can think of would be to have a volume control, but apart from that it’s a beautifully elegant solutiion. Thank you Michael.

    Reply

  15. Thanks for the great work! I want to get rid of the black play button altogether as I’m linking from an image. Can I get rid of the button?

    Reply

  19. Could you tell me how to make the player play all of the tracks in the list rather than just the one I click on? It did it before but now stops after playing one track.

    Thank you Michael,

    Edie

    Reply

      1. Thanks for the answer, I put it to test on my blog and it worked. Sorry for ignorance I would like to know if you have how to put to play a video of youtube instead of mp3, similar to the site https://scmplayer.co/ where you can add a link from youtube in the music player.
        Thank you very much in advance.

        Reply

Leave a Reply

(optional)

This site uses Akismet to reduce spam. Learn how your comment data is processed.