requirebin sketch

index.js

var getJSON = require('get-json');

var APIs = [
	'http://lullabytunes.org/api.json',
  'http://tevlihev.org/api.json',
	'http://kizilok.org/api.json'
];

var Song = function(title, album, url) {
  this.title = title;
  this.album = album;
  this.url = url;
};

var player = {
  albums: [],
  queue: [],
  currentIndex: null,
  
  el: document.createElement('div'),
  
  init: function(urls) {
    var promises = [];
    
    urls.forEach((function(url) {
      promises.push(this.fetch(url));
    }).bind(this));
    
    Promise.all(promises).then(this.load.bind(this));
  },
  
  fetch: function(url) {
    return new Promise((function(resolve, reject) {
      getJSON(url, (function(error, response) {
        if (error) {
          reject(error);
        } else {
          resolve(response);
        }
      }).bind(this));
    }).bind(this));
  },
  
  load: function(data) {
    this.albums = data.map(function(response) {
      return response.result;
    });
      
    this.albums.forEach((function(album) {
      Object.keys(album.songs).forEach((function(key) {
        var song = new Song(key, album.title, album.songs[key]);
        this.queue.push(song);
      }).bind(this));
    }).bind(this));
    
    this.shuffle();
    this.next();
  },
  
  shuffle: function() {
    var unshuffled = this.queue.length - 1;
    for (var i = this.queue.length - 1; i >= 0; i--) {
      var shuffleAt = Math.floor(Math.random() * unshuffled);
      var holder = this.queue[i];
      this.queue[i] = this.queue[shuffleAt];
      this.queue[shuffleAt] = holder;
    }
  },
    
  render: function() {
    var song = this.getCurrentSong();
    
    this.el.innerHTML = '';
    
    var label = document.createElement('h3');
    if (song) {
    	label.innerHTML = 'Playing: ' + song.title + ' from ' + song.album;
    } else {
      label.innerHTML = 'Not playing';
    }
    this.el.appendChild(label);
    
    var button = document.createElement('button');
    button.addEventListener('click', this.next.bind(this));
    button.innerHTML = 'Next';
    this.el.appendChild(button);
  },
  
  next: function() {
    if (typeof this.currentIndex === 'number' && this.currentIndex < this.queue.length - 1) {
      this.currentIndex++;
    } else {
      this.currentIndex = 0;
    }
    
    this.render();
  },
  
  getCurrentSong: function() {
    if (this.currentIndex !== null && this.queue[this.currentIndex]) {
      return this.queue[this.currentIndex];
    } else {
      return null;
    }
  }
};

player.init(APIs);
document.querySelector('body').appendChild(player.el);

minified.js

require=function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){var process=module.exports={};process.nextTick=function(){var canSetImmediate=typeof window!=="undefined"&&window.setImmediate;var canPost=typeof window!=="undefined"&&window.postMessage&&window.addEventListener;if(canSetImmediate){return function(f){return window.setImmediate(f)}}if(canPost){var queue=[];window.addEventListener("message",function(ev){var source=ev.source;if((source===window||source===null)&&ev.data==="process-tick"){ev.stopPropagation();if(queue.length>0){var fn=queue.shift();fn()}}},true);return function nextTick(fn){queue.push(fn);window.postMessage("process-tick","*")}}return function nextTick(fn){setTimeout(fn,0)}}();process.title="browser";process.browser=true;process.env={};process.argv=[];function noop(){}process.on=noop;process.addListener=noop;process.once=noop;process.off=noop;process.removeListener=noop;process.removeAllListeners=noop;process.emit=noop;process.binding=function(name){throw new Error("process.binding is not supported")};process.cwd=function(){return"/"};process.chdir=function(dir){throw new Error("process.chdir is not supported")}},{}],2:[function(require,module,exports){module.exports=require("jsonp")},{jsonp:4}],3:[function(require,module,exports){(function(process){module.exports=!!(typeof process!="undefined"&&process.versions&&process.versions.node)}).call(this,require("_process"))},{_process:1}],4:[function(require,module,exports){var debug=require("debug")("jsonp");module.exports=jsonp;var count=0;function noop(){}function jsonp(url,opts,fn){if("function"==typeof opts){fn=opts;opts={}}if(!opts)opts={};var prefix=opts.prefix||"__jp";var param=opts.param||"callback";var timeout=null!=opts.timeout?opts.timeout:6e4;var enc=encodeURIComponent;var target=document.getElementsByTagName("script")[0]||document.head;var script;var timer;var id=prefix+count++;if(timeout){timer=setTimeout(function(){cleanup();if(fn)fn(new Error("Timeout"))},timeout)}function cleanup(){script.parentNode.removeChild(script);window[id]=noop}window[id]=function(data){debug("jsonp got",data);if(timer)clearTimeout(timer);cleanup();if(fn)fn(null,data)};url+=(~url.indexOf("?")?"&":"?")+param+"="+enc(id);url=url.replace("?&","?");debug('jsonp req "%s"',url);script=document.createElement("script");script.src=url;target.parentNode.insertBefore(script,target)}},{debug:5}],5:[function(require,module,exports){exports=module.exports=require("./debug");exports.log=log;exports.formatArgs=formatArgs;exports.save=save;exports.load=load;exports.useColors=useColors;exports.colors=["lightseagreen","forestgreen","goldenrod","dodgerblue","darkorchid","crimson"];function useColors(){return"WebkitAppearance"in document.documentElement.style||window.console&&(console.firebug||console.exception&&console.table)||navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/)&&parseInt(RegExp.$1,10)>=31}exports.formatters.j=function(v){return JSON.stringify(v)};function formatArgs(){var args=arguments;var useColors=this.useColors;args[0]=(useColors?"%c":"")+this.namespace+(useColors?" %c":" ")+args[0]+(useColors?"%c ":" ")+"+"+exports.humanize(this.diff);if(!useColors)return args;var c="color: "+this.color;args=[args[0],c,"color: inherit"].concat(Array.prototype.slice.call(args,1));var index=0;var lastC=0;args[0].replace(/%[a-z%]/g,function(match){if("%%"===match)return;index++;if("%c"===match){lastC=index}});args.splice(lastC,0,c);return args}function log(){return"object"==typeof console&&"function"==typeof console.log&&Function.prototype.apply.call(console.log,console,arguments)}function save(namespaces){try{if(null==namespaces){localStorage.removeItem("debug")}else{localStorage.debug=namespaces}}catch(e){}}function load(){var r;try{r=localStorage.debug}catch(e){}return r}exports.enable(load())},{"./debug":6}],6:[function(require,module,exports){exports=module.exports=debug;exports.coerce=coerce;exports.disable=disable;exports.enable=enable;exports.enabled=enabled;exports.humanize=require("ms");exports.names=[];exports.skips=[];exports.formatters={};var prevColor=0;var prevTime;function selectColor(){return exports.colors[prevColor++%exports.colors.length]}function debug(namespace){function disabled(){}disabled.enabled=false;function enabled(){var self=enabled;var curr=+new Date;var ms=curr-(prevTime||curr);self.diff=ms;self.prev=prevTime;self.curr=curr;prevTime=curr;if(null==self.useColors)self.useColors=exports.useColors();if(null==self.color&&self.useColors)self.color=selectColor();var args=Array.prototype.slice.call(arguments);args[0]=exports.coerce(args[0]);if("string"!==typeof args[0]){args=["%o"].concat(args)}var index=0;args[0]=args[0].replace(/%([a-z%])/g,function(match,format){if(match==="%%")return match;index++;var formatter=exports.formatters[format];if("function"===typeof formatter){var val=args[index];match=formatter.call(self,val);args.splice(index,1);index--}return match});if("function"===typeof exports.formatArgs){args=exports.formatArgs.apply(self,args)}var logFn=enabled.log||exports.log||console.log.bind(console);logFn.apply(self,args)}enabled.enabled=true;var fn=exports.enabled(namespace)?enabled:disabled;fn.namespace=namespace;return fn}function enable(namespaces){exports.save(namespaces);var split=(namespaces||"").split(/[\s,]+/);var len=split.length;for(var i=0;i<len;i++){if(!split[i])continue;namespaces=split[i].replace(/\*/g,".*?");if(namespaces[0]==="-"){exports.skips.push(new RegExp("^"+namespaces.substr(1)+"$"))}else{exports.names.push(new RegExp("^"+namespaces+"$"))}}}function disable(){exports.enable("")}function enabled(name){var i,len;for(i=0,len=exports.skips.length;i<len;i++){if(exports.skips[i].test(name)){return false}}for(i=0,len=exports.names.length;i<len;i++){if(exports.names[i].test(name)){return true}}return false}function coerce(val){if(val instanceof Error)return val.stack||val.message;return val}},{ms:7}],7:[function(require,module,exports){var s=1e3;var m=s*60;var h=m*60;var d=h*24;var y=d*365.25;module.exports=function(val,options){options=options||{};if("string"==typeof val)return parse(val);return options.long?long(val):short(val)};function parse(str){var match=/^((?:\d+)?\.?\d+) *(ms|seconds?|s|minutes?|m|hours?|h|days?|d|years?|y)?$/i.exec(str);if(!match)return;var n=parseFloat(match[1]);var type=(match[2]||"ms").toLowerCase();switch(type){case"years":case"year":case"y":return n*y;case"days":case"day":case"d":return n*d;case"hours":case"hour":case"h":return n*h;case"minutes":case"minute":case"m":return n*m;case"seconds":case"second":case"s":return n*s;case"ms":return n}}function short(ms){if(ms>=d)return Math.round(ms/d)+"d";if(ms>=h)return Math.round(ms/h)+"h";if(ms>=m)return Math.round(ms/m)+"m";if(ms>=s)return Math.round(ms/s)+"s";return ms+"ms"}function long(ms){return plural(ms,d,"day")||plural(ms,h,"hour")||plural(ms,m,"minute")||plural(ms,s,"second")||ms+" ms"}function plural(ms,n,name){if(ms<n)return;if(ms<n*1.5)return Math.floor(ms/n)+" "+name;return Math.ceil(ms/n)+" "+name+"s"}},{}],"get-json":[function(require,module,exports){var isNode=require("is-node");var nodeRequire=require;module.exports=isNode?nodeRequire("./lib/node"):require("./lib/browser")},{"./lib/browser":2,"is-node":3}]},{},[]);var getJSON=require("get-json");var APIs=["http://lullabytunes.org/api.json","http://tevlihev.org/api.json","http://kizilok.org/api.json"];var Song=function(title,album,url){this.title=title;this.album=album;this.url=url};var player={albums:[],queue:[],currentIndex:null,el:document.createElement("div"),init:function(urls){var promises=[];urls.forEach(function(url){promises.push(this.fetch(url))}.bind(this));Promise.all(promises).then(this.load.bind(this))},fetch:function(url){return new Promise(function(resolve,reject){getJSON(url,function(error,response){if(error){reject(error)}else{resolve(response)}}.bind(this))}.bind(this))},load:function(data){this.albums=data.map(function(response){return response.result});this.albums.forEach(function(album){Object.keys(album.songs).forEach(function(key){var song=new Song(key,album.title,album.songs[key]);this.queue.push(song)}.bind(this))}.bind(this));this.shuffle();this.next()},shuffle:function(){var unshuffled=this.queue.length-1;for(var i=this.queue.length-1;i>=0;i--){var shuffleAt=Math.floor(Math.random()*unshuffled);var holder=this.queue[i];this.queue[i]=this.queue[shuffleAt];this.queue[shuffleAt]=holder}},render:function(){var song=this.getCurrentSong();this.el.innerHTML="";var label=document.createElement("h3");if(song){label.innerHTML="Playing: "+song.title+" from "+song.album}else{label.innerHTML="Not playing"}this.el.appendChild(label);var button=document.createElement("button");button.addEventListener("click",this.next.bind(this));button.innerHTML="Next";this.el.appendChild(button)},next:function(){if(typeof this.currentIndex==="number"&&this.currentIndex<this.queue.length-1){this.currentIndex++}else{this.currentIndex=0}this.render()},getCurrentSong:function(){if(this.currentIndex!==null&&this.queue[this.currentIndex]){return this.queue[this.currentIndex]}else{return null}}};player.init(APIs);document.querySelector("body").appendChild(player.el);

package.json

{
  "name": "requirebin-sketch",
  "version": "1.0.0",
  "dependencies": {
    "get-json": "0.0.2"
  }
}

page-head.html

<style type='text/css'>html, body { margin: 0; padding: 0; border: 0; }
body, html { height: 100%; width: 100%; }</style>

requirebin.md

made with requirebin