webaudiofont
Version:
Soundfonts for web. About of 2000 musical instruments. GM MIDI compatible.
111 lines • 3.75 kB
HTML
<html>
<head>
<script src='../npm/dist/WebAudioFontPlayer.js'></script>
<script src='https://surikov.github.io/webaudiofontdata/sound/0000_JCLive_sf2_file.js'></script>
<script>
var tone = _tone_0000_JCLive_sf2_file;
var AudioContextFunc = window.AudioContext || window.webkitAudioContext;
var audioContext = new AudioContextFunc();
var player = new WebAudioFontPlayer();
var midiNotes = [];
player.loader.decodeAfterLoading(audioContext, '_tone_0000_JCLive_sf2_file');
function requestMIDIAccessFailure(e) {
console.log('requestMIDIAccessFailure', e);
}
function logKeys(){
var s = 'Keys';
for (var i = 0; i < midiNotes.length; i++) {
s = s + ' ' + midiNotes[i].pitch;
}
evnt.innerHTML = s;
}
function midNoteOn(pitch, velocity) {
midiNoteOff(pitch);
var envelope = player.queueWaveTable(audioContext, audioContext.destination, tone, 0, pitch, 123456789, velocity / 100);
var note = {
pitch: pitch,
envelope: envelope
};
midiNotes.push(note);
}
function midiNoteOff(pitch) {
for (var i = 0; i < midiNotes.length; i++) {
if (midiNotes[i].pitch == pitch) {
if (midiNotes[i].envelope) {
midiNotes[i].envelope.cancel();
}
midiNotes.splice(i, 1);
return;
}
}
}
function midiOnStateChange(event) {
console.log('midiOnStateChange', event);
msg.innerHTML = event.port.manufacturer + ' ' + event.port.name + ' ' + event.port.state;
}
function midiOnMIDImessage(event) {
var data = event.data;
var cmd = data[0] >> 4;
var channel = data[0] & 0xf;
var type = data[0] & 0xf0;
var pitch = data[1];
var velocity = data[2];
switch (type) {
case 144:
midNoteOn(pitch, velocity);
logKeys();
break;
case 128:
midiNoteOff(pitch);
logKeys();
break;
}
}
function requestMIDIAccessSuccess(midi) {
var inputs = midi.inputs.values();
for (var input = inputs.next(); input && !input.done; input = inputs.next()) {
console.log('midi input', input);
input.value.onmidimessage = midiOnMIDImessage;
}
midi.onstatechange = midiOnStateChange;
}
function selectIns(o){
var n=document.getElementById('ins').selectedIndex;
var info=player.loader.instrumentInfo(n)
console.log('select',n,info);
player.loader.startLoad(audioContext, info.url, info.variable);
player.loader.waitLoad(function () {
console.log('done',info.variable);
tone=window[info.variable];
player.cancelQueue(audioContext);
});
}
</script>
</head>
<body>
<p><select id='ins' onchange="selectIns(this)"></select></p>
<p id='msg'>Connect MIDI-keyboard and refresh the page.</p>
<p id='evnt'>...</p>
<hr/>
<p><a href="https://surikov.github.io/webaudiofont/">source</a></p>
<script>
var sel = document.getElementById('ins');
for(var i = 0; i < player.loader.instrumentKeys().length; i++) {
var opt = document.createElement('option');
opt.innerHTML = ''+(i+1)+'. '+player.loader.instrumentInfo(i).title;
sel.appendChild(opt);
}
var msg=document.getElementById('msg');
var evnt=document.getElementById('evnt');
evnt.innerHTML='wait for keyboard...';
console.log(navigator.requestMIDIAccess);
if (navigator.requestMIDIAccess) {
console.log('navigator.requestMIDIAccess ok');
navigator.requestMIDIAccess().then(requestMIDIAccessSuccess, requestMIDIAccessFailure);
} else {
console.log('navigator.requestMIDIAccess undefined');
msg.innerHTML = 'navigator.requestMIDIAccess undefined';
}
</script>
</body>
</html>