music21j-port

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Music21j Source: music21/webmidi.js</title>  <link type="text/css" rel="stylesheet" href="styles/sunlight.default.css"> <link type="text/css" rel="stylesheet" href="styles/site.spruce.css"> </head> <body> <div class="container-fluid"> <div class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <a class="brand" href="index.html">Music21j</a> <ul class="nav"> <li class="dropdown"> <a href="namespaces.list.html" class="dropdown-toggle" data-toggle="dropdown">Namespaces<b class="caret"></b></a> <ul class="dropdown-menu "> <li> <a href="music21.html">music21</a> </li> <li> <a href="music21.articulations.html">music21.articulations</a> </li> <li> <a href="music21.audioSearch.html">music21.audioSearch</a> </li> <li> <a href="music21.base.html">music21.base</a> </li> <li> <a href="music21.beam.html">music21.beam</a> </li> <li> <a href="music21.chord.html">music21.chord</a> </li> <li> <a href="music21.clef.html">music21.clef</a> </li> <li> <a href="music21.common.html">music21.common</a> </li> <li> <a href="music21.duration.html">music21.duration</a> </li> <li> <a href="music21.dynamics.html">music21.dynamics</a> </li> <li> <a href="music21.expressions.html">music21.expressions</a> </li> <li> <a href="music21.fromPython.html">music21.fromPython</a> </li> <li> <a href="music21.instrument.html">music21.instrument</a> </li> <li> <a href="music21.interval.html">music21.interval</a> </li> <li> <a href="music21.key.html">music21.key</a> </li> <li> <a href="music21.keyboard.html">music21.keyboard</a> </li> <li> <a href="music21.meter.html">music21.meter</a> </li> <li> <a href="music21.miditools.html">music21.miditools</a> </li> <li> <a href="music21.note.html">music21.note</a> </li> <li> <a href="music21.pitch.html">music21.pitch</a> </li> <li> <a href="music21.prebase.html">music21.prebase</a> </li> <li> <a href="music21.renderOptions.html">music21.renderOptions</a> </li> <li> <a href="music21.roman.html">music21.roman</a> </li> <li> <a href="music21.scale.html">music21.scale</a> </li> <li> <a href="music21.sites.html">music21.sites</a> </li> <li> <a href="music21.stream.html">music21.stream</a> </li> <li> <a href="music21.tempo.html">music21.tempo</a> </li> <li> <a href="music21.tie.html">music21.tie</a> </li> <li> <a href="music21.tinyNotation.html">music21.tinyNotation</a> </li> <li> <a href="music21.vfShow.html">music21.vfShow</a> </li> <li> <a href="music21.webmidi.html">music21.webmidi</a> </li> </ul> </li> <li class="dropdown"> <a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b class="caret"></b></a> <ul class="dropdown-menu "> <li> <a href="music21.articulations.Accent.html">music21.articulations.Accent</a> </li> <li> <a href="music21.articulations.Articulation.html">music21.articulations.Articulation</a> </li> <li> <a href="music21.articulations.DynamicArticulation.html">music21.articulations.DynamicArticulation</a> </li> <li> <a href="music21.articulations.LengthArticulation.html">music21.articulations.LengthArticulation</a> </li> <li> <a href="music21.articulations.Marcato.html">music21.articulations.Marcato</a> </li> <li> <a href="music21.articulations.PitchArticulation.html">music21.articulations.PitchArticulation</a> </li> <li> <a href="music21.articulations.Spiccato.html">music21.articulations.Spiccato</a> </li> <li> <a href="music21.articulations.Staccatissimo.html">music21.articulations.Staccatissimo</a> </li> <li> <a href="music21.articulations.Staccato.html">music21.articulations.Staccato</a> </li> <li> <a href="music21.articulations.StrongAccent.html">music21.articulations.StrongAccent</a> </li> <li> <a href="music21.articulations.Tenuto.html">music21.articulations.Tenuto</a> </li> <li> <a href="music21.articulations.TimbreArticulation.html">music21.articulations.TimbreArticulation</a> </li> <li> <a href="music21.base.Music21Object.html">music21.base.Music21Object</a> </li> <li> <a href="music21.beam.Beam.html">music21.beam.Beam</a> </li> <li> <a href="music21.beam.Beams.html">music21.beam.Beams</a> </li> <li> <a href="music21.chord.Chord.html">music21.chord.Chord</a> </li> <li> <a href="music21.clef.AltoClef.html">music21.clef.AltoClef</a> </li> <li> <a href="music21.clef.BassClef.html">music21.clef.BassClef</a> </li> <li> <a href="music21.clef.Clef.html">music21.clef.Clef</a> </li> <li> <a href="music21.clef.MezzoSopranoClef.html">music21.clef.MezzoSopranoClef</a> </li> <li> <a href="music21.clef.PercussionClef.html">music21.clef.PercussionClef</a> </li> <li> <a href="music21.clef.SopranoClef.html">music21.clef.SopranoClef</a> </li> <li> <a href="music21.clef.TenorClef.html">music21.clef.TenorClef</a> </li> <li> <a href="music21.clef.Treble8vaClef.html">music21.clef.Treble8vaClef</a> </li> <li> <a href="music21.clef.Treble8vbClef.html">music21.clef.Treble8vbClef</a> </li> <li> <a href="music21.clef.TrebleClef.html">music21.clef.TrebleClef</a> </li> <li> <a href="music21.duration.Duration.html">music21.duration.Duration</a> </li> <li> <a href="music21.duration.Tuplet.html">music21.duration.Tuplet</a> </li> <li> <a href="music21.dynamics.Dynamic.html">music21.dynamics.Dynamic</a> </li> <li> <a href="music21.expressions.Expression.html">music21.expressions.Expression</a> </li> <li> <a href="music21.expressions.Fermata.html">music21.expressions.Fermata</a> </li> <li> <a href="music21.fromPython.Converter.html">music21.fromPython.Converter</a> </li> <li> <a href="music21.instrument.Instrument.html">music21.instrument.Instrument</a> </li> <li> <a href="music21.interval.ChromaticInterval.html">music21.interval.ChromaticInterval</a> </li> <li> <a href="music21.interval.DiatonicInterval.html">music21.interval.DiatonicInterval</a> </li> <li> <a href="music21.interval.GenericInterval.html">music21.interval.GenericInterval</a> </li> <li> <a href="music21.interval.Interval.html">music21.interval.Interval</a> </li> <li> <a href="music21.key.Key.html">music21.key.Key</a> </li> <li> <a href="music21.key.KeySignature.html">music21.key.KeySignature</a> </li> <li> <a href="music21.keyboard.BlackKey.html">music21.keyboard.BlackKey</a> </li> <li> <a href="music21.keyboard.Key.html">music21.keyboard.Key</a> </li> <li> <a href="music21.keyboard.Keyboard.html">music21.keyboard.Keyboard</a> </li> <li> <a href="music21.keyboard.WhiteKey.html">music21.keyboard.WhiteKey</a> </li> <li> <a href="music21.meter.TimeSignature.html">music21.meter.TimeSignature</a> </li> <li> <a href="music21.miditools.Event.html">music21.miditools.Event</a> </li> <li> <a href="music21.miditools.MidiPlayer.html">music21.miditools.MidiPlayer</a> </li> <li> <a href="music21.note.GeneralNote.html">music21.note.GeneralNote</a> </li> <li> <a href="music21.note.Lyric.html">music21.note.Lyric</a> </li> <li> <a href="music21.note.Note.html">music21.note.Note</a> </li> <li> <a href="music21.note.NotRest.html">music21.note.NotRest</a> </li> <li> <a href="music21.note.Rest.html">music21.note.Rest</a> </li> <li> <a href="music21.pitch.Accidental.html">music21.pitch.Accidental</a> </li> <li> <a href="music21.pitch.Pitch.html">music21.pitch.Pitch</a> </li> <li> <a href="music21.prebase.ProtoM21Object.html">music21.prebase.ProtoM21Object</a> </li> <li> <a href="music21.renderOptions.RenderOptions.html">music21.renderOptions.RenderOptions</a> </li> <li> <a href="music21.roman.RomanNumeral.html">music21.roman.RomanNumeral</a> </li> <li> <a href="music21.stream.Measure.html">music21.stream.Measure</a> </li> <li> <a href="music21.stream.Part.html">music21.stream.Part</a> </li> <li> <a href="music21.stream.Score.html">music21.stream.Score</a> </li> <li> <a href="music21.stream.Stream.html">music21.stream.Stream</a> </li> <li> <a href="music21.stream.Voice.html">music21.stream.Voice</a> </li> <li> <a href="music21.tempo.Metronome.html">music21.tempo.Metronome</a> </li> <li> <a href="music21.tie.Tie.html">music21.tie.Tie</a> </li> <li> <a href="music21.vfShow.Renderer.html">music21.vfShow.Renderer</a> </li> <li> <a href="music21.vfShow.RenderStack.html">music21.vfShow.RenderStack</a> </li> <li> <a href="Notation.html">Notation</a> </li> <li> <a href="Page.html">Page</a> </li> <li> <a href="Recorder.html">Recorder</a> </li> </ul> </li> <li class="dropdown"> <a href="global.html" class="dropdown-toggle" data-toggle="dropdown">Global<b class="caret"></b></a> <ul class="dropdown-menu "> <li> <a href="global.html#getM21attribute">getM21attribute</a> </li> <li> <a href="global.html#layout">layout</a> </li> <li> <a href="global.html#midiNumDiffFromFrequency">midiNumDiffFromFrequency</a> </li> <li> <a href="global.html#recorderWorkerJs">recorderWorkerJs</a> </li> <li> <a href="global.html#unpickler">unpickler</a> </li> <li> <a href="global.html#warnBanner">warnBanner</a> </li> </ul> </li> </ul> </div> </div> <div class="row-fluid"> <div class="span12"> <div id="main"> <h1 class="page-title">Source: music21/webmidi.js</h1> <section> <article> <pre class="sunlight-highlight-javascript linenums">/** * music21j -- Javascript reimplementation of Core music21p features. * music21/webmidi -- webmidi or wrapper around the Jazz Plugin * * For non webmidi -- Uses the cross-platform, cross-browser plugin from * http://jazz-soft.net/doc/Jazz-Plugin/Plugin.html * P.S. by the standards of divinity of most major religions, Sema Kachalo is a god. * * Copyright (c) 2014-18, Michael Scott Cuthbert and cuthbertLab * Based on music21 (=music21p), Copyright (c) 2006–18, Michael Scott Cuthbert and cuthbertLab * */ import * as $ from 'jquery'; import { debug } from './debug.js'; import { common } from './common.js'; import { miditools } from './miditools.js'; /** * webmidi -- for connecting with external midi devices * * Uses either the webmidi API or the Jazz plugin * * See {@link music21.webmidi} * * @exports music21/webmidi */ /** * webmidi -- for connecting with external midi devices * * Uses either the webmidi API or the Jazz plugin * * @namespace music21.webmidi * @memberof music21 * @requires music21/miditools * @requires jquery * @property {JazzObject|undefined} storedPlugin - reference to the Jazz object from the plugin; cached from `createPlugin`. * @property {string} selectedJazzInterface - the currently connected interface (note that we can only use one right now) */ export const webmidi = {}; webmidi.selectedOutputPort = undefined; webmidi.selectedInputPort = undefined; webmidi.access = undefined; webmidi.$selectDiv = undefined; webmidi.jazzDownloadUrl = 'http://jazz-soft.net/download/Jazz-Plugin/'; webmidi.storedPlugin = undefined; webmidi.selectedJazzInterface = undefined; // not the same as "" etc. uses last selected interface by default. /** * Called by Jazz MIDI plugin when an event arrives. * * Shim to convert the data into WebMIDI API format and then call the WebMIDI API midiInArrived * * See the MIDI spec for information on parameters * * @memberof music21.webmidi * @param {byte} t - timing information * @param {byte} a - data 1 * @param {byte} b - data 2 * @param {byte} c - data 3 */ webmidi.jazzMidiInArrived = function jazzMidiInArrived(t, a, b, c) { const webmidiEvent = { timestamp: t, data: [a, b, c], }; return webmidi.midiInArrived(webmidiEvent); }; /** * Called directly when a MIDI event arrives from the WebMIDI API, or via a Shim (jazzMidiInArrived) * when MIDI information comes from JazzMIDI * * Calls the 'raw' and 'general callbacks when a raw midi event (four bytes) * arrives. * * See the MIDI spec for information on the contents of the three parameters. * * midiMessageEvent should be an object with two keys: timeStamp (int) and data (array of three int values) * * @memberof music21.webmidi * @param {MidiMessageEvent} midiMessageEvent - midi Information */ webmidi.midiInArrived = function midiInArrived(midiMessageEvent) { const t = midiMessageEvent.timeStamp; const a = midiMessageEvent.data[0]; const b = midiMessageEvent.data[1]; const c = midiMessageEvent.data[2]; const eventObject = miditools.callBacks.raw(t, a, b, c); if (miditools.callBacks.general instanceof Array) { return miditools.callBacks.general.forEach((el, index, array) => { el(eventObject); }); } else if (miditools.callBacks.general !== undefined) { return miditools.callBacks.general(eventObject); } else { return undefined; } }; /** * Create a hidden tiny, &lt;object&gt; tag in the DOM with the * proper classid (`CLSID:1ACE1618-1C7D-4561-AEE1-34842AA85E90`) to * load the Jazz plugin. * * It will return the plugin if it can or undefined if it cannot. Caches it in webmidi.storedPlugin. * * @function music21.webmidi.createPlugin * @param {DOMObject} [appendElement=document.body] - where to place this hidden object (does not really matter) * @param {Boolean} [override=false] - if this method has been called successfully before return the storedPlugin unless override is true. * @returns {Jazz|undefined} Jazz MIDI plugin object */ webmidi.createPlugin = function createPlugin(appendElement, override) { if (webmidi.storedPlugin && override !== true) { return webmidi.storedPlugin; } if (typeof appendElement === 'undefined') { appendElement = $('body')[0]; } const obj = document.createElement('object'); obj.classid = 'CLSID:1ACE1618-1C7D-4561-AEE1-34842AA85E90'; if (!obj.isJazz) { obj.type = 'audio/x-jazz'; } obj.style.visibility = 'hidden'; obj.style.width = '0px'; obj.style.height = '0px'; appendElement.appendChild(obj); if (obj.isJazz) { webmidi.storedPlugin = obj; return obj; } else { appendElement.removeChild(obj); console.error( 'Cannot use jazz plugin; install at ' + webmidi.jazzDownloadUrl ); return undefined; } }; /** * Creates a &lt;select&gt; object for selecting among the MIDI choices in Jazz * * @function music21.webmidi.createJazzSelector * @param {JQueryDOMObject|DOMObject} [midiSelectDiv=document.body] - object to append the select to * @param {Object} [options] - see createSelector for details * @returns {DOMObject|undefined} DOM object containing the select tag, or undefined if Jazz cannot be loaded. */ webmidi.createJazzSelector = function createJazzSelector($newSelect, options) { const params = {}; common.merge(params, options); const Jazz = webmidi.createPlugin(); if (Jazz === undefined) { return undefined; } $newSelect.change(() => { const selectedInput = $('#midiInSelect option:selected').text(); if (selectedInput !== 'None selected') { webmidi.selectedJazzInterface = Jazz.MidiInOpen( selectedInput, webmidi.jazzMidiInArrived ); } else { Jazz.MidiInClose(); } if (debug) { console.log( 'current input changed to: ' + webmidi.selectedInterface ); } }); const midiOptions = Jazz.MidiInList(); const noneAppendOption = $("<option value='None'>None selected</option>"); $newSelect.append(noneAppendOption); let anySelected = false; const allAppendOptions = []; for (let i = 0; i < midiOptions.length; i++) { const $appendOption = $( "<option value='" + midiOptions[i] + "'>" + midiOptions[i] + '</option>' ); if (midiOptions[i] === webmidi.selectedJazzInterface) { $appendOption.attr('selected', true); anySelected = true; } allAppendOptions.push($appendOption); // console.log(appendOption); $newSelect.append($appendOption); } if (anySelected === false && midiOptions.length > 0) { $newSelect.val(midiOptions[0]); allAppendOptions[0].attr('selected', true); webmidi.selectedJazzInterface = Jazz.MidiInOpen( midiOptions[0], webmidi.jazzMidiInArrived ); anySelected = true; } else { noneAppendOption.attr('selected', true); } if (params.onsuccess !== undefined) { params.onsuccess(); } if (anySelected === true && params.oninputsuccess !== undefined) { params.oninputsuccess(); } else if (anySelected === false && params.oninputempty !== undefined) { params.oninputempty(); } return $newSelect; }; /** * Function to be called if the webmidi-api selection changes. (not jazz) * */ webmidi.selectionChanged = function selectionChanged() { const selectedInput = webmidi.$select.val(); if (selectedInput === webmidi.selectedInputPort) { return false; } const storedStateChange = webmidi.access.onstatechange; // port.close() fires onstatechange, so turn off for a moment. webmidi.access.onstatechange = () => {}; if (debug) { console.log('current input changed to: ' + selectedInput); } webmidi.selectedInputPort = selectedInput; webmidi.access.inputs.forEach(port => { if (port.name === selectedInput) { port.onmidimessage = webmidi.midiInArrived; } else { port.close(); } }); webmidi.access.onstatechange = storedStateChange; return false; }; /** * Creates a &lt;select&gt; object for selecting among the MIDI choices in Jazz * * The options object has several parameters: * * {bool} autoupdate -- should this auto update? * {function} onsuccess -- function to call on all successful port queries * {function} oninputsuccess -- function to call if successful and at least one input device is found * {function} oninputempty -- function to call if successful but no input devices are found. * {bool} existingMidiSelect -- is there already a select tag for MIDI? * * @function music21.webmidi.createSelector * @param {JQueryDOMObject|DOMObject} [$midiSelectDiv=$('body')] - object to append the select to * @param {Object} [options] - see above. * @returns {DOMObject|undefined} DOM object containing the select tag, or undefined if Jazz cannot be loaded. */ webmidi.createSelector = function createSelector($midiSelectDiv, options) { const params = { autoUpdate: true, existingMidiSelect: false, }; common.merge(params, options); if (typeof $midiSelectDiv === 'undefined') { $midiSelectDiv = $('body'); } if ($midiSelectDiv.jquery === undefined) { $midiSelectDiv = $($midiSelectDiv); } let $newSelect; const foundMidiSelects = $midiSelectDiv.find('select#midiInSelect'); if (foundMidiSelects.length > 0) { $newSelect = foundMidiSelects[0]; params.existingMidiSelect = true; } else { $newSelect = $('<select>').attr('id', 'midiInSelect'); $midiSelectDiv.append($newSelect); } webmidi.$select = $newSelect; if (navigator.requestMIDIAccess === undefined) { webmidi.createJazzSelector($newSelect, params); } else { if (params.existingMidiSelect !== true) { $newSelect.change(webmidi.selectionChanged); } navigator.requestMIDIAccess().then( access => { webmidi.access = access; webmidi.populateSelect(); if (params.autoUpdate) { access.onstatechange = webmidi.populateSelect; } webmidi.$select.change(); if (params.onsuccess !== undefined) { params.onsuccess(); } if ( webmidi.selectedInputPort !== 'None' && params.oninputsuccess !== undefined ) { params.oninputsuccess(); } else if ( webmidi.selectedInputPort === 'None' && params.oninputempty !== undefined ) { params.oninputempty(); } }, e => { $midiSelectDiv.html(e.message); } ); } miditools.clearOldChords(); // starts the chord checking process. return $newSelect; }; webmidi.populateSelect = function populateSelect() { const inputs = webmidi.access.inputs; webmidi.$select.empty(); const $noneAppendOption = $("<option value='None'>None selected</option>"); webmidi.$select.append($noneAppendOption); const allAppendOptions = []; const midiOptions = []; let i = 0; inputs.forEach(port => { const $appendOption = $( "<option value='" + port.name + "'>" + port.name + '</option>' ); allAppendOptions.push($appendOption); midiOptions.push(port.name); // console.log(appendOption); webmidi.$select.append($appendOption); i += 1; }); if (allAppendOptions.length > 0) { webmidi.$select.val(midiOptions[0]); allAppendOptions[0].attr('selected', true); } else { $noneAppendOption.attr('selected', true); } webmidi.$select.change(); }; // this allows for the deprecated webmidi.callBacks to still work for now. webmidi.callBacks = miditools.callBacks; /** * Example smallest usage of the webmidi toolkit. see testHTML/midiInRequire.html <html> <head> <title>MIDI In/Jazz Test for Music21j</title>  <meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/> <script data-main="../src/music21.js" src="../ext/require/require.js"></script> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script> var s = ""; function displayStream(me) { me.sendToMIDIjs(); if (me.noteOn) { var m21n = me.music21Note(); if (s.length > 7) { s.elements = s.elements.slice(1) } s.append(m21n); var $svgDiv = $("#svgDiv"); $svgDiv.empty(); var svgDiv = s.appendNewDOM($svgDiv); } } require(['music21'], function () { s = new music21.stream.Stream(); music21.webmidi.createSelector($("#putMidiSelectHere")); music21.miditools.callBacks.general = displayStream; }); </script> </head> <body> <div> MIDI Input: <div id="putMidiSelectHere" /> </div> <div id="svgDiv"> </div> </body> </html> **/ </pre> </article> </section> </div> <div class="clearfix"></div> <footer> <span class="copyright"> Music21j, Copyright © 2013-2018 Michael Scott Cuthbert and cuthbertLab. </span> <br /> <span class="jsdoc-message"> Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> on Wed Jul 4th 2018 using the <a href="https://github.com/terryweiss/docstrap">DocStrap template</a>. </span> </footer> </div> <br clear="both"> </div> </div>  <script src="scripts/docstrap.lib.js"></script> <script src="scripts/bootstrap-dropdown.js"></script> <script src="scripts/toc.js"></script> <script> $( function () { $( "[id*='$']" ).each( function () { var $this = $( this ); $this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) ); } ); $( "#toc" ).toc( { anchorName : function ( i, heading, prefix ) { return $( heading ).attr( "id" ) || ( prefix + i ); }, selectors : "h1,h2,h3,h4", showAndHide : false, scrollTo : "100px" } ); $( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" ); $( "#main span[id^='toc']" ).addClass( "toc-shim" ); $( '.dropdown-toggle' ).dropdown(); // $( ".tutorial-section pre, .readme-section pre" ).addClass( "sunlight-highlight-javascript" ).addClass( "linenums" ); $( ".tutorial-section pre, .readme-section pre" ).each( function () { var $this = $( this ); var example = $this.find( "code" ); exampleText = example.html(); var lang = /{@lang (.*?)}/.exec( exampleText ); if ( lang && lang[1] ) { exampleText = exampleText.replace( lang[0], "" ); example.html( exampleText ); lang = lang[1]; } else { lang = "javascript"; } if ( lang ) { $this .addClass( "sunlight-highlight-" + lang ) .addClass( "linenums" ) .html( example.html() ); } } ); Sunlight.highlightAll( { lineNumbers : true, showMenu : true, enableDoclinks : true } ); } ); </script>   </body> </html>