{"repo":"cifkao/html-midi-player","free":true,"listed":false,"github":"https://github.com/cifkao/html-midi-player","clone":"git clone https://github.com/cifkao/html-midi-player.git","description":"🎹 Play and display MIDI files on the web","language":"TypeScript","stars":899,"topics":["player","midi","javascript","typescript","html","magenta-js","midi-file","web-components","web-component","midi-player"],"license":"BSD-2-Clause","category":"ui-components","readme_excerpt":"html-midi-player and HTML elements powered by @magenta/music (Magenta.js), fully stylable and scriptable. Works in Jupyter notebooks, Colab, and Weights & Biases thanks to the midi-player Python package by @drscotthawley. Simple demo Advanced demo Website [source] with MIDI file upload Notable websites that use html-midi-player include abcnotation.com, Musical Nexus and demo websites for music generation models: piano infilling, stochastic positional encoding. If you use html-midi-player on your website, please consider linking back to the repository. Getting started 1. Add the necessary scripts to your page: 2. Add a player and a visualizer: That's it! Besides jsDelivr, the bundle is also available from cdnjs. Installing from NPM You can also add the package to your project from NPM, e.g. npm install --save html-midi-player or yarn add html-midi-player . Then you can either: - import 'html-midi-player' in your JavaScript code (as an ES Module), or - add the node modules/html-midi-player/dist/midi-player.min.js bundle directly to your page, along with the dependencies ( node modules/tone/build/Tone.js , node modules/@magenta/music/es6/core.js ; note that these need to go before html-midi-player ). API basics The basic features of html-midi-player are explained below. Wherever both HTML and JavaScript examples are given, they are equivalent. In the JavaScript examples, player and visualizer refer to the corresponding custom element objects, which can be obtained using standard","default_branch":null,"files":null,"tree":[],"storefront":"/r/cifkao","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/cifkao/html-midi-player/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}