File
Login or Register via GitHub
<html> <head> <script src='https://surikov.github.io/webaudiofont/npm/dist/WebAudioFontPlayer.js'></script> <script src='https://surikov.github.io/webaudiofontdata/sound/12836_6_JCLive_sf2_file.js'></script> <script src='https://surikov.github.io/webaudiofontdata/sound/12840_6_JCLive_sf2_file.js'></script> <script src='https://surikov.github.io/webaudiofontdata/sound/12842_6_JCLive_sf2_file.js'></script> <script src='https://surikov.github.io/webaudiofontdata/sound/12846_6_JCLive_sf2_file.js'></script> <script src='https://surikov.github.io/webaudiofontdata/sound/0390_Aspirin_sf2_file.js'></script> <script src='https://surikov.github.io/webaudiofontdata/sound/0480_Chaos_sf2_file.js'></script> <script src='https://surikov.github.io/webaudiofontdata/sound/0550_Chaos_sf2_file.js'></script> <script> var AudioContextFunc = window.AudioContext || window.webkitAudioContext; var audioContext = new AudioContextFunc(); var player = new WebAudioFontPlayer(); player.loader.decodeAfterLoading(audioContext, '_drum_36_6_JCLive_sf2_file'); player.loader.decodeAfterLoading(audioContext, '_drum_40_6_JCLive_sf2_file'); player.loader.decodeAfterLoading(audioContext, '_drum_42_6_JCLive_sf2_file'); player.loader.decodeAfterLoading(audioContext, '_tone_0390_Aspirin_sf2_file'); player.loader.decodeAfterLoading(audioContext, '_tone_0480_Chaos_sf2_file'); player.loader.decodeAfterLoading(audioContext, '_drum_46_6_JCLive_sf2_file'); player.loader.decodeAfterLoading(audioContext, '_tone_0550_Chaos_sf2_file'); var gainDrums = audioContext.createGain();gainDrums.connect(audioContext.destination);gainDrums.gain.value=0.5; var gainSynth = audioContext.createGain();gainSynth.connect(audioContext.destination);gainSynth.gain.value=0.3; var gainBass = audioContext.createGain();gainBass.connect(audioContext.destination);gainBass.gain.value=0.7; var gainHit = audioContext.createGain();gainHit.connect(audioContext.destination);gainHit.gain.value=0.5; var bpm = 120; var N = 4 * 60 / bpm; var pieceLen = 4 * N; var beatLen=1/16 * N; var C2 = 0+12*2, c2 = 1+12*2, D2 = 2+12*2, d2 = 3+12*2, E2 = 4+12*2, F2 = 5+12*2, f2 = 6+12*2, G2 = 7+12*2, g2 = 8+12*2, A2 = 9+12*2, a2 = 10+12*2, B2 = 11+12*2; var C3 = 0+12*3, c3 = 1+12*3, D3 = 2+12*3, d3 = 3+12*3, E3 = 4+12*3, F3 = 5+12*3, f3 = 6+12*3, G3 = 7+12*3, g3 = 8+12*3, A3 = 9+12*3, a3 = 10+12*3, B3 = 11+12*3; var C4 = 0+12*4, c4 = 1+12*4, D4 = 2+12*4, d4 = 3+12*4, E4 = 4+12*4, F4 = 5+12*4, f4 = 6+12*4, G4 = 7+12*4, g4 = 8+12*4, A4 = 9+12*4, a4 = 10+12*4, B4 = 11+12*4; var C5 = 0+12*5, c5 = 1+12*5, D5 = 2+12*5, d5 = 3+12*5, E5 = 4+12*5, F5 = 5+12*5, f5 = 6+12*5, G5 = 7+12*5, g5 = 8+12*5, A5 = 9+12*5, a5 = 10+12*5, B5 = 11+12*5; var C6 = 0+12*6, c6 = 1+12*6, D6 = 2+12*6, d6 = 3+12*6, E6 = 4+12*6, F6 = 5+12*6, f6 = 6+12*6, G6 = 7+12*6, g6 = 8+12*6, A6 = 9+12*6, a6 = 10+12*6, B6 = 11+12*6; var started = false; var startTime = 0; for(var i=0;i<_tone_0480_Chaos_sf2_file.zones.length;i++){ _tone_0480_Chaos_sf2_file.zones[i].ahdsr=false; } function orchestra(pitch, duration){return {gain:gainHit,preset:_tone_0550_Chaos_sf2_file,pitch:pitch,duration:duration*N};} function synth(pitch, duration){return {gain:gainSynth,preset:_tone_0480_Chaos_sf2_file,pitch:pitch,duration:duration*N};} function bass(pitch, duration){return {gain:gainBass,preset:_tone_0390_Aspirin_sf2_file,pitch:pitch,duration:duration*N};} function drum(){return {gain:gainDrums,preset:_drum_36_6_JCLive_sf2_file,pitch:36,duration:1};} function snare(){return {gain:gainDrums,preset:_drum_40_6_JCLive_sf2_file,pitch:38,duration:1};} function hihat(){return {gain:gainDrums,preset:_drum_42_6_JCLive_sf2_file,pitch:42,duration:1};} function open(){return {gain:gainDrums,preset:_drum_46_6_JCLive_sf2_file,pitch:46,duration:1};} function nextPiece() { for (var n = 0; n < notes.length; n++) { var beat = notes[n]; for (var i = 0; i < beat.length; i++) { if (beat[i]) { player.queueWaveTable(audioContext, beat[i].gain, beat[i].preset, startTime + n * beatLen , beat[i].pitch, beat[i].duration); } } } } function start() { if (started) { console.log('started already'); } else { started = true; startTime = audioContext.currentTime + 0.1; nextPiece(); startTime = startTime + pieceLen; setInterval(function () { if (audioContext.currentTime > startTime - 1 / 4 * N) { nextPiece(); startTime = startTime + pieceLen; } }, 20); } }var notes=[ [hihat(),drum(), bass(C3,1/16),orchestra(C5,1/4),synth(C3,1/1),synth(C4,1/1),synth(G3,1/1),synth(C5,1/2),synth(d5,3/8)]//1/16,[hihat() ],[open(), bass(C3,1/16) ],[ bass(C3,1/16) ],[hihat(),drum(),snare(),bass(C3,1/16) ],[hihat(), bass(C3,1/16) ],[open(), bass(C3,1/16), synth(D5,1/8) ],[ bass(C3,1/16) ],[hihat(),drum(), bass(C3,1/16), synth(C5,1/8) ],[hihat(), bass(C3,1/16), synth(C3,1/1) ],[open(), synth(D5,1/8) ],[ bass(C3,1/16) ],[hihat(),drum(),snare(),bass(C3,1/16), synth(d5,1/8) ],[hihat(), bass(C3,1/16) ],[open(), bass(C3,1/16),orchestra(G4,1/8),synth(G5,1/8) ],[ bass(C3,1/16) ],[hihat(),drum(), bass(G2,1/16),orchestra(a5,1/4),synth(G3,1/1),synth(G4,1/1),synth(D5,3/1),synth(a5,3/8) ]//16/16,[hihat() ],[open(), bass(G2,1/16) ],[ bass(G2,1/16) ],[hihat(),drum(),snare(),bass(G2,1/16) ],[hihat(), bass(G2,1/16) ],[open(), bass(G2,1/16), synth(A5,1/8) ],[ bass(G2,1/16) ],[hihat(),drum(), bass(G2,1/16), synth(G5,1/8) ],[hihat(), bass(G2,1/16) ],[open(), bass(G2,1/16), synth(A5,1/8) ],[ bass(G2,1/16) ],[hihat(),drum(),snare(),bass(G2,1/16), synth(a5,1/8) ],[hihat(), bass(G2,1/16) ],[open(), bass(G2,1/16),orchestra(d5,1/8),synth(D6,1/8) ],[ bass(G2,1/16) ],[hihat(),drum(), bass(a2,1/16),orchestra(F5,1/1),synth(a3,2/1),synth(a4,2/1),synth(F5,2/1),synth(F6,2/1) ]//32/16,[hihat() ],[open(), bass(a2,1/16) ],[ bass(a2,1/16) ],[hihat(),drum(),snare(),bass(a2,1/16) ],[hihat(), bass(a2,1/16) ],[open(), bass(a2,1/16) ],[ bass(a2,1/16) ],[hihat(),drum(), bass(a2,1/16) ],[hihat(), bass(a2,1/16) ],[open(), bass(a2,1/16) ],[ bass(a2,1/16) ],[hihat(),drum(),snare(),bass(a2,1/16) ],[hihat(), bass(a2,1/16) ],[open(), bass(a2,1/16) ],[ bass(a2,1/16) ],[hihat(),drum(), bass(a2,1/16) ]//48/16,[hihat() ],[open(), bass(a2,1/16) ],[ bass(a2,1/16) ],[hihat(),drum(),snare(),bass(a2,1/16) ],[hihat(), bass(a2,1/16) ],[open(), bass(a2,1/16) ],[ bass(a2,1/16) ],[hihat(),drum(), bass(a2,1/16) ],[hihat(), bass(a2,1/16) ],[open(), bass(a2,1/16) ],[ bass(a2,1/16) ],[hihat(),drum(),snare(),bass(a2,1/16) ],[hihat(), bass(a2,1/16) ],[open(), bass(a2,1/16) ],[ bass(a2,1/16) ]]; </script> </head> <body> <p><a href="#" onmousedown="start();">start</a> example</p> <hr/> <p><a href="https://surikov.github.io/webaudiofont/">source</a></p> </body></html>
Output
You can jump to the latest bin by adding /latest to your URL
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| ctrl + [num] | Toggle nth panel |
| ctrl + 0 | Close focused panel |
| ctrl + enter | Re-render output. If console visible: run JS in console |
| Ctrl + l | Clear the console |
| ctrl + / | Toggle comment on selected lines |
| ctrl + ] | Indents selected lines |
| ctrl + [ | Unindents selected lines |
| tab | Code complete & Emmet expand |
| ctrl + shift + L | Beautify code in active panel |
| ctrl + s | Save & lock current Bin from further changes |
| ctrl + shift + s | Open the share options |
| ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts | |
JS Bin URLs
| URL | Action |
|---|---|
| / | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
| /edit | Edit the current bin |
| /watch | Follow a Code Casting session |
| /embed | Create an embeddable version of the bin |
| /latest | Load the very latest bin (/latest goes in place of the revision) |
| /[username]/last | View the last edited bin for this user |
| /[username]/last/edit | Edit the last edited bin for this user |
| /[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
| /quiet | Remove analytics and edit button from rendered output |
| .js | Load only the JavaScript for a bin |
| .css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. | |
public
0viewers