jPlayer Jukebox add-on: Yahoo! Media Player replacement

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

Recommended For You

Online Courses

Online computer science courses to jumpstart your future.

You Might Also Like

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!

  2. 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?

  3. 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.

  4. 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?

  5. 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;
    }
    
      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.

  6. 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.

  7. 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?

  8. 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?

    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.

  9. 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.

  10. 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

  11. 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.

  12. 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?

Leave a Reply

You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.
(Optional)