webaudiofont
Version:
Soundfonts for web. About of 2000 musical instruments. GM MIDI compatible.
627 lines (582 loc) • 29.2 kB
HTML
<html>
<head>
<script src='https://surikov.github.io/webaudiofont/npm/dist/WebAudioFontPlayer.js'></script>
<script src='https://surikov.github.io/webaudiofontdata/sound/0253_Acoustic_Guitar_sf2_file.js'></script>
<script src='https://surikov.github.io/webaudiofontdata/sound/0250_Chaos_sf2_file.js'></script>
<script src='https://surikov.github.io/webaudiofontdata/sound/0340_Aspirin_sf2_file.js'></script>
<script src="https://surikov.github.io/webaudiofontdata/sound/0300_LesPaul_sf2_file.js"></script>
<script src="https://surikov.github.io/webaudiofontdata/sound/0280_LesPaul_sf2_file.js"></script>
<script src='https://surikov.github.io/webaudiofontdata/sound/12835_0_Chaos_sf2_file.js'></script>
<script src='https://surikov.github.io/webaudiofontdata/sound/12838_22_FluidR3_GM_sf2_file.js'></script>
<script src='https://surikov.github.io/webaudiofontdata/sound/12842_26_JCLive_sf2_file.js'></script>
<script>
var AudioContextFunc = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContextFunc();
var player = new WebAudioFontPlayer();
var reverberator = player.createReverberator(audioContext);
reverberator.output.connect(audioContext.destination);
var guitar = _tone_0253_Acoustic_Guitar_sf2_file;
var channelGuitar = player.createChannel(audioContext);
channelGuitar.output.connect(reverberator.input);
console.log(channelGuitar.output);
channelGuitar.output.gain.setValueAtTime(0.5, audioContext.currentTime);
//console.log(_tone_0253_Acoustic_Guitar_sf2_file);
/*for(var i=0;i<_tone_0253_Acoustic_Guitar_sf2_file.zones.length;i++){
_tone_0253_Acoustic_Guitar_sf2_file.zones[i].originalPitch=_tone_0253_Acoustic_Guitar_sf2_file.zones[i].originalPitch-100;
}*/
var drum=_drum_35_0_Chaos_sf2_file;
var snare=_drum_38_22_FluidR3_GM_sf2_file;
var hat=_drum_42_26_JCLive_sf2_file;
var channelDrums = player.createChannel(audioContext);
channelDrums.output.connect(reverberator.input);
channelDrums.output.gain.setValueAtTime(0.5, audioContext.currentTime);
var bass=_tone_0340_Aspirin_sf2_file;
var channelBass = player.createChannel(audioContext);
channelBass.output.connect(reverberator.input);
channelBass.output.gain.setValueAtTime(0.5, audioContext.currentTime);
var clean=_tone_0250_Chaos_sf2_file;
var channelClean = player.createChannel(audioContext);
channelClean.output.connect(reverberator.input);
channelClean.output.gain.setValueAtTime(0.5, audioContext.currentTime);
var drive=_tone_0300_LesPaul_sf2_file;
var palm=_tone_0280_LesPaul_sf2_file;
var channelDrive = player.createChannel(audioContext);
channelDrive.output.connect(reverberator.input);
channelDrive.output.gain.setValueAtTime(0.5, audioContext.currentTime);
//var output = reverberator.input;
var C = 0, Cs = 1
, Db = 1, D = 2, Ds = 3
, Eb = 3, E = 4
, F = 5, Fs = 6
, Gb = 6, G = 7, Gs = 8
, Ab = 8, A = 9, As = 10
, Bb = 10, B = 11;
var O = 12;
var __6th = E +O*3
, __5th = A +O*3
, __4th = D +O*4
, __3rd = G +O*4
, __2nd = B +O*4
, __1st = E +O*5;
var stringFrets = [__6th,__5th,__4th,__3rd,__2nd,__1st];
var __Am = {base: A +O*2, strings: [-1, 0, 2, 2, 1, 0]};
var __Am7 = {base: A +O*2, strings: [-1, 0, 2, 0, 1, 0]};
var __A7 = {base: A +O*2, strings: [-1, 0, 2, 0, 2, 0]};
var __A = {base: A +O*2, strings: [-1, 0, 2, 2, 2, 0]};
var __Bm7 = {base: B +O*2, strings: [-1, 2, 0, 2, 0, 2]};
var __B7 = {base: B +O*2, strings: [-1, 2, 1, 2, 0, 2]};
var __C = {base: C +O*3, strings: [-1, 3, 2, 0, 1, 0]};
var __Cmaj7 = {base: C +O*3, strings: [-1, 3, 2, 0, 0, 0]};
var __C2 = {base: C +O*3, strings: [-1, 3, 2, 0, 3, 0]};
var __Dm = {base: D +O*2, strings: [-1,-1, 0, 2, 3, 1]};
var __D = {base: D +O*2, strings: [-1,-1, 0, 2, 3, 2]};
var __D7 = {base: D +O*2, strings: [-1,-1, 0, 2, 3, 2]};
var __Dsus2 = {base: D +O*2, strings: [-1,-1, 0, 2, 3, 0]};
var __E = {base: E +O*2, strings: [ 0, 2, 2, 1, 0, 0]};
var __Em = {base: E +O*2, strings: [ 0, 2, 2, 0, 0, 0]};
var __Em7 = {base: E +O*2, strings: [ 0, 2, 0, 0, 0, 0]};
var __E7 = {base: E +O*2, strings: [ 0, 2, 0, 1, 0, 0]};
var __F = {base: F +O*2, strings: [-1,-1, 3, 2, 1, 1]};
var __Fmaj7 = {base: F +O*2, strings: [-1,-1, 3, 2, 1, 0]};
var __G = {base: G +O*2, strings: [ 3, 2, 0, 0, 0, 3]};
var chords = [__Am,__Am7,__A7,__A, __Bm7,__B7, __C,__Cmaj7,__C2, __Dm,__D,__D7,__Dsus2, __E,__Em,__Em7,__E7, __F,__Fmaj7, __G];
var progressions = [
new Beats([__Am,8,__C,8,__G,16,__Em,32])
,new Beats([__Am,16,__C,16,__G,16,__Em,16])
,new Beats([__Am,8,__C,8,__G,8,__Em,8])
];
var progression = new Beats([__Am,8,__E7,8,__Am,8,__Am,8,__C,8,__G,8,__C,8,__C,8,__Dm,8,__Dm,8,__Am,8,__Am,8,__E,8,__E,8,__Am,8,__Am,8])
var _z = 0;
var _V = 1;
var _A = 2;
var _X = 3;
var patterns = [
new Beats([_V,4, _V,2,_A,2,_V,8 ])
,new Beats([_V,8, _A,8 ])
,new Beats([_V,6, _A,2])
,new Beats([_V,4, _V,2,_z,4, _A,4, _A,2])
,new Beats([_V,4, _V,2,_A,4, _A,2,_V,2,_A,2])//4
,new Beats([_V,4, _X,2,_A,6, _X,2,_z,2])
,new Beats([_V,2,_A,2,_V,2,_A,2,_z,8 ])//6
,new Beats([_X,2,_X,2,_V,2,_A,2])//7
,new Beats([_V,2,_A,2,_V,2,_A,2,_z,2,_V,2,_A,2,_z,2])//8
,new Beats([_V,2,_A,2,_A,2,_V,4, _A,2,_V,2,_A,2])//9
,new Beats([_V,2,_z,2,_V,2,_A,2,_z,2,_A,2,_z,2,_A,2])
,new Beats([_V,2,_A,2,_V,2,_A,4, _V,4, _A,2])
,new Beats([_V,2,_A,2,_V,2,_A,4, _X,2,_A,2,_X,2])
,new Beats([_X,2,_A,2,_X,2,_A,2,_V,2,_X,2,_V,2,_X,2])
,new Beats([_V,2,_A,2])
,new Beats([_V,2,_A,4, _A,4, _A,4, _A,2,_V,2,_A,2,_z,2,_A,2,_z,2,_V,2,_A,2,_z,2])//15
,new Beats([_V,6, _A,2,_z,4, _V,2,_z,4, _A,2,_V,2,_z,2,_V,2,_A,2,_z,2,_A,2])//16
,new Beats([_V,2,_A,2,_X,2,_A,2,_V,2,_X,2,_V,2,_A,2,_X,2,_A,2,_V,2,_X,2,_V,2,_A,2,_X,2,_X,2])
,new Beats([_V,2, _V,1,_A,1,_V,1,_A,1,_V,2, _V,2, _V,1,_A,1,_V,1,_A,3])
,new Beats([_V,2, _V,1,_A,2, _V,1,_A,2, _V,2, _V,1,_A,1,_V,2, _V,1,_A,1])
];
var pattern=patterns[0];
var arpeggios = [
new Beats([0,2, -1,2, -2,2, -1,1, -2,1])
,new Beats([0,2, -3,2, -2,2, -1,2, -2,2, -3,2, -2,2, -1,2])
];
var arpeggio = arpeggios[0];
var drumPatterns = [
new Beats([[drum,hat],2, [hat],2, [snare,hat],2, [hat],2, [drum,hat],2, [drum,hat],2, [snare,hat],2, [hat],1, [hat],1])
,new Beats([[drum],2, [hat],2, [drum,snare],2, [hat],2])
,new Beats([[drum,hat],4, [snare,hat],4, [drum,hat],4, [snare,hat],2, [drum],2])
];
percussions=drumPatterns[0];
var bassPatterns = [
new Beats([0,2, 0,2, 0,2, 7,2])
,new Beats([ 0,2, 12,2])
,new Beats([ 0,2, 0,2, 0,2, 0,2, 0,2, 5,2, 7,2, 5,2])
,new Beats([ 0,4, -1,6, 0,2, 7,2, 5,2])
,new Beats([12,4, 7,4, 12,2, 7,2, 9,2,10,2])
];
bassPattern=bassPatterns[0];
var distortionPatterns = [
new Beats([ [2,[0,7]],8, [0,[0,7]],2, [1,[0,7]],2, [1,[0,7]],2, [1,[0,7]],2 ])
,new Beats([ [2,[0]],6, [1,[0]],6, [2,[0]],6, [1,[0]],6, [1,[0]],4, [1,[0]],4 ])
,new Beats([ [2,[0]],4, [1,[2]],2, [2,[0]],4, [1,[2]],2, [1,[0]],2, [1,[2]],2 ])
];
overPattern=distortionPatterns[0];
var intervalID=0;
var nextTickTime = 0;
var N = 0;
var tempo = 120;
player.loader.decodeAfterLoading(audioContext, '_tone_0253_Acoustic_Guitar_sf2_file');
player.loader.decodeAfterLoading(audioContext, '_tone_0250_Chaos_sf2_file');
player.loader.decodeAfterLoading(audioContext, '_tone_0340_Aspirin_sf2_file');
player.loader.decodeAfterLoading(audioContext, '_tone_0300_LesPaul_sf2_file');
player.loader.decodeAfterLoading(audioContext, '_tone_0280_LesPaul_sf2_file');
player.loader.decodeAfterLoading(audioContext, '_drum_35_0_Chaos_sf2_file');
player.loader.decodeAfterLoading(audioContext, '_drum_38_22_FluidR3_GM_sf2_file');
player.loader.decodeAfterLoading(audioContext, '_drum_42_26_JCLive_sf2_file');
function Beats(arr){
this.steps=[];
this.duration=0;
this.step=0;
for(var i=0;i<arr.length;i=i+2){
this.steps.push({element:arr[i],duration:arr[i+1]});
this.duration=this.duration+arr[i+1];
};
this.restart=function(){
this.step=0;
};
this.next=function(){
var delta=0;
var s=this.step;
this.step++;
if(this.step>=this.duration){
this.step=0;
}
for(var i=0;i<this.steps.length;i++){
if(s==delta){
return this.steps[i];
}
delta=delta+this.steps[i].duration;
if(delta>s){
break;
}
}
return null;
};
return this;
}
function pitches(frets) {
var p = [];
/*if (frets[0] > -1) p.push(_6th + frets[0]);
if (frets[1] > -1) p.push(_5th + frets[1]);
if (frets[2] > -1) p.push(_4th + frets[2]);
if (frets[3] > -1) p.push(_3rd + frets[3]);
if (frets[4] > -1) p.push(_2nd + frets[4]);
if (frets[5] > -1) p.push(_1st + frets[5]);
*/
for(var i=0;i<stringFrets.length;i++){
if(frets[i]>-1){
p.push(stringFrets[i] + frets[i]);
}
}
return p;
}
function patternStepAt(n){
var delta=0;
for(var i=0;i<pattern16.length;i++){
if(n==delta){
return pattern16[i];
}
delta=delta+pattern16[i].d;
}
return null;
}
function playStrumPattern(chord,at){
var beat=pattern.next();
if(beat){
if(beat.element==_V){
player.queueStrumDown(audioContext, channelGuitar.input, guitar, at, pitches(chord.element.strings), beat.duration*N/16);
}else{
if(beat.element==_A){
player.queueStrumUp(audioContext, channelGuitar.input, guitar, at, pitches(chord.element.strings), beat.duration*N/16);
}else{
if(beat.element==_X){
player.queueSnap(audioContext, channelGuitar.input, guitar, at, pitches(chord.element.strings), beat.duration*N/16);
}
}
}
}
}
function playArpeggio(chord,at){
var string=arpeggio.next();
//console.log(chord,shift,string);
if(string){
var pitch=-1;
//console.log(string.element,chord,chord.element.strings.length);
if(string.element<0){
var counter=0;
for(var i=chord.element.strings.length-1;i>=0;i--){
if(chord.element.strings[i]>-1){
counter--;
if(counter==string.element){
pitch=stringFrets[i]+chord.element.strings[i];
break;
}
}
}
}else{
var counter=0;
//console.log('test',string.element,chord.element.strings);
for(var i=0;i<chord.element.strings.length;i++){
if(chord.element.strings[i]>-1){
if(counter==string.element){
pitch=stringFrets[i]+chord.element.strings[i];
break;
}
counter++;
}
}
}
if(pitch>-1){
player.queueWaveTable(audioContext, channelClean.input, clean, at, pitch, string.duration*N/16);
}
}
}
function playDrums(chord,at){
var drums=percussions.next();
if(drums){
for(var i=0;i<drums.element.length;i++){
//console.log('drums',drums.element[i].zones[0].keyRangeLow);
player.queueWaveTable(audioContext, channelDrums.input, drums.element[i], at, drums.element[i].zones[0].keyRangeLow, 2*N/16,1);
}
}
}
function playDistortion(chord,at){
var q=overPattern.next();
if(q && q.element[0]){
var ins=drive;
if(q.element[0]==1){
ins=palm;
}
for(var i=0;i<q.element[1].length;i++){
player.queueWaveTable(audioContext, channelDrive.input, ins, at, 12+chord.element.base+q.element[1][i], q.duration*N/16,0.5);
}
}
}
function playBass(chord,at){
var b=bassPattern.next();
if(b){
//console.log(chord.element.base,b.element);
if(b.element>-1){
player.queueWaveTable(audioContext, channelBass.input, bass, at, chord.element.base+b.element, b.duration*N/16,0.7);
}
}
}
function tick(){
//console.log('tick',nextTickTime);
if(audioContext.currentTime>nextTickTime-N/8){
//console.log(nextTickTime);
for(var i=0;i<8;i++){
var chord=progression.next();
if(chord){
//console.log(chord);
for(var k=0;k<chord.duration;k++){
playStrumPattern(chord,nextTickTime+(k+i)*N/16);
playArpeggio(chord,nextTickTime+(k+i)*N/16);
playDrums(chord,nextTickTime+(k+i)*N/16);
playBass(chord,nextTickTime+(k+i)*N/16);
playDistortion(chord,nextTickTime+(k+i)*N/16);
}
}
}
nextTickTime = nextTickTime+N/2;
}
}
function cancelPlay(){
clearInterval(intervalID);
player.cancelQueue(audioContext);
}
function startPlay(){
cancelPlay();
ticker4 = 0;
N=4*60/tempo;
nextTickTime = audioContext.currentTime;
progression.restart();
pattern.restart();
tick();
intervalID=setInterval(tick, 33);
audioContext.resume();
}
function exportRiff(){
console.log('exportRiff');
}
</script>
</head>
<body>
<p>Tempo
<!--<select onchange="tempo=1*this.value;N=4*60/tempo">
<option value="90">Slow</option>
<option value="120" selected>Normal</option>
<option value="150">Fast</option>
</select>-->
<input type="range" min="90" max="150" step="30" value="120" onchange="tempo=1*this.value;N=4*60/tempo">
</p>
<p>Progression</p>
<p>
<select onchange="pattern=setChord(0,1*this.value)">
<option value="-1">-</option>
<option value="0">Am</option><option value="1">Am7</option><option value="2">A7</option><option value="3">A</option>
<option value="4">Bm7</option><option value="5">B7</option>
<option value="6">C</option><option value="7">Cmaj7</option><option value="8">C2</option>
<option value="9">Dm</option><option value="10">D</option><option value="11">D7</option><option value="12">Dsus2</option>
<option value="13">E</option><option value="14">Em</option><option value="15">Em7</option><option value="16">E7</option>
<option value="17">F</option><option value="18">Fmaj7</option>
<option value="19">G</option>
</select>
<select onchange="pattern=setChord(1,1*this.value)">
<option value="-1">-</option>
<option value="0">Am</option><option value="1">Am7</option><option value="2">A7</option><option value="3">A</option>
<option value="4">Bm7</option><option value="5">B7</option>
<option value="6">C</option><option value="7">Cmaj7</option><option value="8">C2</option>
<option value="9">Dm</option><option value="10">D</option><option value="11">D7</option><option value="12">Dsus2</option>
<option value="13">E</option><option value="14">Em</option><option value="15">Em7</option><option value="16">E7</option>
<option value="17">F</option><option value="18">Fmaj7</option>
<option value="19">G</option>
</select>
<select onchange="pattern=setChord(2,1*this.value)">
<option value="-1">-</option>
<option value="0">Am</option><option value="1">Am7</option><option value="2">A7</option><option value="3">A</option>
<option value="4">Bm7</option><option value="5">B7</option>
<option value="6">C</option><option value="7">Cmaj7</option><option value="8">C2</option>
<option value="9">Dm</option><option value="10">D</option><option value="11">D7</option><option value="12">Dsus2</option>
<option value="13">E</option><option value="14">Em</option><option value="15">Em7</option><option value="16">E7</option>
<option value="17">F</option><option value="18">Fmaj7</option>
<option value="19">G</option>
</select>
<select onchange="pattern=setChord(3,1*this.value)">
<option value="-1">-</option>
<option value="0">Am</option><option value="1">Am7</option><option value="2">A7</option><option value="3">A</option>
<option value="4">Bm7</option><option value="5">B7</option>
<option value="6">C</option><option value="7">Cmaj7</option><option value="8">C2</option>
<option value="9">Dm</option><option value="10">D</option><option value="11">D7</option><option value="12">Dsus2</option>
<option value="13">E</option><option value="14">Em</option><option value="15">Em7</option><option value="16">E7</option>
<option value="17">F</option><option value="18">Fmaj7</option>
<option value="19">G</option>
</select>
<select onchange="pattern=setChord(4,1*this.value)">
<option value="-1">-</option>
<option value="0">Am</option><option value="1">Am7</option><option value="2">A7</option><option value="3">A</option>
<option value="4">Bm7</option><option value="5">B7</option>
<option value="6">C</option><option value="7">Cmaj7</option><option value="8">C2</option>
<option value="9">Dm</option><option value="10">D</option><option value="11">D7</option><option value="12">Dsus2</option>
<option value="13">E</option><option value="14">Em</option><option value="15">Em7</option><option value="16">E7</option>
<option value="17">F</option><option value="18">Fmaj7</option>
<option value="19">G</option>
</select>
<select onchange="pattern=setChord(5,1*this.value)">
<option value="-1">-</option>
<option value="0">Am</option><option value="1">Am7</option><option value="2">A7</option><option value="3">A</option>
<option value="4">Bm7</option><option value="5">B7</option>
<option value="6">C</option><option value="7">Cmaj7</option><option value="8">C2</option>
<option value="9">Dm</option><option value="10">D</option><option value="11">D7</option><option value="12">Dsus2</option>
<option value="13">E</option><option value="14">Em</option><option value="15">Em7</option><option value="16">E7</option>
<option value="17">F</option><option value="18">Fmaj7</option>
<option value="19">G</option>
</select>
<select onchange="pattern=setChord(6,1*this.value)">
<option value="-1">-</option>
<option value="0">Am</option><option value="1">Am7</option><option value="2">A7</option><option value="3">A</option>
<option value="4">Bm7</option><option value="5">B7</option>
<option value="6">C</option><option value="7">Cmaj7</option><option value="8">C2</option>
<option value="9">Dm</option><option value="10">D</option><option value="11">D7</option><option value="12">Dsus2</option>
<option value="13">E</option><option value="14">Em</option><option value="15">Em7</option><option value="16">E7</option>
<option value="17">F</option><option value="18">Fmaj7</option>
<option value="19">G</option>
</select>
<select onchange="pattern=setChord(7,1*this.value)">
<option value="-1">-</option>
<option value="0">Am</option><option value="1">Am7</option><option value="2">A7</option><option value="3">A</option>
<option value="4">Bm7</option><option value="5">B7</option>
<option value="6">C</option><option value="7">Cmaj7</option><option value="8">C2</option>
<option value="9">Dm</option><option value="10">D</option><option value="11">D7</option><option value="12">Dsus2</option>
<option value="13">E</option><option value="14">Em</option><option value="15">Em7</option><option value="16">E7</option>
<option value="17">F</option><option value="18">Fmaj7</option>
<option value="19">G</option>
</select>
</p>
<p>
<select onchange="pattern=setChord(8,1*this.value)">
<option value="-1">-</option>
<option value="0">Am</option><option value="1">Am7</option><option value="2">A7</option><option value="3">A</option>
<option value="4">Bm7</option><option value="5">B7</option>
<option value="6">C</option><option value="7">Cmaj7</option><option value="8">C2</option>
<option value="9">Dm</option><option value="10">D</option><option value="11">D7</option><option value="12">Dsus2</option>
<option value="13">E</option><option value="14">Em</option><option value="15">Em7</option><option value="16">E7</option>
<option value="17">F</option><option value="18">Fmaj7</option>
<option value="19">G</option>
</select>
<select onchange="pattern=setChord(9,1*this.value)">
<option value="-1">-</option>
<option value="0">Am</option><option value="1">Am7</option><option value="2">A7</option><option value="3">A</option>
<option value="4">Bm7</option><option value="5">B7</option>
<option value="6">C</option><option value="7">Cmaj7</option><option value="8">C2</option>
<option value="9">Dm</option><option value="10">D</option><option value="11">D7</option><option value="12">Dsus2</option>
<option value="13">E</option><option value="14">Em</option><option value="15">Em7</option><option value="16">E7</option>
<option value="17">F</option><option value="18">Fmaj7</option>
<option value="19">G</option>
</select>
<select onchange="pattern=setChord(10,1*this.value)">
<option value="-1">-</option>
<option value="0">Am</option><option value="1">Am7</option><option value="2">A7</option><option value="3">A</option>
<option value="4">Bm7</option><option value="5">B7</option>
<option value="6">C</option><option value="7">Cmaj7</option><option value="8">C2</option>
<option value="9">Dm</option><option value="10">D</option><option value="11">D7</option><option value="12">Dsus2</option>
<option value="13">E</option><option value="14">Em</option><option value="15">Em7</option><option value="16">E7</option>
<option value="17">F</option><option value="18">Fmaj7</option>
<option value="19">G</option>
</select>
<select onchange="pattern=setChord(11,1*this.value)">
<option value="-1">-</option>
<option value="0">Am</option><option value="1">Am7</option><option value="2">A7</option><option value="3">A</option>
<option value="4">Bm7</option><option value="5">B7</option>
<option value="6">C</option><option value="7">Cmaj7</option><option value="8">C2</option>
<option value="9">Dm</option><option value="10">D</option><option value="11">D7</option><option value="12">Dsus2</option>
<option value="13">E</option><option value="14">Em</option><option value="15">Em7</option><option value="16">E7</option>
<option value="17">F</option><option value="18">Fmaj7</option>
<option value="19">G</option>
</select>
<select onchange="pattern=setChord(12,1*this.value)">
<option value="-1">-</option>
<option value="0">Am</option><option value="1">Am7</option><option value="2">A7</option><option value="3">A</option>
<option value="4">Bm7</option><option value="5">B7</option>
<option value="6">C</option><option value="7">Cmaj7</option><option value="8">C2</option>
<option value="9">Dm</option><option value="10">D</option><option value="11">D7</option><option value="12">Dsus2</option>
<option value="13">E</option><option value="14">Em</option><option value="15">Em7</option><option value="16">E7</option>
<option value="17">F</option><option value="18">Fmaj7</option>
<option value="19">G</option>
</select>
<select onchange="pattern=setChord(16,1*this.value)">
<option value="-1">-</option>
<option value="0">Am</option><option value="1">Am7</option><option value="2">A7</option><option value="3">A</option>
<option value="4">Bm7</option><option value="5">B7</option>
<option value="6">C</option><option value="7">Cmaj7</option><option value="8">C2</option>
<option value="9">Dm</option><option value="10">D</option><option value="11">D7</option><option value="12">Dsus2</option>
<option value="13">E</option><option value="14">Em</option><option value="15">Em7</option><option value="16">E7</option>
<option value="17">F</option><option value="18">Fmaj7</option>
<option value="19">G</option>
</select>
<select onchange="pattern=setChord(14,1*this.value)">
<option value="-1">-</option>
<option value="0">Am</option><option value="1">Am7</option><option value="2">A7</option><option value="3">A</option>
<option value="4">Bm7</option><option value="5">B7</option>
<option value="6">C</option><option value="7">Cmaj7</option><option value="8">C2</option>
<option value="9">Dm</option><option value="10">D</option><option value="11">D7</option><option value="12">Dsus2</option>
<option value="13">E</option><option value="14">Em</option><option value="15">Em7</option><option value="16">E7</option>
<option value="17">F</option><option value="18">Fmaj7</option>
<option value="19">G</option>
</select>
<select onchange="pattern=setChord(15,1*this.value)">
<option value="-1">-</option>
<option value="0">Am</option><option value="1">Am7</option><option value="2">A7</option><option value="3">A</option>
<option value="4">Bm7</option><option value="5">B7</option>
<option value="6">C</option><option value="7">Cmaj7</option><option value="8">C2</option>
<option value="9">Dm</option><option value="10">D</option><option value="11">D7</option><option value="12">Dsus2</option>
<option value="13">E</option><option value="14">Em</option><option value="15">Em7</option><option value="16">E7</option>
<option value="17">F</option><option value="18">Fmaj7</option>
<option value="19">G</option>
</select>
</p>
<p>load from
<select>
<option value="0">Amaj7-ftg-e-err</option>
<option value="1">Dm-gvb-s-s-f-f</option>
<option value="2">E7-r-g-s-r</option>
<option value="3">G-rfgv-rf-gb-r-gr</option>
</select>
</p>
<p>
Accompaniment
</p>
<p>
<select onchange="pattern=patterns[1*this.value]">
<option value="0" selected>Strum 0</option>
<option value="1">Strum 1</option>
<option value="2">Strum 2</option>
<option value="3">Strum 3</option>
<option value="4">Strum 4</option>
<option value="5">Strum 5</option>
<option value="6">Strum 6</option>
<option value="7">Strum 7</option>
<option value="8">Strum 8</option>
<option value="9">Strum 9</option>
<option value="10">Strum 10</option>
<option value="11">Strum 11</option>
<option value="12">Strum 12</option>
<option value="13">Strum 13</option>
<option value="14">Strum 14</option>
<option value="15">Strum 15</option>
<option value="16">Strum 16</option>
<option value="17">Strum 17</option>
<option value="18">Strum 18</option>
</select>
<input type="range" min="0" max="1" step="0.1" value="0.5" onchange="channelGuitar.output.gain.setValueAtTime(1*this.value, audioContext.currentTime)">
</p>
<p>
<select onchange="arpeggio = arpeggios[1*this.value]">
<option value="0" selected>Arpeggio 0</option>
<option value="1">Arpeggio 1</option>
</select>
<input type="range" min="0" max="1" step="0.1" value="0.5" onchange="channelClean.output.gain.setValueAtTime(1*this.value, audioContext.currentTime)">
</p><p>
<select onchange="percussions=drumPatterns[1*this.value]">
<option value="0" selected>Drum 0</option>
<option value="1">Drum 1</option>
<option value="2">Drum 2</option>
</select>
<input type="range" min="0" max="1" step="0.1" value="0.5" onchange="channelDrums.output.gain.setValueAtTime(1*this.value, audioContext.currentTime)">
</p><p>
<select onchange="bassPattern=bassPatterns[1*this.value]">
<option value="0" selected>Bass 0</option>
<option value="1">Bass 1</option>
<option value="2">Bass 2</option>
<option value="3">Bass 3</option>
<option value="4">Bass 4</option>
</select>
<input type="range" min="0" max="1" step="0.1" value="0.5" onchange="channelBass.output.gain.setValueAtTime(1*this.value, audioContext.currentTime)">
</p><p>
<select onchange="overPattern=distortionPatterns[1*this.value]">
<option value="0" selected>Overdrive 0</option>
<option value="1">Overdrive 1</option>
<option value="2">Overdrive 3</option>
</select>
<input type="range" min="0" max="1" step="0.1" value="0.5" onchange="channelDrive.output.gain.setValueAtTime(1*this.value, audioContext.currentTime)">
</p>
<p>
Control
</p>
<p>
<button onclick='startPlay()'>Play</button>
<button onclick='cancelPlay()'>Stop</button>
<button onclick='randomizeRiff()'>Randomize</button>
<button onclick='exportRiff()'>Pianoroll Editor/Export MIDI</button>
</p>
<hr/>
<p><a href="https://surikov.github.io/webaudiofont/">source</a></p>
</body>
</html>