https://github.com/otto-aa/midiplayer

Providing a simple interface to read and visualize midi files with javascript
https://github.com/otto-aa/midiplayer

javascript-library midi visualization

Last synced: 12 months ago
JSON representation

Providing a simple interface to read and visualize midi files with javascript

• Host: GitHub
• URL: https://github.com/otto-aa/midiplayer
• Owner: Otto-AA
• License: mit
• Created: 2017-11-11T09:53:15.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-11-19T22:05:37.000Z (over 8 years ago)
• Last Synced: 2025-04-14T20:41:20.201Z (about 1 year ago)
• Topics: javascript-library, midi, visualization
• Language: JavaScript
• Homepage:
• Size: 146 KB
• Stars: 3
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# MidiPlayer

Providing a simple interface to read and visualize midi files with javascript. It is based on [jasmid](https://github.com/gasman/jasmid) by [gasman](https://github.com/gasman). 

Other resources you might want to use in combination with this MidiPlayer are listed [here](#additional-resources). If you feel like some functionality is missing, you can create a feature request in the [issues section](https://github.com/Otto-AA/MidiPlayer/issues) and I will try to answer as soon as possible.

# Basic Example

This example demonstrates the basic usage of MidiPlayer. You can also view a [complete example](./examples/basic.html) and its [live demo](https://htmlpreview.github.io/?https://github.com/Otto-AA/MidiPlayer/blob/master/examples/basic.html)

```javascript

var player = new MidiPlayer();

player.addCallback('noteOn', function (event) {/* handle noteOn event */});

player.addCallback('noteOff', function (event) {/* handle noteOff event */});

player.loadFromRelativeUrl('./test.mid')

    .then(function() { player.play(); });

```

# Tutorial and Documentation

For **MidiPlayer.js** aswell as **MidiParser.js**

- [Tutorials](./tutorials)

- [Documentations](./docs)

- [Examples](./examples)

# Browser Support

|![Chrome](https://github.com/alrra/browser-logos/raw/master/src/chrome/chrome_48x48.png) | ![Firefox](https://github.com/alrra/browser-logos/raw/master/src/firefox/firefox_48x48.png) | ![Edge](https://github.com/alrra/browser-logos/raw/master/src/edge/edge_48x48.png) | ![Opera](https://github.com/alrra/browser-logos/raw/master/src/opera/opera_48x48.png) | ![Safari](https://github.com/alrra/browser-logos/raw/master/src/safari/safari_48x48.png) |

|---------|-----------|----------|--------------|--------------|

|Latest ✔ | Latest ✔ | Latest ✔ | *Not Tested* | *Not Tested* |

Feel free to contribute to this list, especially if you can provide info about older versions of the browsers :)