webaudiofont
Version:
Soundfonts for web. About of 2000 musical instruments. GM MIDI compatible.
166 lines (165 loc) • 6.72 kB
HTML
<html>
<head>
<script src='../npm/dist/WebAudioFontPlayer.js'></script>
<script src='https://surikov.github.io/webaudiofontdata/sound/0320_Chaos_sf2_file.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/12838_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/0300_Chaos_sf2_file.js'></script>
<script>
var AudioContextFunc = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContextFunc();
var player = new WebAudioFontPlayer();
var bpm = 120;
var N = 4 * 60 / bpm;
var pieceLen = 4 * N;
var beatLen=1/8 * N;
var C = 0;
var Cs= 1;
var D = 2;
var Ds= 3;
var E = 4;
var F = 5;
var Fs= 6;
var G = 7;
var Gs= 8;
var A = 9;
var As= 10;
var B = 11;
var started = false;
var startTime = 0;
player.loader.decodeAfterLoading(audioContext, '_drum_36_6_JCLive_sf2_file');
player.loader.decodeAfterLoading(audioContext, '_drum_38_6_JCLive_sf2_file');
player.loader.decodeAfterLoading(audioContext, '_drum_42_6_JCLive_sf2_file');
player.loader.decodeAfterLoading(audioContext, '_tone_0320_Chaos_sf2_file');
player.loader.decodeAfterLoading(audioContext, '_tone_0300_Chaos_sf2_file');
var currentGuitar=_tone_0300_Chaos_sf2_file;
var currentSnare=_drum_38_6_JCLive_sf2_file;
var currentSnarePitch=38;
function guitar(pitch, duration){return {preset:currentGuitar,pitch:12*4+pitch,duration:duration*N,volume:0.25};}
function bass(pitch, duration){return {preset:_tone_0320_Chaos_sf2_file,pitch:12*2+pitch,duration:duration*N,volume:0.4};}
function drum(){return {preset:_drum_36_6_JCLive_sf2_file,pitch:36,duration:1,volume:0.3};}
function snare(){return {preset:currentSnare,pitch:currentSnarePitch,duration:1,volume:0.85};}
function hihat(){return {preset:_drum_42_6_JCLive_sf2_file,pitch:42,duration:1,volume:0.25};}
function selectGuitar(o){
var n=document.getElementById('guitar').selectedIndex;
var info=player.loader.instrumentInfo(n)
console.log('selectGuitar',n,info);
player.loader.startLoad(audioContext, info.url, info.variable);
player.loader.waitLoad(function () {
console.log('done',info.variable);
currentGuitar=window[info.variable];
player.cancelQueue(audioContext);
started=false;
start();
});
}
function selectSnare(o){
var n=document.getElementById('snare').selectedIndex;
var info=player.loader.drumInfo(n)
console.log('selectGuitar',n,info);
player.loader.startLoad(audioContext, info.url, info.variable);
player.loader.waitLoad(function () {
console.log('done',info.variable);
currentSnare=window[info.variable];
currentSnarePitch=info.pitch;
player.cancelQueue(audioContext);
started=false;
start();
});
}
function beats(notes) {
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, audioContext.destination, beat[i].preset, startTime + n * beatLen , beat[i].pitch, beat[i].duration, beat[i].volume);
}
}
}
}
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);
}
}
function nextPiece() {
beats([
////////////////////////////////////////////////////////////////////////////////////
[guitar(D,1/8),guitar(G,1/8), bass(G,1/8), drum(), hihat()]
,[ bass(G,1/8), drum(), hihat()]
,[guitar(F,1/8),guitar(As,1/8), bass(G,1/8), snare(), hihat()]
,[ bass(G,1/8), hihat()]
,[guitar(G,1/4),guitar(C,1/4), bass(G,1/8), drum(), hihat()]
,[ bass(G,1/8), hihat()]
,[guitar(G,1/16), bass(G,1/8), snare(), hihat()]
,[guitar(D,1/8),guitar(G,1/8), bass(G,1/8), hihat()]
,[ bass(G,1/8), drum(), hihat()]
,[guitar(F,1/8),guitar(As,1/8), bass(G,1/8), drum(), hihat()]
,[ bass(G,1/8), snare(), hihat()]
,[guitar(Gs,1/8),guitar(Cs,1/8), bass(G,1/8), hihat()]
,[guitar(G,1/4),guitar(C,1/4), bass(G,1/8), drum(), hihat()]
,[ bass(G,1/8), hihat()]
,[guitar(G,1/16), bass(G,1/8), snare(), hihat()]
,[ bass(G,1/8), hihat()]
,[guitar(D,1/8),guitar(G,1/8), bass(G,1/8), drum(), hihat()]
,[ bass(G,1/8), drum(), hihat()]
,[guitar(F,1/8),guitar(As,1/8), bass(G,1/8), snare(), hihat()]
,[ bass(G,1/8), hihat()]
,[guitar(G,1/8),guitar(C,1/8), bass(C,1/8), drum(), hihat()]
,[ bass(C,1/8), hihat()]
,[guitar(G,1/16), bass(C,1/8), snare(), hihat()]
,[guitar(F,1/8),guitar(As,1/8), bass(As,1/4), hihat()]
,[ drum(), hihat()]
,[guitar(D,5/8),guitar(G,5/8), bass(G,1/8), drum(), hihat()]
,[ bass(G,1/8), snare(), hihat()]
,[ bass(G,1/8), hihat()]
,[ bass(G,1/8), drum(), hihat()]
,[ bass(G,1/8), snare(), hihat()]
,[guitar(G,1/16), bass(F,1/8), snare(), hihat()]
,[ bass(Fs,1/8), snare(), hihat()]
////////////////////////////////////////////////////////////////////////////////////
]);
}
</script>
</head>
<body>
<p><a href="#" onmousedown="start();">start</a> example</p>
<p>Guitar <select id='guitar' onchange="selectGuitar(this)"></select></p>
<p>Snare drum <select id='snare' onchange="selectSnare(this)"></select></p>
<hr/>
<p><a href="https://surikov.github.io/webaudiofont/">source</a></p>
<script>
var sel = document.getElementById('guitar');
for(var i = 0; i < player.loader.instrumentKeys().length; i++) {
var opt = document.createElement('option');
opt.innerHTML = ''+(i+1)+'. '+player.loader.instrumentInfo(i).title;
if(i==340){
opt.selected = 'selected'
}
sel.appendChild(opt);
}
sel = document.getElementById('snare');
for(var i = 0; i < player.loader.drumKeys().length; i++) {
var opt = document.createElement('option');
opt.innerHTML = ''+(i+1)+'. '+player.loader.drumInfo(i).title;
if(i==17){
opt.selected = 'selected'
}
sel.appendChild(opt);
}
console.log(player.loader);
</script>
</body>
</html>