danigb / soundfont-player

Quick soundfont loader and player for browser
MIT License
457 stars 59 forks source link
midi player sampler soundfonts

soundfont-player npm

Build Status js-standard-style license

⚠️ Archived. There are better alternatives. This is one of it: https://github.com/danigb/smplr Thanks for the fish! ⚠️

A soundfont loader/player to play MIDI sounds using WebAudio API.

It loads Benjamin Gleitzman's package of pre-rendered sound fonts by default with no server setup. Just a few lines of javascript:

Soundfont.instrument(new AudioContext(), 'acoustic_grand_piano').then(function (piano) {
  piano.play('C4')
})

It is a much simpler and lightweight replacement for MIDI.js soundfont loader (MIDI.js is much bigger, capable of play midi files, for example, but it weights an order of magnitude more).

Features

It uses audio-loader to load soundfont files and sample-player to play the sounds.

Install

Via npm: npm install --save soundfont-player

Or download the minified code and include it in your html:

<script src="https://github.com/danigb/soundfont-player/raw/master/soundfont-player.js"></script>
<script>
  Soundfont.instrument(new AudioContext(), 'marimba').then(function (marimba) {
  })
</script>

Usage

The soundfont loader

Out of the box are two Soundfonts available: MusyngKite and FluidR3_GM (MusyngKite by default: has more quality, but also weights more). You can load them with instrument function:

Soundfont.instrument(ac, 'clavinet').then(function (clavinet) {
  clavinet.play('C4')
})
// or use FluidR3_GM
Soundfont.instrument(ac, 'clavinet', { soundfont: 'FluidR3_GM' }).then(function (clavinet) {
  clavinet.play('C4')
})

You can load your own Soundfont files passing the .js path or url:

Soundfont.instrument(ac, '/soundfonts/clavinet-mp3.js').then(...)
// or
Soundfont.instrument(ac, 'clavinet-mp3.js', { from: 'server.com/soundfonts/' })

The soundfont player

Once you have an instrument you can:

// The first step is always create an instrument:
Soundfont.instrument(ac, 'clavinet').then(function (clavinet) {
  // Then you can play a note using names or midi numbers:
  clavinet.play('C4')
  clavinet.play(69)
  // float point midi numbers are accepted (and notes are detuned):
  clavinet.play(60.5) // => 500 cents over C4

  // you can stop all playing notes
  clavinet.stop()
  // or stop only one
  clavinet.play('C4').stop(ac.currentTime + 0.5)
  // or pass a duration argument to `play`
  clavinet.play('C4', ac.currentTime, { duration: 0.5})

  // You can connect the instrument to a midi input:
  window.navigator.requestMIDIAccess().then(function (midiAccess) {
    midiAccess.inputs.forEach(function (midiInput) {
      clavinet.listenToMidi(midiInput)
    })
  })

  // Or schedule events at a given time
  clavinet.schedule(ac.currentTime + 5, [ { time: 0, note: 60}, { time: 0.5, note: 61}, ...])
})

API

< 0.9.x users: The API in the 0.9.x releases has been changed and some features are going to be removed (like oscillators). While 0.9.0 adds warnings to the deprecated API, the 1.0.0 will remove the support.

instrument(ac, name, options) ⇒ Promise

Load a soundfont instrument. It returns a promise that resolves to a instrument object.

The instrument object returned by the promise has the following properties:

The valid options are:

Param Type Description
ac AudioContext the audio context
name String the instrument name. For example: 'acoustic_grand_piano'
options Object (Optional) the same options as Soundfont.loadBuffers

Example

var Soundfont = require('soundfont-player')
var ac = new AudioContext()
Soundfont.instrument(ac, 'marimba', { soundfont: 'MusyngKite' }).then(function (marimba) {
  marimba.play('C4')
})

The player

The player object returned by the promise has the following functions:

player.play

An alias for player.start

player.start(name, when, options) ⇒ AudioNode

Start a sample buffer. The returned object has a function stop(when) to stop the sound.

Valid options are:

player.stop(when, nodes) ⇒ Array

Stop some or all samples

player.on(event, callback) ⇒ player

Adds a listener of an event

player.connect(destination) ⇒ AudioPlayer

Connect the player to a destination node

player.schedule(when, events) ⇒ Array

Schedule a list of events to be played at specific time.

player.listenToMidi(input, options) ⇒ player

Connect a player to a midi input

See soundfont-player for more information.

nameToUrl(name, soundfont, format) ⇒ String

Given an instrument name returns a URL to to the Benjamin Gleitzman's package of pre-rendered sound fonts

Returns: String - the Soundfont file url

Param Type Description
name String instrument name
soundfont String (Optional) 'FluidR3_GM' or 'MusyngKite' ('MusyngKite' by default)
format String (Optional) Can be 'mp3' or 'ogg' (mp3 by default)

Example

var Soundfont = require('soundfont-player')
Soundfont.nameToUrl('marimba', null, 'ogg') // => http://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/marimba-ogg.js

 Run the tests, examples and build the library distribution file

First clone this repo and install dependencies: npm i

To run tests use npm: npm test

The dist folder contains ready to use file for browser. You can use the dist file from the repo, but if you want to build you own run: npm run dist

To run the html example start a local http server. For example:

npm install -g http-server
http-server

And open http://localhost:8080/examples

To run pure javascript examples npm install -g beefy then beefy examples/marimba.js and navigate to http://localhost:9966/

Available instruments

By default it loads Benjamin Gleitzman's pre-rendered SoundFonts.

Instrument names

You can download the names of the instruments as a .json file:

Or require them:

var fluidNames = require('soundfont-player/names/fuildR3.json')
var musyngNames = require('soundfont-player/names/musyngkite.json')

Resources

License

MIT License