[Javascript-Songbird] Manipulando nuestra musica con Javascript y Songbird

Cuando deseamos escuchar musica, y vemos que reprodutor usar, mucha gente suele utilizar Windows Media, otra gran mayoria suele usar iTunes, alguinos mas usan Winamp, que son los mas usados.

Sin embargo la fundacion Mozilla, esta desarrollado desde hace bastante tiempo una alternativa bastante interesante, que se llama Songbird, de el cual hace algunos posts les platique.

Ahora van en la version 0.4

Tiene muchas cosas que talvez en muchos otros podremos encontrar sin embargo algo que no podemos ver como algo importante es que es “Open source”, y que ademas se puede personalizar a nuestros gusto.

Pero hay algo aun mas interesante, como esta desarrollado con XUL, se puede manipular con Javascript, claro que para esto debemos adentrarnos un poco con XUL y con SongBird.

Keisuke, Desarrollo un script el cual, valga la redundacia esta escrito en Javascript, muuy simple y sencillo que nos permite mostrar en forma de un nube de tags nuestra biblioteca.

solo basta introducir la url del script y Songbird nos pedira confirmacion para ejecutar dicho script y listo ya tenemos nuestra nube de tags.

El codigo de la pagina que se ejecuta es el siguiente

<html>

<head>

<link rel=”stylesheet” href=”/web/20080307173949cs_/http://www.ajaxman.net/tagCloud.css” />
<script type=”application/javascript”
src=”/web/20080307173949js_/http://www.ajaxman.net/tagCloud.js”>
</script>
</head>

<body onload=”load();” onunload=”unload();”>
<div id=”menu”>

<a class=”genre” href=”javascript:void(0);” onclick=”javascript:setCloud(‘genre’, ‘genres’);”>Genres</a>
<a class=”artist” href=”javascript:void(0);” onclick=”javascript:setCloud(‘artistName’, ‘artists’);”>Artists</a>
<a class=”album” href=”javascript:void(0);” onclick=”javascript:setCloud(‘albumName’, ‘albums’);”>Albums</a>
<a class=”year” href=”javascript:void(0);” onclick=”javascript:setCloud(‘year’, ‘years’);”>Years</a>
</div>
<div id=”cloud”>
</div>

</body>
</html>

Y el contenido de el archivo tagcloud.js es el siguiente

PLAIN TEXT
JAVASCRIPT:

  1. var cloudDiv;
  2. var clouds = new Object();
  3. var listcache = new Array();
  4. var siteLib = songbird.siteLibrary;
  5. var mainLib = songbird.mainLibrary;
  6. const SB_NS = “http://songbirdnest.com/data/1.0#”;
  7. /*****************************************************************************
  8. *
  9. *  This example has 2 steps to it.
  10. *  1) The first step is the fetching of the cloud of items for
  11. *     a given ‘menu’ item (from tagCloud.html) – Genre, Artist, Album, Year.
  12. *     The entry point is setCloud() and it creates a LibraryCloud object and
  13. *     caches it in the clouds object for performance reasons. Currently there
  14. *     is a downside to this caching that means newly added tracks won’t
  15. *     appear in the cloud until the page is re-loaded.
  16. *
  17. *     The visual output of the cloud is the final phase of this step and is
  18. *     generated by the dumpCloud() method which outputs the html anchor
  19. *     elements containing the values in the cloud.
  20. *
  21. *  2) The second step covers the clicking of an item in the cloud. That
  22. *     action triggers a call to setWebPlaylist. That method pulls some data
  23. *     from the anchor element itself to populate a medialist that contains
  24. *     all the tracks that match that property/value pairing. These medialists
  25. *     are cached in the listCache array and suffer the same downside of lack
  26. *     of refresh.
  27. *
  28. ****************************************************************************/
  29. function load() {
  30.   cloudDiv = document.getElementById(“cloud”);
  31. }
  32. function unload() {
  33.   // remove all the garbage we just created.
  34.   siteLib.clear();
  35. }
  36. // debugging
  37. function dump(stuff) {
  38.   cloudDiv.appendChild(document.createTextNode(stuff));
  39.   cloudDiv.appendChild(document.createElement(“br”));
  40. }
  41. // converts a percentage to a number that will be used to define the class
  42. // so it matches the class names in tagCloud.css
  43. function percentToClassNum( aPercent ) {
  44.     var classNum = 0;
  45.     if (aPercent>= 99)
  46.       classNum = 1;
  47.     else if (aPercent>= 70)
  48.       classNum = 2;
  49.     else if (aPercent>= 60)
  50.       classNum = 3;
  51.     else if (aPercent>= 50)
  52.       classNum = 4;
  53.     else if (aPercent>= 40)
  54.       classNum = 5;
  55.     else if (aPercent>= 30)
  56.       classNum = 6;
  57.     else if (aPercent>= 20)
  58.       classNum = 7;
  59.     else if (aPercent>= 10)
  60.       classNum = 8;
  61.     else if (aPercent>= 5)
  62.       classNum = 9;
  63.     return classNum;
  64. }
  65. function LibraryCloud( aPropertyName ) {
  66.   this.propName = aPropertyName;
  67.   this.values = new Array();
  68.   this.numItems = 0;
  69.   this.populateCloud();
  70. }
  71. // A cloud is the data representation for a particular property (propName)
  72. // and all the values (and their frequency) in the main library.
  73. LibraryCloud.prototype = {
  74.   SB_NS: “http://songbirdnest.com/data/1.0#”,
  75.   propName: “”,
  76.   values: null,
  77.   // this method gets all the possible values for a property and then
  78.   // counts the occurences of each. It then uses the count to generate
  79.   // a class number that will correspond to css which will size the display.
  80.   populateCloud: function() {
  81.     var valueEnum =
  82.       mainLib.getDistinctValuesForProperty( this.SB_NS + this.propName );
  83.     while ( valueEnum.hasMore() ) {
  84.       var propValue = valueEnum.getNext();
  85.       this.currentPropValue = propValue;
  86.       this.values[propValue] = new Array();
  87.       this.values[propValue].name = propValue;
  88.       this.values[propValue].numItems = 0;
  89.       mainLib.enumerateItemsByProperty( this.SB_NS + this.propName,
  90.                                         propValue, this, 1 );
  91.     }
  92.     for each ( var item in this.values ) {
  93.       item.percentage =
  94.         Math.floor(( item.numItems / this.numItems ) * 100);
  95.       item.classNum = percentToClassNum(item.percentage);
  96.     }
  97.   },
  98.   // implementation of enumeration listener to count the items
  99.   onEnumerationBegin: function() {
  100.   },
  101.   onEnumeratedItem: function(list, item) {
  102.     this.values[this.currentPropValue].numItems += 1;
  103.     this.numItems += 1;
  104.   },
  105.   onEnumerationEnd: function() {
  106.   }
  107. }
  108. // Generate anchor DOM elements for all the values in a library cloud
  109. // and push them into the specified div.
  110. function dumpCloud( aLibraryCloud, aCloudDiv ) {
  111.   aCloudDiv.innerHTML = “”;
  112.   for each ( var item in aLibraryCloud.values ) {
  113.     var span = document.createElement(“span”);
  114.     span.innerHTML = ” <a class=’size” + item.classNum + “‘ “ +
  115.                      “href=’javascript:void(0);’ “ +
  116.                      “propName=’” + aLibraryCloud.propName + “‘ “ +
  117.                      “propKey=’” + SB_NS + aLibraryCloud.propName + “?val=” + item.name + “‘ “ +
  118.                      “onclick=’javascript:setWebPlaylist(this);’>” +
  119.                      item.name +
  120.                      “</a> “;
  121.     aCloudDiv.appendChild(span);
  122.   }
  123. }
  124. // builds up the medialist to display – we’re taking items from the main
  125. // library and adding them to a mediaList from the site library so we can’t
  126. // test to see if they exist already because that does a GUID check and the
  127. // item will never match because at the data model we are referring to 2
  128. // different items.
  129. var listener = {
  130.   _list: null,
  131.   onEnumerationBegin: function() {
  132.     // XXXredfive – name of list really should be the propkey
  133.     //              but that is causing duplicate items in the list because
  134.     //              we can’t compare across libraries for containment.
  135.     this._list = siteLib.createSimpleMediaList(Date());
  136.   },
  137.   onEnumeratedItem: function(list, item) {
  138.     if ( this._list ) {
  139.       // XXXredfive – should check to see if item is in list before adding but
  140.       //              the item is mainLib and the list is siteLib
  141.       this._list.add(item);
  142.     }
  143.   },
  144.   onEnumerationEnd: function() {
  145.   }
  146. };
  147. // called by the link from one of the property values in the cloud
  148. function setWebPlaylist(aAnchor) {
  149.   var prop = SB_NS + aAnchor.getAttribute(“propName”);
  150.   var propkey = aAnchor.getAttribute(“propKey”);
  151.   // use the cached list if there is one – it never gets refreshed
  152.   if ( typeof( listcache[propkey] ) != “undefined” ) {
  153.     songbird.webPlaylist.mediaList = listcache[propkey];
  154.     return;
  155.   }
  156.   // populate the list by iterating over the items with the property/value
  157.   // value that we’re asking for. listener does the work
  158.   mainLib.enumerateItemsByProperty( prop, aAnchor.innerHTML, listener, 1 );
  159.   // Cache the mediaList for quick access on subsequent loads.
  160.   listcache[propkey] = listener._list;
  161.   // Set the list as the web playlist.
  162.   songbird.webPlaylist.mediaList = listcache[propkey];
  163. }
  164. // entry point from the ‘menu’ links
  165. function setCloud( aPropertyName, aPropertyEnumName ) {
  166.   // Cache the clouds for quick look-up. Property values won’t get seen until
  167.   //   a refresh of the page.
  168.   if ( typeof( clouds[aPropertyName] ) == “undefined” )
  169.     clouds[aPropertyName] = new LibraryCloud(aPropertyName);
  170.   // XXXredfive – could be an else case here that does a refresh on the cloud
  171.   //              to make sure it has all the current values for the property
  172.   // Display the tag cloud of values for the property name.
  173.   dumpCloud( clouds[aPropertyName], cloudDiv );
  174. }

Les deje el codigo para que vean como es muy sencillo hacer grandes cosas con Javascript,Ajax y Xul.

Gracias a Mozilla por darnos tanto poder usando solo Javascript

Mas Informacion de estos temas sobre Songbird en | Blog de Songbird en ingles

Leave a Comment

Your email address will not be published. Required fields are marked *