Hacking the Yahoo! Media Player

By Michael Ryvkin on Saturday, December 12, 2009

About the player

The Yahoo! Media Player enhances your web site or blog by creating an embedded player for each audio link. All the links can be played with one click, turning the page into a playlist. This is done by adding just one line of code to your page.

How to use

Please visit the Yahoo! Media Player web site (http://mediaplayer.yahoo.com/) for more information.

How to use a playlist

Please visit the Yahoo! Media Player public wiki (http://yahoomediaplayer.wikia.com/wiki/How_to_link) for more information.

Note that you will not be able to test the functionality on your local computer because Yahoo! Media Player uses external service to retrieve and process XSPF files. It was done to avoid cross-domain access limitation for Flash objects and JavaScript code.

View example

How to change a skin

If you want to dramatically change appearance of the player you would need to modify its skin. Default skin image can be download from Yahoo! server (alternative location). There is also another animated image used when player is minimized and playing a song, you can get it from Yahoo! server or alternative location).

Once you have downloaded the skin image, use your favorite image editing program to customize it. In order to apply the skin you would have to use the code below.

Instructions: Update path to your image file. Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Yahoo! Media Player: Change default skin */
#ymp-player .ymp-color-main {
  background-color:transparent !important;
}

.ymp-skin {
  background-image:url(/path/to/your/mediaplayer-skin.png) !important;
}

/* Avoid using animation (and loading additional image)
  when player is minimized */
#ymp-body #ymp-btn-max span.ymp-animarrow {
  background-position:-119px -80px !important;
}

If you want to use animated image for player in minimized state, instead of the last block above use this one below:

/* Use animated image for a button
  when the player is minimized and playing a song */
#ymp-body #ymp-btn-max span.ymp-animarrow {
  background:url(/path/to/your/mediaplayer-animarrow.gif) no-repeat scroll 0 0 transparent !important;
}

View example

How to adjust background color

Figure 1: Background color

Figure 1: Background color

Instructions: Update color values. Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Yahoo! Media Player: Set background color */
#ymp-player .ymp-color-main,
#ymp-tray .ymp-color-tray {
  background-color:#2F437C !important;
}

View example

How to adjust text color

Instructions: Update color values. Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Yahoo! Media Player: Set text color */
#ymp-player .ymp-color-text-main {
  color:#000000 !important;
}

How to update block with relevant information

You may want to display your own message in the relevant information block instead of the default “learn more about this player” link. To do so you will need link to your media like this:

a song relevant info for this song

Instructions: Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Yahoo! Media Player: */
/* Modify contents of the block with relevant information */
#ymp-relevant-info {
  display:block;
  position:absolute;
  left:2px;
  top:10px;
  width:116px;
  font-size:12px;
  font-weight:bold;
  line-height:13px;
  text-align:center;
  z-index:2;
} 

#ymp-relevant-info a {
  color:#3D9AD0;
}

.relevant-info {
  display:none;
}

Instructions: Insert the code below right after the line that embeds the player into your page.

<script type="text/javascript">
   function apiReadyHandler(){
      YAHOO.ympyui.util.Event.onDOMReady(UpdateRelevantInfo);
      YAHOO.MediaPlayer.onTrackStart.subscribe(UpdateRelevantInfo);
   }

   /*
      Written by Jonathan Snook, http://www.snook.ca/jonathan
      Add-ons by Robert Nyman, http://www.robertnyman.com

http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/

   */
   function getElementsByClassName(className, tag, elm){
      var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
      var tag = tag || "*";
      var elm = elm || document;
      var elements = (tag == "*" && elm.all)
                        ? elm.all
                        : elm.getElementsByTagName(tag);
      var returnElements = [];
      var current;
      var length = elements.length;
      for(var i=0; i<length; i++){
         current = elements[i];
         if(testClass.test(current.className)){
            returnElements.push(current);
         }
      }
      return returnElements;
   }

   function UpdateRelevantInfo() {
      // Default text
      var info = 'Visit ponticstar.com for more information';

      // Retrieve information about the track
      var meta = YAHOO.MediaPlayer.getMetaData();

      // If element with class "relevant-info" is available
      // inside the anchor, use its content instead
      if(meta && meta.anchor){
         var el = meta.anchor;
         var a = (el.getElementsByClassName)
                    ? el.getElementsByClassName("relevant-info")
                    : getElementsByClassName("relevant-info", null, el);
         if(a.length > 0){ info = a[0].innerHTML; }
      }

      document.getElementById('ymp-relevance').innerHTML = '

' + info + '


';
   }

   YAHOO.MediaPlayer.onAPIReady.subscribe(apiReadyHandler);
</script>

View example

How to remove block with relevant information

Figure 2: Relevant information block is removed

Figure 2: Relevant information block is removed

Player displays “Learn more about this player” link along with lyrics or related videos. If you are trying to minimize size of the player, use the code below.

Instructions: Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Yahoo! Media Player: */
/* Remove block with relevant information */
#ymp-relevance { display:none !important; }
.ymp-player-max #ymp-body { width:570px !important; }
.ymp-player-max #ymp-body #ymp-body-strip { width:557px !important; }
.ymp-player-max #ymp-body #ymp-body-base  { width:560px !important; }

View example

How to hide various buttons

Instructions: Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Hide 'close window' button */
#ymp-btn-close { display:none !important; }

/* Hide 'pop-up window' button */
#ymp-btn-pop { display:none !important; }

View example

How to change playlist colors

Figure 3: Playlist colors

Figure 3: Playlist colors

Instructions: Update color values. Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Yahoo! Media Player: Playlist colors */
/* Default color for playlist entries */
#ymp-tray .ymp-tray-track {
  color:#FFCE0C !important;
}

/* Highlighted track */
#ymp-tray .ymp-tray-track:hover {
  color:#FFFFFF !important;
  background-color:transparent !important;
}

/* Currently playing track */
#ymp-tray .ymp-tray-track.playing,
#ymp-tray .ymp-tray-track.playing:hover {
  color:#FFFFFF !important;
  background-color:#777777 !important;
}

How to display album art

Figure 4: Album art

Figure 4: Album art

You can set the image which is displayed in the player during a song. To do this, put an img element within the playable link.

For example:

<a href="example.mp3"><img src="example.png" alt="" />my song</a>

The dimensions of the image should be square, not rectangular. If you don’t want the image to show up directly in the main web page, add style="display:none" to your img tag:

<a href="example.mp3"><img src="example.png" alt="" style="display:none" />my song</a>

Source: http://yahoomediaplayer.wikia.com/wiki/How_to_link#Album_Art

View example

How to change default album art image

Insert the code below just before the line that embeds the player into your page.


<script type="text/javascript">
var YMPParams =
{
   defaultalbumart:'http://somedomain.com/path/someimage.gif'
};
</script>

Source: http://mediaplayer.yahoo.com/api/#param_defaultalbumart

How to hide album art

Figure 5: Hidden album art

Figure 5: Hidden album art

/* Yahoo! Media Player: Hide album art */
#ymp-meta-image { display:none !important; }
#ymp-body #ymp-meta-top,
#ymp-body #ymp-meta-bottom {
  left:8px !important;
  width:330px !important;
}

View example

How to start player in a new window

The code below tries to launch player in a new window automatically which allows user to navigate your site without interrupting the player. However my code for displaying pop-under window doesn’t work as expected for all browsers which results in pop-up window instead.

Instructions: Insert the code below right after the line that embeds the player into your page.

<script type="text/javascript">
    var ymp_pop_num_tries = 0;
    var ymp_pop_max_num_tries = 20;
    function ympPopPlayer(){
       var ymp = YAHOO.mediaplayer;
       if(ymp_pop_num_tries > ymp_pop_max_num_tries){ return; }
       if(ymp.Controller && ymp.Controller.view){
          // Create a pop-under window
          // works in IE, doesn't work in Firefox 3.5.x
          var ymp_pop = window.open("", "ymediaplayer");
          if(ymp_pop){ ymp_pop.blur(); }
          window.focus();

          ymp.Controller.view.popPlayer({});
       } else {
         ymp_pop_num_tries++;
         setTimeout(ympPopPlayer, 1000);
       }
    }

    function apiReadyHandler(){
       ympPopPlayer();
    }

    YAHOO.MediaPlayer.onAPIReady.subscribe(apiReadyHandler);
</script>

View example

How to disable Yahoo! search links

Instructions: Insert the code below right after the line that embeds the player into your page.

<script type="text/javascript">
   // Disable Yahoo! Media Player search links
   function apiReadyHandler(){
      YAHOO.MediaPlayer.onMediaUpdate.subscribe(DisableYahooLinks);
      YAHOO.MediaPlayer.onTrackStart.subscribe(DisableYahooLinks);
      setTimeout(DisableYahooLinks, 2000);
   }

   function DisableYahooLinks(){
      DisableLink(document.getElementById('ymp-meta-track-title'));
      DisableLink(document.getElementById('ymp-meta-artist-title'));
      DisableLink(document.getElementById('ymp-meta-image'));
      DisableLink(document.getElementById('ymp-meta-album-title'));
   }

   function DisableLink(el){
      if(el){
         el.href = 'javascript:void(0)';
         el.onclick = function(){ return false; };
      }
   }

   YAHOO.MediaPlayer.onAPIReady.subscribe(apiReadyHandler);
</script>

View example

How to change default settings

See http://mediaplayer.yahoo.com/api for more information.

How to hide the player

Sometimes you may want to display only small play button next to MP3 links. To hide the player use the code below.

Instructions: Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Yahoo! Media Player: Hide player */
#ymp-player,
#ymp-tray,
#ymp-error-bubble,
#ymp-secret-bubble {
  display:none !important;
}

There is another way to do it using parameter displaystate which is described at http://mediaplayer.yahoo.com/api/#param_displaystate

View example

How to hide MP3 links

Instructions: Append the following lines to CSS file or include them into HTML page somewhere in between <head> and </head> tags enclosing the block with tags <style type="text/css"> and </style>.

/* Yahoo! Media Player: Hide MP3 links */
.ymp-btn-page-play,
.ymp-btn-page-pause {
  display:none;
}

Links

Posted in Web Design
Permalink | RSS | Trackback | Bookmark and Share Post a comment

  • TheFreddy says:
    Wednesday, September 1, 2010 at 5:15 PM | Permalink

    Hey !
    Has any one figured out if there is anyway to upload content to the player through some sort of CMS – as opposed to needing to go into the html core – everytime you want to update your songs?

    Reply to this
  • james says:
    Thursday, September 2, 2010 at 12:13 AM | Permalink

    I successfully created some .xsfp playlists but how do you direct yahoo media player to play a specific song or group of songs. I have two separate playlists on the page with separate links but when I click either one it plays beginning of the whole page playlist with both.

    Reply to this

Your email is never shared. Required fields are marked with *.

*
*