-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
59 lines (51 loc) · 17.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Document</title>
<style>
#center {
display: flex;
align-items: center;
justify-content: center;
}
#annoying-dog {
width: 125px; height:105px;
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%) scale(4);
}
#annoying-dog:before, #annoying-dog:after {
width: 5px; height: 5px; font-size: 5px;
position: absolute; content: "";
animation: ninja .4s step-start 0s infinite;
transform: translate(0, 0);
}
@keyframes ninja { 50% { opacity: 0; } }
#annoying-dog:before {
animation: ninja .4s step-start 0s infinite;
box-shadow: 03em 01em 0 #000, 05em 01em 0 #000, 06em 01em 0 #000, 07em 01em 0 #000, 08em 01em 0 #000, 10em 01em 0 #000, 02em 02em 0 #000, 04em 02em 0 #000, 09em 02em 0 #000, 11em 02em 0 #000, 02em 03em 0 #000, 11em 03em 0 #000, 02em 04em 0 #000, 12em 04em 0 #000, 19em 04em 0 #000, 01em 05em 0 #000, 04em 05em 0 #000, 07em 05em 0 #000, 13em 05em 0 #000, 18em 05em 0 #000, 20em 05em 0 #000, 01em 06em 0 #000, 14em 06em 0 #000, 15em 06em 0 #000, 18em 06em 0 #000, 20em 06em 0 #000, 01em 07em 0 #000, 05em 07em 0 #000, 06em 07em 0 #000, 16em 07em 0 #000, 17em 07em 0 #000, 18em 07em 0 #000, 20em 07em 0 #000, 01em 08em 0 #000, 03em 08em 0 #000, 05em 08em 0 #000, 08em 08em 0 #000, 20em 08em 0 #000, 01em 09em 0 #000, 04em 09em 0 #000, 05em 09em 0 #000, 06em 09em 0 #000, 07em 09em 0 #000, 20em 09em 0 #000, 01em 10em 0 #000, 20em 10em 0 #000, 01em 11em 0 #000, 20em 11em 0 #000, 01em 12em 0 #000, 20em 12em 0 #000, 01em 13em 0 #000, 20em 13em 0 #000, 01em 14em 0 #000, 19em 14em 0 #000, 02em 15em 0 #000, 19em 15em 0 #000, 02em 16em 0 #000, 05em 16em 0 #000, 06em 16em 0 #000, 09em 16em 0 #000, 10em 16em 0 #000, 11em 16em 0 #000, 12em 16em 0 #000, 15em 16em 0 #000, 16em 16em 0 #000, 19em 16em 0 #000, 02em 17em 0 #000, 04em 17em 0 #000, 06em 17em 0 #000, 09em 17em 0 #000, 12em 17em 0 #000, 15em 17em 0 #000, 16em 17em 0 #000, 18em 17em 0 #000, 03em 18em 0 #000, 06em 18em 0 #000, 07em 19em 0 #000, 08em 18em 0 #000, 12em 18em 0 #000, 14em 18em 0 #000, 13em 19em 0 #000, 17em 18em 0 #000, 17em 18em 0 #000;
}
#annoying-dog:after {
animation: ninja .4s step-end 0s infinite;
box-shadow: 03em 01em 0 #000, 05em 01em 0 #000, 06em 01em 0 #000, 07em 01em 0 #000, 08em 01em 0 #000, 10em 01em 0 #000, 02em 02em 0 #000, 04em 02em 0 #000, 09em 02em 0 #000, 11em 02em 0 #000, 02em 03em 0 #000, 11em 03em 0 #000, 02em 04em 0 #000, 12em 04em 0 #000, 01em 05em 0 #000, 04em 05em 0 #000, 07em 05em 0 #000, 13em 05em 0 #000, 01em 06em 0 #000, 14em 06em 0 #000, 15em 06em 0 #000, 01em 07em 0 #000, 05em 07em 0 #000, 06em 07em 0 #000, 16em 07em 0 #000, 17em 07em 0 #000, 18em 07em 0 #000, 19em 07em 0 #000, 20em 07em 0 #000, 21em 07em 0 #000, 22em 07em 0 #000, 01em 08em 0 #000, 03em 08em 0 #000, 05em 08em 0 #000, 08em 08em 0 #000, 23em 08em 0 #000, 01em 09em 0 #000, 04em 09em 0 #000, 05em 09em 0 #000, 06em 09em 0 #000, 07em 09em 0 #000, 20em 09em 0 #000, 21em 09em 0 #000, 22em 09em 0 #000, 01em 10em 0 #000, 20em 10em 0 #000, 01em 11em 0 #000, 20em 11em 0 #000, 01em 12em 0 #000, 20em 12em 0 #000, 01em 13em 0 #000, 20em 13em 0 #000, 01em 14em 0 #000, 19em 14em 0 #000, 02em 15em 0 #000, 19em 15em 0 #000, 02em 16em 0 #000, 05em 16em 0 #000, 06em 16em 0 #000, 09em 16em 0 #000, 10em 16em 0 #000, 11em 16em 0 #000, 12em 16em 0 #000, 15em 16em 0 #000, 16em 16em 0 #000, 19em 16em 0 #000, 02em 17em 0 #000, 05em 17em 0 #000, 06em 17em 0 #000, 08em 17em 0 #000, 12em 17em 0 #000, 14em 17em 0 #000, 16em 17em 0 #000, 18em 17em 0 #000, 19em 17em 0 #000, 02em 18em 0 #000, 04em 18em 0 #000, 07em 18em 0 #000, 13em 18em 0 #000, 16em 18em 0 #000, 18em 18em 0 #000, 03em 19em 0 #000, 17em 19em 0 #000;
}
</style>
<script type="text/javascript">
/* MidiPlayer - 3-clause BSD license - Copyright (c) 2015, Xin Chen <txchen@gmail.com> */
if('undefined'==typeof MidiPlayer){function a(n){if(n)if(document.createEvent){var p=document.createEvent('HTMLEvents');p.initEvent('ended',!1,!0),n.dispatchEvent(p)}else if(document.createEventObject){var q=document.createEventObject();n.fireEvent('onclick',q)}}function c(n,p,q){q||(q={});var r=q.latency||1,u=new Audio,v=window.AudioContext||window.webkitAudioContext,w=!1;if(v){function B(C){if(n.finished)return A.disconnect(),void a(p);for(var D=C.outputBuffer.getChannelData(0),E=C.outputBuffer.getChannelData(1),F=n.generate(y),G=0;G<y;++G)D[G]=F[2*G],E[G]=F[2*G+1]}context||(context=new v),sampleRate=context.sampleRate;var y=16384,A=context.createScriptProcessor(y,0,2);return A.onaudioprocess=function(C){B(C)},A.connect(context.destination),{stop:function(){A.disconnect(),w=!0},type:'Webkit Audio'}}}function d(n){function p(F){var G=F.read(4),H=F.readInt32();return{id:G,length:H,data:F.read(H)}}function q(F){var G={deltaTime:F.readVarInt()},H=F.readInt8();if(240==(240&H)){if(255==H){G.type='meta';var I=F.readInt8(),J=F.readVarInt();switch(I){case 0:if(G.subtype='sequenceNumber',2!=J)throw'Expected length for sequenceNumber event is 2, got '+J;return G.number=F.readInt16(),G;case 1:return G.subtype='text',G.text=F.read(J),G;case 2:return G.subtype='copyrightNotice',G.text=F.read(J),G;case 3:return G.subtype='trackName',G.text=F.read(J),G;case 4:return G.subtype='instrumentName',G.text=F.read(J),G;case 5:return G.subtype='lyrics',G.text=F.read(J),G;case 6:return G.subtype='marker',G.text=F.read(J),G;case 7:return G.subtype='cuePoint',G.text=F.read(J),G;case 32:if(G.subtype='midiChannelPrefix',1!=J)throw'Expected length for midiChannelPrefix event is 1, got '+J;return G.channel=F.readInt8(),G;case 47:if(G.subtype='endOfTrack',0!=J)throw'Expected length for endOfTrack event is 0, got '+J;return G;case 81:if(G.subtype='setTempo',3!=J)throw'Expected length for setTempo event is 3, got '+J;return G.microsecondsPerBeat=(F.readInt8()<<16)+(F.readInt8()<<8)+F.readInt8(),G;case 84:if(G.subtype='smpteOffset',5!=J)throw'Expected length for smpteOffset event is 5, got '+J;var K=F.readInt8();return G.frameRate={0:24,32:25,64:29,96:30}[96&K],G.hour=31&K,G.min=F.readInt8(),G.sec=F.readInt8(),G.frame=F.readInt8(),G.subframe=F.readInt8(),G;case 88:if(G.subtype='timeSignature',4!=J)throw'Expected length for timeSignature event is 4, got '+J;return G.numerator=F.readInt8(),G.denominator=Math.pow(2,F.readInt8()),G.metronome=F.readInt8(),G.thirtyseconds=F.readInt8(),G;case 89:if(G.subtype='keySignature',2!=J)throw'Expected length for keySignature event is 2, got '+J;return G.key=F.readInt8(!0),G.scale=F.readInt8(),G;case 127:return G.subtype='sequencerSpecific',G.data=F.read(J),G;default:return G.subtype='unknown',G.data=F.read(J),G;}return G.data=F.read(J),G}if(240==H){G.type='sysEx';var J=F.readVarInt();return G.data=F.read(J),G}if(247==H){G.type='dividedSysEx';var J=F.readVarInt();return G.data=F.read(J),G}throw'Unrecognised MIDI event type byte: '+H}else{var L;0==(128&H)?(L=H,H=r):(L=F.readInt8(),r=H);var M=H>>4;switch(G.channel=15&H,G.type='channel',M){case 8:return G.subtype='noteOff',G.noteNumber=L,G.velocity=F.readInt8(),G;case 9:return G.noteNumber=L,G.velocity=F.readInt8(),G.subtype=0==G.velocity?'noteOff':'noteOn',G;case 10:return G.subtype='noteAftertouch',G.noteNumber=L,G.amount=F.readInt8(),G;case 11:return G.subtype='controller',G.controllerType=L,G.value=F.readInt8(),G;case 12:return G.subtype='programChange',G.programNumber=L,G;case 13:return G.subtype='channelAftertouch',G.amount=L,G;case 14:return G.subtype='pitchBend',G.value=L+(F.readInt8()<<7),G;default:throw'Unrecognised MIDI event type: '+M;}}}var r;stream=g(n);var s=p(stream);if('MThd'!=s.id||6!=s.length)throw'Bad .mid file - header not found';var u=g(s.data),v=u.readInt16(),w=u.readInt16(),x=u.readInt16();if(32768&x)throw'Expressing time division in SMTPE frames is not supported yet';else ticksPerBeat=x;for(var y={formatType:v,trackCount:w,ticksPerBeat:ticksPerBeat},A=[],B=0;B<y.trackCount;B++){A[B]=[];var C=p(stream);if('MTrk'!=C.id)throw'Unexpected chunk - expected MTrk, got '+C.id;for(var E,D=g(C.data);!D.eof();)E=q(D),A[B].push(E)}return{header:y,tracks:A}}function f(n,p){function q(){var J={},K=PianoProgram;return{noteOn:function(L,M){J[L]&&!J[L].released&&J[L].noteOff(),generator=K.createNote(L,M),p.addGenerator(generator),J[L]=generator},noteOff:function(L,M){J[L]&&!J[L].released&&J[L].noteOff(M)},setProgram:function(L){K=PROGRAMS[L]||PianoProgram}}}function r(){for(var G=null,H=null,I=null,J=0;J<w.length;J++)null!=w[J].ticksToNextEvent&&(null==G||w[J].ticksToNextEvent<G)&&(G=w[J].ticksToNextEvent,H=J,I=w[J].nextEventIndex);if(null!=H){var K=n.tracks[H][I];n.tracks[H][I+1]?w[H].ticksToNextEvent+=n.tracks[H][I+1].deltaTime:w[H].ticksToNextEvent=null,w[H].nextEventIndex+=1;for(var J=0;J<w.length;J++)null!=w[J].ticksToNextEvent&&(w[J].ticksToNextEvent-=G);D={ticksToEvent:G,event:K,track:H};var L=G/y,M=L/(x/60);E+=M*p.sampleRate}else D=null,E=null,F.finished=!0}function s(G){for(var H=Array(2*G),I=G,J=0;;)if(null!=E&&E<=I){var K=Math.ceil(E);0<K&&(p.generateIntoBuffer(K,H,J),J+=2*K,I-=K,E-=K),u(),r()}else{0<I&&(p.generateIntoBuffer(I,H,J),E-=I);break}return H}function u(){var G=D.event;switch(G.type){case'meta':switch(G.subtype){case'setTempo':x=6e7/G.microsecondsPerBeat;}break;case'channel':switch(G.subtype){case'noteOn':C[G.channel].noteOn(G.noteNumber,G.velocity);break;case'noteOff':C[G.channel].noteOff(G.noteNumber,G.velocity);break;case'programChange':C[G.channel].setProgram(G.programNumber);}}}function v(G){console.log('replay'),G.write(s(44100)),setTimeout(function(){v(G)},10)}for(var w=[],x=120,y=n.header.ticksPerBeat,A=16,B=0;B<n.tracks.length;B++)w[B]={nextEventIndex:0,ticksToNextEvent:n.tracks[B].length?n.tracks[B][0].deltaTime:null};for(var C=[],B=0;B<A;B++)C[B]=q();var D,E=0;r();var F={replay:v,generate:s,finished:!1};return F}function g(n){function s(x){var y=n.charCodeAt(w);return x&&127<y&&(y-=256),w+=1,y}var w=0;return{eof:function(){return w>=n.length},read:function(x){var y=n.substr(w,x);return w+=x,y},readInt32:function(){var x=(n.charCodeAt(w)<<24)+(n.charCodeAt(w+1)<<16)+(n.charCodeAt(w+2)<<8)+n.charCodeAt(w+3);return w+=4,x},readInt16:function(){var x=(n.charCodeAt(w)<<8)+n.charCodeAt(w+1);return w+=2,x},readInt8:s,readVarInt:function(){for(var y,x=0;;)if(y=s(),128&y)x+=127&y,x<<=7;else return x+y}}}function h(n){var p={alive:!0},q=sampleRate/n,r=0;return p.generate=function(s,u,v){for(;v;v--){var w=r/q,x=Math.sin(2*w*Math.PI);s[u++]+=x,s[u++]+=x,r++}},p}function k(n,p,q,r,s,u){var v={alive:!0},w=sampleRate*r,x=sampleRate*(r+s),A=null,B=null,C=q/(sampleRate*u),D=0;return v.noteOff=function(){v.released||(A=D,v.released=!0,B=A+sampleRate*u)},v.generate=function(E,F,G){if(v.alive){for(var H=Array(2*G),I=0;I<2*G;I++)H[I]=0;for(n.generate(H,0,G),childOffset=0;G;)if(null!=A){if(D<B)for(;G&&D<B;){var J=q-C*(D-A);E[F++]+=H[childOffset++]*J,E[F++]+=H[childOffset++]*J,D++,G--}else return void(v.alive=!1);}else if(D<w)for(;G&&D<w;){var J=p*D/w;E[F++]+=H[childOffset++]*J,E[F++]+=H[childOffset++]*J,D++,G--}else if(D<x)for(;G&&D<x;){var J=p-(p-q)/(x-w)*(D-w);E[F++]+=H[childOffset++]*J,E[F++]+=H[childOffset++]*J,D++,G--}else for(;G;)E[F++]+=H[childOffset++]*q,E[F++]+=H[childOffset++]*q,D++,G--}},v}function l(n){return 440*Math.pow(2,(n-69)/12)}function m(n){function r(u,v,w){for(var x=w;x<w+2*u;x++)v[x]=0;for(var x=s.length-1;0<=x;x--)s[x].generate(v,w,u),s[x].alive||s.splice(x,1)}var s=[];return{sampleRate:n,addGenerator:function(u){s.push(u)},generate:function(u){var v=Array(2*u);return r(u,v,0),v},generateIntoBuffer:r}}var MidiPlayer=function(n,p,q,r,s){this.midi=n,this.target=document.getElementById(p),this.loop='undefined'!=typeof q&&q,this.max_loop_ct=q?'undefined'==typeof r?1:0>=r?0:r:1,this.end_callback='function'==typeof s?s:null,this.debug_div=null,this.midiFile=null,this.synth=null,this.replayer=null,this.audio=null,this.ct=0,this.started=!1,this.listener_added=!1};MidiPlayer.prototype.setDebugDiv=function(n){this.debug_div='undefined'==typeof n?null:document.getElementById(n)},MidiPlayer.prototype.debug=function(n){this.debug_div&&(this.debug_div.innerHTML+=n+'<br/>')},MidiPlayer.prototype.stop=function(){this.started=!1,this.ct=0,this.audio&&(this.audio.stop(),this.audio=null),0<this.max_loop_ct&&this.end_callback&&this.end_callback()},MidiPlayer.prototype.play=function(){this.started&&this.stop(),this.started=!0;var n=this.target,p=this,q=this.midi,r=this.loop;this.listener_added||(this.listener_added=!0,n&&n.addEventListener('ended',function(){0>=p.max_loop_ct||++p.ct<p.max_loop_ct?(p.replayer=f(p.midiFile,p.synth),p.audio=c(p.replayer,n,r),p.debug(q+': loop '+(1+p.ct))):0<p.max_loop_ct&&p.stop()},!1)),loadRemote(q,function(s){0==p.ct&&(p.midiFile=d(s),p.synth=m(44100)),p.replayer=f(p.midiFile,p.synth),p.audio=c(p.replayer,n,r),p.debug(q+': loop '+(1+p.ct))})};var loadRemote=function(n,p){var q=new XMLHttpRequest;q.open('GET',n),q.overrideMimeType?q.overrideMimeType('text/plain; charset=x-user-defined'):q.setRequestHeader('Accept-Charset','x-user-defined'),q.onreadystatechange=function(){if(4==this.readyState&&200==this.status){for(var r=this.responseText||'',s=[],u=r.length,v=String.fromCharCode,w=0;w<u;w++)s[w]=v(255&r.charCodeAt(w));p(s.join(''))}},q.send()},sampleRate=44100,context=null;PianoProgram={attackAmplitude:0.2,sustainAmplitude:0.1,attackTime:0.02,decayTime:0.3,releaseTime:0.02,createNote:function(n,p){var q=l(n);return k(h(q),this.attackAmplitude*(p/128),this.sustainAmplitude*(p/128),this.attackTime,this.decayTime,this.releaseTime)}},StringProgram={createNote:function(n,p){var q=l(n);return k(h(q),0.5*(p/128),0.2*(p/128),0.4,0.8,0.4)}},PROGRAMS={41:StringProgram,42:StringProgram,43:StringProgram,44:StringProgram,45:StringProgram,46:StringProgram,47:StringProgram,49:StringProgram,50:StringProgram}}
/* Undertale - Dog Song (Piano) by Toby Fox, https://musescore.com/user/5606791/scores/1580591 */
const annoyingsong = "data:audio/midi;base64,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JVCDRyUAGSlQACxQg0cpAAAsABklUINHJQAZKVAALFCDRykAACwAGSVQg0clABkpUAAsUINHKQAALAAZKlCDRyoAGS5QADFQg0cuAAAxABkqUINHKgAZLlAAMVCDRy4AADEAGSpQg0cqABkuUAAxUINHLgAAMQAZKlCDRyoAGS5QADFQg0cuAAAxABksUINHLAAZMFAAM1CDRzAAADMAggkwUAAzUIFjMAAAMwCDbTBQADNQg0cwAAAzAIIJMFAAM1CDRzAAADMAggkwUAAzUIFjMAAAMwCBfSpQg0cqABkuUAAxUINHLgAAMQAZKlCDRyoAGS5QADFQg0cuAAAxABkqUINHKgAZLlAAMVCDRy4AADEAGSpQg0cqABkuUAAxUINHLgAAMQAZJVCDRyUAGSlQACxQg0cpAAAsABklUINHJQAZKVAALFCDRykAACwAGSVQg0clABkpUAAsUINHKQAALAAZJVCDRyUAGSlQACxQg0cpAAAsABkqUINHKgAZLlAAMVCDRy4AADEAGSpQg0cqABkuUAAxUINHLgAAMQAZKlCDRyoAGS5QADFQg0cuAAAxABkqUINHKgAZLlAAMVCDRy4AADEAGTBQADNQADZQg0cwAAAzAAA2AIVpMFAAM1CDRzAAADMAggkwUAAzUAA2UINHMAAAMwAANgCCCTBQADNQADZQg0cwAAAzAAA2AIIJMFAAM1AANlCDRzAAADMAADYAg3kwUAAzUAA2UINHMAAAMwAANgAZMFAAM1AANlCBYzAAADMAADYAgQUwUAA1UAA4UIFjMAAANQAAOACBBTBQADNQADZQgWMwAAAzAAA2AINtMFAAM1AANlCDRzAAADMAADYAAf8vAA==";
document.addEventListener("DOMContentLoaded", () => {
const player = new MidiPlayer(annoyingsong, 'annoying-dog', true, 0);
player.play();
})
</script>
</head>
<body>
<div id="center">
<div id="annoying-dog"></div>
</div>
</body>
</html>