Fire JS Bin - SMSynthesizer

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

//JSiON --- SiON for javascript
//Wonderflと連携してSiONをjavascriptから扱うテスト
function JSiON(onReady) {
    JSiON._initialize();
    JSiON.mutex = this;
    if (onReady) this.onReady = onReady;
}

JSiON.prototype = {
//----- status
    isLoaded : false,
    isStreaming : false,
    isPaused : false,
//----- setter/getter
    volume   : function() { return JSiON.driver._volume(arguments[0]); },
    pan      : function() { return JSiON.driver._pan(arguments[0]); },
    position : function() { return JSiON.driver._position(arguments[0]); },
    bpm      : function() { return JSiON.driver._bpm(arguments[0]); },
//----- operation
    compile : function(mml) { return JSiON.driver._compile(mml); },
    stop    : function(fadeOutTime) { JSiON.driver._stop(fadeOutTime); },
    pause   : function() { JSiON.driver._pause(); },
    resume  : function() { JSiON.driver._resume(); },
    play    : function(dataID, fadeInTime) { JSiON.driver._play(dataID, fadeInTime); },
    playmml : function(mml, fadeInTime) { JSiON.driver._playmml(mml, fadeInTime); },
    noteOn : function(note, voiceID, length, delay, quant, trackID, params) {
        JSiON.driver._noteOn(note, voiceID, length, delay, quant, trackID, params);
    },
    noteOff : function(note, trackID, delay, quant) {
        JSiON.driver._noteOff(note, trackID, delay, quant);
    },
    sequenceOn : function(dataID, voiceID, length, delay, quant, trackID) {
        JSiON.driver._sequenceOn(dataID, voiceID, length, delay, quant, trackID);
    },
    sequenceOff : function(trackID, delay, quant) {
        JSiON.driver._sequenceOff(trackID, delay, quant);
    },
//----- setting
    createVoice : function(moduleType, channelNum, ar, rr, dt, connectionType, ws2, dt2) {
        return JSiON.driver._createVoice(moduleType, channelNum, ar, rr, dt, connectionType, ws2, dt2);
    },
//----- event handler
    onError : function(text) { alert(text); },
    onReady : function() {},
    onStream : function() {},
    onStreamStart : function() {},
    onStreamEnd : function() {},
    onFadeInComplete : function() {},
    onFadeOutComplete : function() {},
    onBeat : function() {},
    onTimer : function() {},
    onNoteOn : function() {},
    onNoteOff : function() {}
};

//---------- 
JSiON.VERSION = '0.1.0';
JSiON.SWF_VERSION = 'SWF has not loaded.';
JSiON.toString = function() { return 'JSiON_VERSION:' + JSiON.VERSION + '/ SWF_VERSION: ' + JSiON.SWF_VERSION; };
JSiON.domElementID = 'JSiON_DOM_ELEMENT';
JSiON.driver = undefined;
JSiON.mutex = undefined;
JSiON.swfURL = 'http://swf.wonderfl.net/swf/usercode/c/cb/cb8a/cb8a1c867c99b82a0d7d39080959272ec21226df.swf?'+(new Date()).getTime();
//JSiON.swfURL = 'jsion.swf';

//---------- internal functions
JSiON._initialize = function() {
    if (JSiON.mutex) throw "Cannot create plural JSiON instances";
    if (getFlashPlayerVersion(0) < 10) throw "flash player 10 is required";
    var o = document.createElement('object');
    o.id = JSiON.domElementID;
    o.classid = 'clsid:D27CDB6E-AE6D-11cf-96B8-444553540000';
    o.width = '1';
    o.height = '1';
    o.setAttribute('data', JSiON.swfURL);
    o.setAttribute('type', 'application/x-shockwave-flash');
    var p = document.createElement('param');
    p.setAttribute('name', 'allowScriptAccess');
    p.setAttribute('value', 'always');
    o.appendChild(p);
    document.body.appendChild(o);
};

function getFlashPlayerVersion(subs) {
    return (navigator.appName.indexOf("Microsoft")==-1) ? 
        navigator.plugins["Shockwave Flash"].description.match(/([0-9]+)/)[subs] : 
        (new ActiveXObject("ShockwaveFlash.ShockwaveFlash")).GetVariable("$version").match(/([0-9]+)/)[subs];
}

//---------- callback functions from swf
JSiON.__onLoad = function(version) {
    JSiON.SWF_VERSIOPM = version;
    JSiON.driver = document.getElementById(JSiON.domElementID);
    JSiON.mutex.onReady.call(JSiON.mutex);
};
JSiON.__onError           = function(text) { JSiON.mutex.onLoad.call(JSiON.mutex); };
JSiON.__onStream          = function() { JSiON.mutex.onStream(JSiON.mutex); };
JSiON.__onStreamStart     = function() { JSiON.mutex.onStreamStart(JSiON.mutex); };
JSiON.__onStreamStop      = function() { JSiON.mutex.onStreamStop(JSiON.mutex); };
JSiON.__onFadeInComplete  = function() { JSiON.mutex.onFadeInComplete(JSiON.mutex); };
JSiON.__onFadeOutComplete = function() { JSiON.mutex.onFadeOutComplete(JSiON.mutex); };
JSiON.__onNoteOn  = function(id, note) { JSiON.mutex.onNoteOn (JSiON.mutex, id, note); };
JSiON.__onNoteOff = function(id, note) { JSiON.mutex.onNoteOff(JSiON.mutex, id, note); };
JSiON.__onBeat  = function(count) { JSiON.mutex.onBeat(JSiON.mutex, count); };
JSiON.__onTimer = function(count) { JSiON.mutex.onTimer(JSiON.mutex, count); };

// Wonderflと連携してSiONをjavascriptから扱うテスト
// JSiON.lib; http://jsdo.it/keim_at_Si/JSiON
// JSiON.swf; http://wonderfl.net/c/t2AP
var jsion = new JSiON(function() {
  $("div.bgm,span.se").each(function(){
    var me = $(this);
    var id = jsion.compile(me.children("span.mml").text());
    me.attr("di", id).addClass("ready").hover(
        function(){me.addClass("mouseon")},
        function(){me.removeClass("mouseon")}
    )
  });
  $("div.bgm").click(
    function(){jsion.play($(this).attr("di"));}
  );
  $("span.se").click(
    function(){jsion.sequenceOn($(this).attr("di"));}
  );
  $("div#message").text("Ready");
  jsion.play(0);
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" /><title>Super Mario Synthesizer (JSiON.lib test) - js do it</title>
  <meta name="Description" content="jsdo.it - share JavaScript, HTML5 and CSS - " />
  <meta name="Keywords"  content="JavaScript,HTML5,CSS" />
  <script class="jsbin" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js"></script>
  </head>
<body>
<div class="bgm">ground
<span class="mml">
t200;#EFFECT0{speaker20};#A=o6eerercer grrr>grrr;#B=o6[2crr>grrer rarbra+ar gr24<er24gr24arfg rercd>brr];#C=o6[2[2rrgf+fd+re r>g+a<cr>a<cd |rrgf+fd+re r<crccrrr]>rrd+rrdrr crr2.];#D=o6[2ccrcrcdr ecr>agrrr |<ccrcrcde r1];#I=o5[2g+g+rg+rg+a+r gerecrrr |g+g+rg+rg+a+g r1];#E=o6[2ecr>grrg+r a<frf>arrr |br24<ar24ar24ar24gr24fr24 ecr>agrrr]b<frffr24er24dr24 crr2.;#F=o5f+f+rf+rf+f+r brr2.;#G=o5[2errcrr>gr r<crdrc+cr cr24gr24br24<cr>ab rarefdrr];#H=o6[2[2rred+d>br<c r>efgrcef |<rred+d>br<c rfrffrrr]>rrg+rrfrr err2.<];#J=o6[2c>arerrer f<crc>frrr |gr24<fr24fr24fr24er24dr24 c>arferrr]g<drddr24cr24>br24 gerecrrr;#K=o4ddrdrddr <grrr>grrr;#L=o4[2grrerrcr rfrgrf+fr er24<cr24er24frde rcr>abgrr];#M=o4[2[2crrgrr<cr >frr<ccr>fr |crrerrg<c r<grggr>>gr]crg+rra+rr <crr>ggrcr];#N=o3[3g+rr<d+rrg+r grrcrr>gr];#O=o4[2crrf+gr<cr >frfr<cc>fr |drrfgrbr grgr<cc>gr]grrggr24ar24br24 <cr>grcrrr;#X=v15o1q1s38g16r8.;#Y=v10o5q1s36c16;#Z=v8o5q5s34c8r8;#P=ZYrZYrZZrrZYrYrYr;#Q=XYrrYZYrrY;#R=Yr4rYrZYr8.;t200;%0@0l8v10q5s34A$BCDABEEDAE;%0@0l8v10q5s34F$GHIFGJJIFJ;%5@3l8v12q8s63K$LMNKLOONKO;%2@0l16P$[Q]24[P]4[Q]8[R]16[P]4[R]8;
</span></div>
<div class="bgm">underground
<span class="mml">
t200;#EFFECT0{speaker20};#A=[2c<c>>a<a>a+<a+r2.][2>f<f>d<d>d+<d+r2|r4]d+12d12c+12crd+rdr>g+rgr<c+rl12cf+fea+ag+.Rd+.R>b.Ra+.Ra.Rg+.Rr1.;%1@4v10q5s34l8o5$A;%1@8v12q8s63l8o4$A;
</span></div>
<div class="bgm">sea
<span class="mml">
t113;#EFFECT0{speaker20};#TABLE10{0,32,64,80,104,128};%1@4s39na10o4v14l16q7$o5d8e8f+8g8a8a+8bbbrbrb4g8<e4r8d+4r8e4r8r>gab<cde4r8d+4f8e4r8r4r>g<d4r8c+4r8d4r8r>gab<cc+d4r8>g4<f8e4r8r4r>g<g4r8g4r8g4r8g8ar8gf4r8f4 r8f4r8f8gr8fe4r8>a8b8<f8eee8.>b<c4r8;%1@4s63na10o4v14l16q7$o5d8c+8c8>b8<c8c+8dddrerf4.g4r8f+4r8g4r8r4r8g4r8f+4a8g4r8r4r8f4r8e4r8f4r8r4r8f4r8>b4<a8g4r8r4r8<e4r8d4r8c+4r8r4r8d4r8c+4r8c4r8r4r8>c4r8f8g8b8bbb8.fe4r8;%5@3s63q8o4v16l8$r1g16r16g4.q4cg<c>>b<gbcg<c>eg<c>cg<c>>b<gbcg<c>eg<c>dgbc+f+a+dgb>b<gbdgb>b<gbcg<c>>g<g<c>cg<e>>b<g<d>>a+<g<c+>c+g<e>da<f>c+a<f>ca<f>>b<g<f>>c<g<e>>g<ggqf16f16f.>b16<c4.;%2@0s60q2v13$o7r8q1c8q3o6c8o7q2r8c16c16q3o6c8;
</span></div>
<div class="bgm">castle
<span class="mml">
t180;#EFFECT0{speaker20};o6l8q1s29r64$r16[2dd-cd-de-dd-][2d-cd-dd-dd-c][2fg-fefee-|e]e16;o5l16q1s31r64$[2gb-gaga-gagb-gbgb-ga][2f+af+a-f+af+b-f+af+b-f+af+a-][2a+<d>a+<e->a+<d>a+<d->a+<d>a+<d->a+<c>a+<d->];%5@0q8s63l2o4$e-1dg-f1eb-aee-e;
</span></div>
<div class="bgm">star
<span class="mml">
t152;#EFFECT0{speaker20};#REV;%0@0s32o6v10l8$q3cccq7<d16q3>ccq7<d16q3>c16q3<d16q3>c<bbbq7c16q3bbq7c16q3b16q7c16q3b;%0@0s32o5v10l8$q3fffq7d16q3ffq7d16q3f16q7d16q3feeeq7c16q3eeq7c16q3e16q7c16q3e;%5@3s40o4v16l8$q6drar16>drr16<a>dcrgr16>crr16<g>c;%2@0$o5q4s60c24r24r24o6q2c24r24c24o6q7c24r24r24q2c24r24c24;
</span></div>
<div class="bgm">warp
<span class="mml">
t200;%1@4s63q8l64o7[e>ad<e>ad>gc>f>a+r16]3;
</span></div>
<div class="bgm">hurry up
<span class="mml">
t200;#EFFECT0{speaker20};l12%0v8s63q7o5e<drddr>f<d+rd+d+r>f+<ereerfrf2>;l12%0v8s63q7o5>e<g+6g+g+6>f<a6aa6>f+<a+6a+a+6brb2;l12%3v8s63q6o5>b<b6bb6c<c6cc6>c+<c+6c+c+6>>g6g2<;
</span></div>
<div class="bgm">stage clear
<span class="mml">
t200;#EFFECT0{speaker20};#TABLE10{0,32,64,80,104,128};#REV;%1@4s39na10o4v14l8q8g>ceg>ceg4.e4.<<g+>cd+g+>cd+g+4.d+4.<<a+>dfa+>dfa+4.a+a+a+>c2;%1@4s63na10o4v14l8q8ceg>ceg>c4.<g4.<cd+g+>cd+g+>c4.<g+4.<dfa+>dfa+>d4.ddde2;%5@3s63q8o4v16l8gegceg>e4.cr4<g+d+g+cd+g+>d+4.cr4<a+fa+dfa+>f4.dddc2;
</span></div>
<div class="bgm">area clear
<span class="mml">
t200;#EFFECT0{speaker20};%0s63o6l8c>ge<c>ge<c2.c+>g+f<c+>g+f<c+2.d+>a+g<d+>a+g<d+4.l6fffg1.;%0s63o5l8ec>g<ec>g<ee16e16eeeefc+>g+<fc+>g+<ff16f16ffffgd+>a+<gd+>a+<gg16g16gl6aaab1.;%5@3s63q6o4l8c2.cc16c16ccccc+2.c+c+16c+16c+c+c+c+a+gd+a+gd+a+a+16a+16a+<l6cccd1.;
</span></div>
<div class="bgm">all clear
<span class="mml">
t200;#EFFECT0{speaker20};#TABLE10{0,32,64,80,104,128};#REV;%1@4s39na10o5v14l8q8$gf+ge2r4f4.f+4.g2r4>c4.e4ed4.e4.f4.<b4.>d2r4c4.<;%1@4s63na10o4v14l8q8$r4.g2r4a4.a+4.b2r4>e4.g4gf4.g4.a4.d4.f4.r4.e4.<;%5@3s63q8o3v16l8$b4.>c2.d4.d+4.e4.c4.a4.g4.f4.e4.d4.f4.g4.<g4.>c4.;
</span></div>
<div class="bgm">miss
<span class="mml">
t200;#EFFECT0{speaker20};%1@4s39v14q6l8r^2b<frff6e6d6cr1;%1@4s27,-45v14q0l8o4<b16b16b16r16r^4g<drdd6c6>b6gerecr2;%1@8s41v16q7l8r^2o4gr4gg6a6b6<c>grgcr2;
</span></div>
<div class="bgm">gameover
<span class="mml">
t200;#EFFECT0{speaker20};#TABLE10{0,32,64,80,104,128};%1@4s39v14q7l4na10,1o5e8rc8ro4go5f2f^2e8d8e2;%1@4s63v14q8l4na10,1o6c8ro5g8rea8.b8a8.g+a+g+g2.;%5@3s38v16q7l4o4g8re8rcs25f2c+2.c2..;
</span></div>
<br/>
<span class="se">item
<span class="mml">
t200;#A=cggg+g+c+;%1@4s63q8l64o5A(0)A(1)A(2)A(3);
</span></span>
<span class="se">iteml
<span class="mml">
t200;#A=cggg+g+c+;%1@4s63q8l64o5A(0)A(1)A(2)A(3)A(4)A(5)A(6)A(7);
</span></span>
<span class="se">powerup
<span class="mml">
t200;%1@2s63q8l32o6c>g<ceg<c>g>g+<cd+g+d+g+b+<d+g+d+>>a+<dfa+fa+<dfa+f64;
</span></span>
<span class="se">jump
<span class="mml">
t200;#TABLE2{(128,0)12,0};#TABLE3{(90,934)12};%1@4s63q8o5a32@2na2,2np3,2g2;
</span></span>
<span class="se">jumpl
<span class="mml">
t200;#TABLE2{(128,0)12,0};#TABLE3{(90,934)12};%1@4s63q8o5d32@2na2,2np3,2c2;
</span></span>
<span class="se">poke
<span class="mml">
t200;%1@4s63l128o5b-<cr16f64;
</span></span>
<span class="se">fumi
<span class="mml">
t200;#TABLE0{(0,128)8};#TABLE1{(0,384)8};%1@4s63q8l10na0np1o5a<gnanp;
</span></span>
<br/>
<br/>
<span class="se">dom
<span class="mml">
t200;#TABLE4{(0,-1280)4};%1@4s63q8l64np4,2o4a-16npc+&d+&f&f+;
</span></span>
<span class="se">fire
<span class="mml">
t200;%1@4s63q8l64o4g<g<g<g<g;
</span></span>
<span class="se">cion
<span class="mml">
t200;%1@4s63q8l16q0s22o6b<e;
</span></span>
<span class="se">extend
<span class="mml">
t200;%1@4s63q0s24l9o7eg<ecdq8s63g;
</span></span>
<span class="se">goal
<span class="mml">
t200;#TABLE7{(0,36)36};%1@4s63q8o4nt7,2b-1;
</span></span>
<span class="se">bonus
<span class="mml">
t200;%1@4s63q7l64o6[b]80;
</span></span>
<span class="se">firework
<span class="mml">
t200;#TABLE5{(0,-1280)6};#TABLE6{(0,-2560)6};%1@4s63q8l64np5,2o4c+8<np6,2c+6np;
</span></span>
<br/><br/>
<div id="message">Loading JSiON.swf ...</div>

</body>
</html>

Pop out