diegohn
Joined: Nov 06, 2014 Posts: 3 Location: Spain
|
Posted: Wed May 11, 2016 2:11 pm Post subject:
Web midi API |
|
|
A short time ago, I have learnt that MIDI instruments can also be accessed in a web browser with Javascript and the Web Midi API (https://webaudio.github.io/web-midi-api/)
In my case I am using Google Chrome and Windows.
For some reason Google Chrome does not allow me to access Microsoft GS Wavetable synth directly, so I have to use loopmidi to create a new midi port and MIDI-OX to listen to the output (both are free programs).
Having solved the configuration, if you save the following code as an html page (and specify your loopmidi port name correctly) it should produce some sound.
Code: |
<html>
<head>
<style>
</style>
<script>
var midi = undefined; // global MIDIAccess object
var midiDevice = "loopMIDI Port 1"; //the name you give to the loopmidi port you want to use
var bt = 0.1; //baseTime (in seconds)
//AUXILIARY FUNCTIONS
function init() {
navigator.requestMIDIAccess().then( onMIDISuccess, onMIDIFailure );
}
function sendMidiMessage(data1,data2,data3,output) {
var msg = [data1,data2,data3];
output.send(msg);
}
function sendMidiMessageDelayed(data1,data2,data3,output,delay_s) {
var msg = [data1,data2,data3];
output.send(msg, window.performance.now() + (delay_s*1000));
}
function playSound(channel,freq,vel,time,dur) {
var portID = findMidiPort();
var output = midi.outputs.get(portID);
setTimeout(function(){
sendMidiMessage(144+channel,freq,vel,output);
sendMidiMessageDelayed(128+channel,freq,vel,output,dur);
},time*1000);
}
function findMidiPort() {
for (i=0; i<midi.outputs.size; i++) {
if (midiDevice==midi.outputs.get(i).name) {
return midi.outputs.get(i).id;
}
}
return -1;
}
function programChange(channel, instrument) {
var portID = findMidiPort();
var msg = [192+channel, instrument];
var output = midi.outputs.get(portID);
output.send( msg );
}
//'SHEET MUSIC'
function onMIDISuccess( midiAccess ) {
midi = midiAccess;
//select instruments
programChange(0,10);
programChange(1,20);
programChange(9,0);
//score
measureA(0);
measureA(bt*16);
measureA(bt*32);
measureA(bt*48);
}
function measureA(et) {
playSound(0,60,90,et+0,bt);
playSound(0,62,90,et+bt,bt);
playSound(0,62,90,et+(bt*2),bt);
playSound(0,64,90,et+(bt*3),bt);
playSound(1,67,120,et+0,bt);
playSound(1,69,120,et+bt,bt*2);
playSound(1,67,120,et+(bt*3),bt);
var z = Math.floor(Math.random()*3)+1;
var secondNote = 64;
if (z==2) {secondNote = 69;}
playSound(1,66,120,et+(bt*8),bt*4);
playSound(1,71,120,et+(bt*8),bt*4);
playSound(1,secondNote,120,et+(bt*12),bt*4);
playSound(1,secondNote+5,120,et+(bt*12),bt*4);
//percussion
playSound(9,60,120,et+(bt*2),bt*0.5);
playSound(9,65,120,et+(bt*2.5),bt*0.5);
playSound(9,62,120,et+(bt*6),bt*0.5);
playSound(9,62,120,et+(bt*6.5),bt*0.5);
playSound(9,62,120,et+(bt*10),bt*0.5);
playSound(9,69,120,et+(bt*10.5),bt*0.5);
playSound(9,62,80,et+(bt*14),bt*0.5);
playSound(9,69,60,et+(bt*14.5),bt*0.5);
}
function onMIDIFailure(msg) {
alert( "Failed to get MIDI access");
}
</script>
</head>
<body>
<h1>Web midi api test</h1>
<button onclick="init()">Test</button>
</body>
</html>
|
|
|