{"id":13659295,"url":"https://github.com/cwilso/WebMIDIAPIShim","last_synced_at":"2025-04-24T14:33:07.664Z","repository":{"id":4483704,"uuid":"5622793","full_name":"cwilso/WebMIDIAPIShim","owner":"cwilso","description":"Polyfill using the Jazz NPAPI MIDI plugin to implement the Web MIDI API on Mac and Windows.","archived":false,"fork":false,"pushed_at":"2018-11-28T22:47:12.000Z","size":840,"stargazers_count":382,"open_issues_count":8,"forks_count":51,"subscribers_count":24,"default_branch":"gh-pages","last_synced_at":"2025-04-05T13:09:25.694Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cwilso.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-08-31T00:32:40.000Z","updated_at":"2025-03-17T14:09:35.000Z","dependencies_parsed_at":"2022-09-21T00:20:24.474Z","dependency_job_id":null,"html_url":"https://github.com/cwilso/WebMIDIAPIShim","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cwilso%2FWebMIDIAPIShim","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cwilso%2FWebMIDIAPIShim/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cwilso%2FWebMIDIAPIShim/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cwilso%2FWebMIDIAPIShim/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cwilso","download_url":"https://codeload.github.com/cwilso/WebMIDIAPIShim/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250643670,"owners_count":21464218,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T05:01:07.193Z","updated_at":"2025-04-24T14:33:07.320Z","avatar_url":"https://github.com/cwilso.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Libraries: Web MIDI API"],"sub_categories":["Web MIDI API"],"readme":"# Web MIDI API Shim\n\n![nodejs](http://jazz-soft.github.io/img/nodejs.jpg)\n![chrome](http://jazz-soft.github.io/img/chrome.jpg)\n![firefox](http://jazz-soft.github.io/img/firefox.jpg)\n![safari](http://jazz-soft.github.io/img/safari.jpg)\n![opera](http://jazz-soft.github.io/img/opera.jpg)\n![msie](http://jazz-soft.github.io/img/msie.jpg)\n![windows](http://jazz-soft.github.io/img/windows.jpg)\n![macos](http://jazz-soft.github.io/img/macos.jpg)\n![linux](http://jazz-soft.github.io/img/linux.jpg)\n\nThis javascript library is a prototype polyfill for the [Web MIDI API](http://webaudio.github.io/web-midi-api/) of which Chris is a co-author.\n\nIt was originally designed to test usability of the API itself, but it is currently mainly used as a shim for Jazz-Soft's [Jazz-Plugin](http://jazz-soft.net/) to enable MIDI scenarios in browsers that don't yet support Web MIDI.\n\nThe library is actually a combination of a shim and a polyfill: as a polyfill it implements the WebMIDI API in browsers that don't support it natively, and as a shim it intercepts calls from and to the Jazz plugin. In this readme the terms polyfill and shim are used interchangeably.\n\nIncluding this library means Web MIDI should work in all browsers that are supported by the Jazz plugin. The library also makes the Web MIDI API available in Node.js applications.\n\nThe shim will automatically check to see if the Web MIDI API is already implemented, and if not it will insert itself.\n\nMultiple simultaneous inputs and outputs, and sending and receiving long messages (system exclusive) are supported. The shim also properly dispatches events. Timestamps on send and receive should be properly implemented now, although of course timing will not be very precise on either.\n\nThe library is very lightweight; the minified version is less than 17K in file-size.\n\n## Supported browsers\n\nAt the moment Chrome, Opera and the Android WebView component (KitKat and above) support the Web MIDI API natively.\n\nIn other browsers you need to have version 1.4.4 or higher of the Jazz plugin installed in order for the shim to work properly.\n\nInternet Explorer is supported from version 9 and up.\n\nNote that Chrome and Opera for iOS do not have the Web MIDI API implemented and since there is no Jazz plugin for any iOS browser either, you cannot use Web MIDI on iOS devices.\n\n## Support for Node.js applications\n\nThe Web MIDI API shim works with Node.js applications as well. The shim creates a global variable `navigator` that mimics the native `navigator` object in browsers. The `navigator` object has the method `requestMIDIAccess` and this means that you can share your Web MIDI API related code seamlessly across browser and Node.js projects.\n\nInstead of the Jazz plugin, the Node.js version uses the npm module [jazz-midi](https://www.npmjs.com/package/jazz-midi) to connect to the MIDI implementation of your operating system. A reference to `jazz-midi` is added to the global `navigator` object so you can query `jazz-midi` for instance to get the version number:\n\n```javascript\n// nodejs\nconsole.log(navigator.jazzMidi.version); // 1.5.1\n```\n\nThe `jazz-midi` package can be seen as the Node.js version of the Jazz browser plugin and is maintained by [Jazz Soft](http://jazz-soft.net/) as well.\n\n## Use the shim in your project\n\n### 1. As a separate script (browser only)\n\n1. Copy the file `WebMIDIAPI.min.js` from the `build` folder into your project.\n2. Optionally you can copy the source map file `WebMIDIAPI.min.js.map` as well\n3. Add `\u003cscript src=\"/your/path/to/WebMIDIAPI.min.js\"\u003e\u003c/script\u003e` to your HTML page before the script tag(s) of your own code.\n\nFor debugging purposes you can use the uncompressed version; you can find it in the `build` folder as well.\n\n### 2. Import as a module\n\nThis method is suitable for both Node.js and browser projects, and for both commonjs and es-next code.\n\nFirst install the package from npm:\n\n`npm i --save web-midi-api`\n\nor\n\n`yarn add web-midi-api`\n\nThen you can import the module into your code:\n\n```javascript\n// commonjs\nrequire('web-midi-api');\n\n// es-next\nimport 'web-midi-api';\n```\n\n## Sample usage\n\nAfter you have added the shim using any of the methods described above, you can use the Web MIDI API as captured in the specification.\n\nSo, some sample usage:\n\n```javascript\n// m = MIDIAccess object for you to make calls on\nvar m = null;\n\nnavigator.requestMIDIAccess().then(onSuccessCallback, onErrorCallback);\n\nfunction onSuccessCallback(access) {\n    // If the browser supports WebMIDI, access is a native MIDIAccess\n    // object. If not, it is an instance of a custom class that mimics\n    // the behavior of MIDIAccess using Jazz.\n    m = access;\n\n    // Things you can do with the MIDIAccess object:\n\n    // inputs = MIDIInputMaps, you can retrieve the inputs with iterators\n    var inputs = m.inputs;\n\n    // outputs = MIDIOutputMaps, you can retrieve the outputs with iterators\n    var outputs = m.outputs;\n\n    // returns an iterator that loops over all inputs\n    var iteratorInputs = inputs.values()\n\n    // get the first input\n    var input = iteratorInputs.next().value\n\n    // onmidimessage(event), event.data \u0026 event.receivedTime are populated\n    input.onmidimessage = myMIDIMessagehandler;\n\n    // returns an iterator that loops over all outputs\n    var iteratorOutputs = outputs.values()\n\n    // grab first output device\n    var output = iteratorOutputs.next().value;\n\n    // full velocity note on A4 on channel zero\n    output.send([0x90, 0x45, 0x7f]);\n\n    // full velocity A4 note off in one second.\n    output.send([0x80, 0x45, 0x7f], window.performance.now() + 1000);\n};\n\nfunction onErrorCallback(err) {\n    console.log('uh-oh! Something went wrong! Error code: ' + err.code);\n}\n```\n\n## Examples\n\n- [list_devices](http://cwilso.github.com/WebMIDIAPIShim/examples/list_devices) simple listing of all available MIDI devices\n- [routing_1](http://cwilso.github.com/WebMIDIAPIShim/examples/routing_1) example that lets you route MIDI inports to MIDI outports\n- [routing_2](http://cwilso.github.com/WebMIDIAPIShim/examples/routing_2) same routing example with slightly different code\n- [node](http://cwilso.github.com/WebMIDIAPIShim/examples/node) example that tests your MIDI in- and outports in Node.js\n\n\n## Building the polyfill\n\nThe polyfill is written in es-next so it needs to be transpiled to es5. You can find the es-next files in the `src` folder. If you change something in the es-next files, you need to build the polyfill again. To do this, you need to have [Node.js](http://nodejs.org/) and [npm](https://www.npmjs.org/) installed.\n\nFirst install the project dependencies using:\n\n`npm install`\n\nor\n\n`yarn install`\n\nThis will install all necessary develop dependencies, a.o. browserify and babelify.\n\nOptionally you can run a test script to check if everything has been installed correctly:\n\n`npm run test`\n\nDuring development you can start watchify which transpiles your code as soon as you save a changed file:\n\n`npm run watch`\n\nIf you're satisfied with the new code, you can run a complete build:\n\n`npm run update`\n\nThis compiles the files in the `src` folder to commonjs files and puts them in the `dist` folder. It also creates a browser bundle in es5 in the `build` folder.\n\n## Additional documentation\n\nIf you are new to npm and using npm packages in your project please visit the [npm site](https://docs.npmjs.com/). If you are new to bundling npm packages into an es5 web-bundle that can be used in the browser, consult the documentation one of these bundlers:\n\n* [browserify](https://github.com/substack/node-browserify#usage).\n* [webpack](https://webpack.js.org/)\n* [rollup](https://rollupjs.org/)\n\n## Folder layout\n\n* `build`: contains the transpiled and bundled version of the Web MIDI API shim, this is the script that you add as a separate script to your HTML page.\n* `dist`: contains the transpiled commonjs code, this code is used if you import the Web MIDI API shim as a module.\n* `examples`: some usage examples for browser and Node.js, written in es5.\n* `gh-pages`: styles and scripts used by the github.io landing page, does not contain any library code.\n* `node`: contains the entry point for Node.js applications; this scripts combines the Web MIDI API shim with the `jazz-midi` npm package. It also contains a Node.js test script that checks your MIDI in- and outports.\n* `src`: contains the actual code of this library, written in es-next, this code is by bundlers that support es-next (rollupjs).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcwilso%2FWebMIDIAPIShim","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcwilso%2FWebMIDIAPIShim","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcwilso%2FWebMIDIAPIShim/lists"}