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
-
var cloudDiv;
-
var clouds = new Object();
-
var listcache = new Array();
-
var siteLib = songbird.siteLibrary;
-
var mainLib = songbird.mainLibrary;
-
const SB_NS = “http://songbirdnest.com/data/1.0#”;
-
/*****************************************************************************
-
*
-
* This example has 2 steps to it.
-
* 1) The first step is the fetching of the cloud of items for
-
* a given ‘menu’ item (from tagCloud.html) – Genre, Artist, Album, Year.
-
* The entry point is setCloud() and it creates a LibraryCloud object and
-
* caches it in the clouds object for performance reasons. Currently there
-
* is a downside to this caching that means newly added tracks won’t
-
* appear in the cloud until the page is re-loaded.
-
*
-
* The visual output of the cloud is the final phase of this step and is
-
* generated by the dumpCloud() method which outputs the html anchor
-
* elements containing the values in the cloud.
-
*
-
* 2) The second step covers the clicking of an item in the cloud. That
-
* action triggers a call to setWebPlaylist. That method pulls some data
-
* from the anchor element itself to populate a medialist that contains
-
* all the tracks that match that property/value pairing. These medialists
-
* are cached in the listCache array and suffer the same downside of lack
-
* of refresh.
-
*
-
****************************************************************************/
-
function load() {
-
cloudDiv = document.getElementById(“cloud”);
-
}
-
function unload() {
-
// remove all the garbage we just created.
-
siteLib.clear();
-
}
-
// debugging
-
function dump(stuff) {
-
cloudDiv.appendChild(document.createTextNode(stuff));
-
cloudDiv.appendChild(document.createElement(“br”));
-
}
-
// converts a percentage to a number that will be used to define the class
-
// so it matches the class names in tagCloud.css
-
function percentToClassNum( aPercent ) {
-
var classNum = 0;
-
if (aPercent>= 99)
-
classNum = 1;
-
else if (aPercent>= 70)
-
classNum = 2;
-
else if (aPercent>= 60)
-
classNum = 3;
-
else if (aPercent>= 50)
-
classNum = 4;
-
else if (aPercent>= 40)
-
classNum = 5;
-
else if (aPercent>= 30)
-
classNum = 6;
-
else if (aPercent>= 20)
-
classNum = 7;
-
else if (aPercent>= 10)
-
classNum = 8;
-
else if (aPercent>= 5)
-
classNum = 9;
-
return classNum;
-
}
-
function LibraryCloud( aPropertyName ) {
-
this.propName = aPropertyName;
-
this.values = new Array();
-
this.numItems = 0;
-
this.populateCloud();
-
}
-
// A cloud is the data representation for a particular property (propName)
-
// and all the values (and their frequency) in the main library.
-
LibraryCloud.prototype = {
-
SB_NS: “http://songbirdnest.com/data/1.0#”,
-
propName: “”,
-
values: null,
-
// this method gets all the possible values for a property and then
-
// counts the occurences of each. It then uses the count to generate
-
// a class number that will correspond to css which will size the display.
-
populateCloud: function() {
-
var valueEnum =
-
mainLib.getDistinctValuesForProperty( this.SB_NS + this.propName );
-
while ( valueEnum.hasMore() ) {
-
var propValue = valueEnum.getNext();
-
this.currentPropValue = propValue;
-
this.values[propValue] = new Array();
-
this.values[propValue].name = propValue;
-
this.values[propValue].numItems = 0;
-
mainLib.enumerateItemsByProperty( this.SB_NS + this.propName,
-
propValue, this, 1 );
-
}
-
for each ( var item in this.values ) {
-
item.percentage =
-
Math.floor(( item.numItems / this.numItems ) * 100);
-
item.classNum = percentToClassNum(item.percentage);
-
}
-
},
-
// implementation of enumeration listener to count the items
-
onEnumerationBegin: function() {
-
},
-
onEnumeratedItem: function(list, item) {
-
this.values[this.currentPropValue].numItems += 1;
-
this.numItems += 1;
-
},
-
onEnumerationEnd: function() {
-
}
-
}
-
// Generate anchor DOM elements for all the values in a library cloud
-
// and push them into the specified div.
-
function dumpCloud( aLibraryCloud, aCloudDiv ) {
-
aCloudDiv.innerHTML = “”;
-
for each ( var item in aLibraryCloud.values ) {
-
var span = document.createElement(“span”);
-
span.innerHTML = ” <a class=’size” + item.classNum + “‘ “ +
-
“href=’javascript:void(0);’ “ +
-
“propName=’” + aLibraryCloud.propName + “‘ “ +
-
“propKey=’” + SB_NS + aLibraryCloud.propName + “?val=” + item.name + “‘ “ +
-
“onclick=’javascript:setWebPlaylist(this);’>” +
-
item.name +
-
“</a> “;
-
aCloudDiv.appendChild(span);
-
}
-
}
-
// builds up the medialist to display – we’re taking items from the main
-
// library and adding them to a mediaList from the site library so we can’t
-
// test to see if they exist already because that does a GUID check and the
-
// item will never match because at the data model we are referring to 2
-
// different items.
-
var listener = {
-
_list: null,
-
onEnumerationBegin: function() {
-
// XXXredfive – name of list really should be the propkey
-
// but that is causing duplicate items in the list because
-
// we can’t compare across libraries for containment.
-
this._list = siteLib.createSimpleMediaList(Date());
-
},
-
onEnumeratedItem: function(list, item) {
-
if ( this._list ) {
-
// XXXredfive – should check to see if item is in list before adding but
-
// the item is mainLib and the list is siteLib
-
this._list.add(item);
-
}
-
},
-
onEnumerationEnd: function() {
-
}
-
};
-
// called by the link from one of the property values in the cloud
-
function setWebPlaylist(aAnchor) {
-
var prop = SB_NS + aAnchor.getAttribute(“propName”);
-
var propkey = aAnchor.getAttribute(“propKey”);
-
// use the cached list if there is one – it never gets refreshed
-
if ( typeof( listcache[propkey] ) != “undefined” ) {
-
songbird.webPlaylist.mediaList = listcache[propkey];
-
return;
-
}
-
// populate the list by iterating over the items with the property/value
-
// value that we’re asking for. listener does the work
-
mainLib.enumerateItemsByProperty( prop, aAnchor.innerHTML, listener, 1 );
-
// Cache the mediaList for quick access on subsequent loads.
-
listcache[propkey] = listener._list;
-
// Set the list as the web playlist.
-
songbird.webPlaylist.mediaList = listcache[propkey];
-
}
-
// entry point from the ‘menu’ links
-
function setCloud( aPropertyName, aPropertyEnumName ) {
-
// Cache the clouds for quick look-up. Property values won’t get seen until
-
// a refresh of the page.
-
if ( typeof( clouds[aPropertyName] ) == “undefined” )
-
clouds[aPropertyName] = new LibraryCloud(aPropertyName);
-
// XXXredfive – could be an else case here that does a refresh on the cloud
-
// to make sure it has all the current values for the property
-
// Display the tag cloud of values for the property name.
-
dumpCloud( clouds[aPropertyName], cloudDiv );
-
}
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