3

I've been reading the documentation about Web Midi API and I tried to look at different websites about the topic. Is there a way of playing a midi sound without using fancy libraries and stuff? Let's say I just want to generate a single note: how do I access the midi module that is present on your local machine? Can anyone write a small snippet of code that plays a single note and that I can simply embed in the element?

Shannon Matthews
  • 9,649
  • 7
  • 44
  • 75
Scott Januar
  • 41
  • 1
  • 2
  • 1
    What part of the Web MIDI API do you not understand? What did you try? – CL. Feb 28 '15 at 07:52
  • 1
    I just didn't understand how you can use it to access the Microsoft GS Wavetable Synth thingy. I kinda got the impression Web Midi API was for external keyboards and stuff. For some reason all the apps I've seen on the web don't use the soundfonts installed on the local machine, but rather they rely on pre-recorded sounds that are included in the webpage. My question how do I play say a "Microsoft GS Wavetable Synth" piano note from my browser? – Scott Januar Mar 12 '15 at 09:53

3 Answers3

3

The Web Audio API does not directly interface with MIDI devices, including the software MIDI synthesizers on your computer. For that, you'd need to use the (not very well supported) Web MIDI API.

However, if you just want to play a simple monophonic note based on the parameters of a single MIDI note, you can convert those parameters to use with the Oscillator source:

audio = new (window.AudioContext || window.webkitAudioContext)()

function playNote(frequency, volume, duration)
{
    var halfPeriod = 1/frequency/2
    if(duration > halfPeriod) duration -= duration % halfPeriod
    else duration = halfPeriod

    var g = audio.createGain()
    var o = audio.createOscillator()
    o.connect(g)
    g.connect(audio.destination) // so you actually hear the output

    o.frequency.value = frequency
    g.gain.value = volume
    o.start(0)
    o.stop(audio.currentTime + duration)
}

The three first lines of the function are there to adjust the duration to avoid cutting the oscillator while the wave is not at zero, since that would cause an unpleasant pop.

Updated with latest (December 2015 draft) WebAudio spec

Touffy
  • 6,309
  • 22
  • 28
  • createGainNode is no more, now it's createGain. Anyway ice idea to provide a 10 l.o.c. example, thanks. If anyone wants to hear this code : http://jsbin.com/lisinatevu/1/ – GameAlchemist Feb 28 '15 at 12:32
  • Thanks for the update. However, I did not write 1/frequency/2 without parens by mistake. "hp" stands for "half period" (since the waveform zeroes every half period). 1/f is the period and you want half of that. – Touffy Mar 01 '15 at 13:01
  • Thanks @DanGetz. Hard to keep up with everything. Well, except for the MIDI API, which is not going anywhere. – Touffy Jan 09 '17 at 21:32
0

MIDI is a technical standard that describes a communications protocol that connect a wide variety of electronic musical hardware.

MIDI doesn't describe audio and sound at all. You can not play instrument via MIDI channel. Instead of this you can send a command to MIDI-keyboard or MIDI synth.

You need some library if you want to play sound from browser. For example piano keys with 1500 of instruments or complex player for MIDI files.

user1024
  • 1,121
  • 1
  • 9
  • 17
0

The W3C Working Draft of the Web MIDI API includes the code of a simple synthesizer: https://www.w3.org/TR/webmidi/#a-simple-monophonic-sine-wave-midi-synthesizer

This implementation is available on GitHub: https://github.com/cwilso/monosynth

The demo running the code: http://webaudiodemos.appspot.com/monosynth/

With the demo script loaded, you can play notes without a physical MIDI device. Playing C4 (#60 in MIDI) for approximately 1 second:

noteOn(60);
await new Promise(resolve => setTimeout(noteOff, 1000, 60));
Anton Tarasenko
  • 8,099
  • 11
  • 66
  • 91