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

diciembre 28, 2015 0 Comentarios

Informatica

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

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

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *