Top Related Projects
Quick Overview
Band.js is a JavaScript library for creating music and audio in the browser. It provides an interface for composing and playing back musical pieces using Web Audio API, allowing developers to create dynamic and interactive music experiences on web pages.
Pros
- Easy-to-use API for creating musical compositions
- Supports various instruments and sound types
- Allows for dynamic tempo and pitch adjustments
- Works across modern browsers that support Web Audio API
Cons
- Limited documentation and examples
- Not actively maintained (last commit was in 2017)
- Lacks advanced features found in more comprehensive audio libraries
- May have compatibility issues with newer browser versions
Code Examples
Creating a simple melody:
var conductor = new BandJS();
conductor.setTimeSignature(4, 4);
conductor.setTempo(120);
var piano = conductor.createInstrument('piano');
piano.note('quarter', 'C4')
.note('quarter', 'E4')
.note('quarter', 'G4')
.note('quarter', 'C5');
conductor.play();
Adjusting tempo dynamically:
var conductor = new BandJS();
conductor.setTimeSignature(4, 4);
conductor.setTempo(80);
var violin = conductor.createInstrument('violin');
violin.note('whole', 'A4');
conductor.play();
setTimeout(() => {
conductor.setTempo(120);
}, 2000);
Creating a chord progression:
var conductor = new BandJS();
conductor.setTimeSignature(4, 4);
conductor.setTempo(100);
var guitar = conductor.createInstrument('acoustic');
guitar.chord('quarter', ['C4', 'E4', 'G4'])
.chord('quarter', ['F4', 'A4', 'C5'])
.chord('quarter', ['G4', 'B4', 'D5'])
.chord('quarter', ['C4', 'E4', 'G4']);
conductor.play();
Getting Started
-
Include Band.js in your HTML file:
<script src="https://cdn.jsdelivr.net/gh/meenie/band.js@master/dist/band.min.js"></script>
-
Create a new conductor and instrument:
var conductor = new BandJS(); conductor.setTimeSignature(4, 4); conductor.setTempo(120); var instrument = conductor.createInstrument('piano');
-
Add notes or chords to the instrument:
instrument.note('quarter', 'C4') .note('quarter', 'E4') .note('quarter', 'G4') .note('quarter', 'C5');
-
Play the composition:
conductor.play();
Competitor Comparisons
A Web Audio framework for making interactive music in the browser.
Pros of Tone.js
- More comprehensive and feature-rich audio library
- Better documentation and larger community support
- Actively maintained with regular updates
Cons of Tone.js
- Steeper learning curve due to its complexity
- Larger file size, which may impact load times
Code Comparison
Band.js example:
var conductor = new BandJS();
conductor.setTimeSignature(4, 4);
conductor.setTempo(120);
var piano = conductor.createInstrument();
piano.note('quarter', 'C4');
piano.note('quarter', 'E4');
piano.note('half', 'G4');
Tone.js example:
const synth = new Tone.Synth().toDestination();
const now = Tone.now();
synth.triggerAttackRelease("C4", "4n", now);
synth.triggerAttackRelease("E4", "4n", now + 0.5);
synth.triggerAttackRelease("G4", "2n", now + 1);
Both libraries allow for creating and playing musical notes, but Tone.js offers more advanced features and control over audio synthesis and processing. Band.js focuses on simplicity and ease of use for basic music creation, while Tone.js provides a more powerful toolkit for complex audio applications.
Javascript audio library for the modern web.
Pros of Howler.js
- More comprehensive audio support, including Web Audio API and HTML5 Audio
- Better cross-browser compatibility and mobile device support
- Actively maintained with regular updates and a larger community
Cons of Howler.js
- Larger file size, which may impact load times for smaller projects
- Steeper learning curve due to more features and options
- Less focused on music creation and sequencing compared to Band.js
Code Comparison
Band.js (Music sequencing):
var conductor = new BandJS();
conductor.setTimeSignature(4, 4);
conductor.setTempo(120);
var piano = conductor.createInstrument();
piano.note('quarter', 'C4');
piano.note('quarter', 'E4');
piano.note('half', 'G4');
Howler.js (Audio playback):
var sound = new Howl({
src: ['sound.webm', 'sound.mp3'],
autoplay: true,
loop: true,
volume: 0.5,
onend: function() {
console.log('Finished!');
}
});
Band.js focuses on creating music sequences programmatically, while Howler.js is designed for general audio playback and management. Band.js is better suited for projects requiring music composition, while Howler.js excels in audio playback across various platforms and browsers.
Library to simplify the way you create and manipulate sounds with the Web Audio API.
Pros of Pizzicato
- More focused on sound synthesis and effects processing
- Offers a wider range of built-in sound effects
- Provides real-time audio manipulation capabilities
Cons of Pizzicato
- Less suitable for creating complex musical compositions
- Lacks built-in sequencing and timing features
- More limited in terms of instrument simulation
Code Comparison
Pizzicato example:
var sound = new Pizzicato.Sound({
source: 'wave',
options: { type: 'sine', frequency: 440 }
});
sound.play();
Band.js example:
var conductor = new BandJS();
conductor.setTimeSignature(4, 4);
conductor.setTempo(120);
conductor.createInstrument('sine', 'oscillators');
conductor.note('quarter', 'sine', 'A4');
conductor.play();
Summary
Pizzicato is better suited for sound synthesis and audio effects processing, offering a wide range of built-in effects and real-time manipulation. Band.js, on the other hand, excels in creating complex musical compositions with its sequencing and timing features. Pizzicato's code focuses on individual sound creation and manipulation, while Band.js emphasizes musical structure and composition. Choose Pizzicato for sound design and effects, and Band.js for more traditional music creation and sequencing.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Band.js - Music Composer
An interface for the Web Audio API that supports rhythms, multiple instruments, repeating sections, and complex time signatures.
Get Started
-
Install Band.js:
npm install @meenie/band.js # or bun install @meenie/band.js
-
Set up your project to use ES Modules. Then, import
Conductor
:import Conductor from '@meenie/band.js'; // Create a new Conductor instance. // Default packs (oscillators, noises, northAmerican & european rhythms, equalTemperament tuning) // are loaded automatically when Conductor is imported. const conductor = new Conductor(); // You can also specify tuning and rhythm packs by name: // const conductor = new Conductor('equalTemperament', 'northAmerican'); // Set time signature and tempo conductor.setTimeSignature(4, 4); conductor.setTempo(120); // Create an instrument using the default oscillators pack const piano = conductor.createInstrument('sine', 'oscillators'); // Or use default pack (oscillators is the default): // const piano = conductor.createInstrument('sine'); // Start adding notes using rhythms from the loaded rhythm pack piano.note('quarter', 'C4'); piano.note('quarter', 'D4'); piano.note('quarter', 'E4'); piano.note('quarter', 'F4'); // Tell the conductor everything is done const player = conductor.finish(); // Start playing the music player.play();
Examples
- Super Mario Bros Theme - Created by me
- Tetris Theme - Created by rooktakesqueen
- Zelda Main Theme - Created by legosjedi
- Frog's Theme - Chrono Trigger - Created by Me & Jarred Mack
- Modernized examples can also be found in the
examples/
directory of the project repository.
In The News
API
Conductor Class
Method | Params | Description |
---|---|---|
constructor(tuningName, rhythmPackName) | tuningName: 'equalTemperament' rhythmPackName: 'northAmerican' | When creating a new Conductor object, you can pass in the names of the tuning and rhythm notation packs you want to use. These packs must be loaded beforehand using Conductor.loadPack() . By default, if these packs are loaded with the names 'equalTemperament' and 'northAmerican', the constructor will use them. |
setTimeSignature(top, bottom) | top: 4 bottom: 4 | This will set the Time Signature for the music. Any number of top numbers (how many beats per bar) can be set, but the bottom number (which note gets the beat) can only be 2, 4, or 8. |
setTempo(bpm) | bpm: 120 | Set the tempo (BPM) of the music. If a player has been instantiated, then the onDurationChangeCallback will be called. |
setMasterVolume(volume) | volume: 1 | Set the master volume of the music. From 0 to 1 (0-100% volume). |
getTotalSeconds() | n/a | Returns the total number of seconds a song is. |
setNoteBufferLength(bufferLength) | bufferLength: 20 | Set the number of notes that are buffered every (tempo / 60 * 5) seconds. WARNING The higher this is, the more memory is used and can crash your browser. If notes are being dropped, you can increase this, but be wary of used memory. |
finish() | n/a | Totals up the duration of the song and returns the Player Class. |
setOnFinishedCallback(callback) | callback: Func | Pass in a function that will be called when the music has completed. |
setTickerCallback(callback) | callback: Func | Pass in a function that will be called every second the music is playing. It will pass the current number of seconds that have passed. |
setOnDurationChangeCallback(callback) | callback: Func | Pass in a function that will be called when the duration of a song has changed. Most likely it's because you have changed the tempo of a song. |
createInstrument(name, pack) | name: 'sine' pack: 'oscillators' | Creates an instrument that you can add notes/rests with. The first argument is the name of the instrument sound (e.g., 'sine', 'square' for oscillators; 'white', 'pink' for noises) and the second is the name of the instrument pack it should use (e.g., 'oscillators', 'noises'). The specified pack must be loaded first via Conductor.loadPack() . If pack is not specified, it defaults to 'oscillators'. |
load(json) | json: SongJSON | Load a song into Band.js using JSON. Returns the Player Class. (This will erase your current song and overwrite it with this new one). See the "Loading Songs with JSON" section below for the required format. |
Loading Songs with JSON
The load(json)
method expects a JSON object with the following structure:
{
"timeSignature": [4, 4],
"tempo": 100,
"instruments": {
"rightHand": {
"name": "square",
"pack": "oscillators"
},
"leftHand": {
"name": "sawtooth",
"pack": "oscillators"
}
},
"notes": {
"rightHand": [
"quarter|E5, F#4|tie",
"quarter|rest",
"quarter|E5, F#4",
"quarter|rest"
],
"leftHand": [
{
"type": "note",
"pitch": "D3",
"rhythm": "quarter"
}
]
}
}
Conductor Class Static Methods
Method | Params | Description |
---|---|---|
loadPack(type, name, data) | type (string): 'instrument', 'rhythm', or 'tuning'name (string): Name you want to give the packdata (object/module): The imported pack module/data. | Use this method to load in different packs.Example: |
import Conductor from '@meenie/band.js';
import oscillatorsPack from '@meenie/band.js/instrument-packs/oscillators';
import customRhythms from './my-custom-rhythms'; // Assuming a local file
Conductor.loadPack('instrument', 'oscillators', oscillatorsPack);
Conductor.loadPack('rhythm', 'myCustomSet', customRhythms);
Data Format:
- Rhythm Pack (
type: 'rhythm'
):data
should be an object where keys are rhythm names (e.g., 'whole', 'half') and values are their duration multipliers (e.g.,1
,0.5
). Example:{ whole: 1, half: 0.5 }
. - Tuning Pack (
type: 'tuning'
):data
should be an object where keys are pitch names (e.g., 'A4', 'C#5') and values are their frequencies in Hz (e.g.,440.00
,554.37
). Example:{'A4': 440.00, 'A#4': 466.16}
. - Instrument Pack (
type: 'instrument'
):data
is typically an imported module which is a function. This function is called by Band.js with(soundName, audioContext)
and should return an object with at least one method:createNote(destination, frequency?)
. This method is responsible for creating and returning anAudioNode
(likeOscillatorNode
orAudioBufferSourceNode
) connected to the provideddestination
. Thefrequency
is provided for pitched instruments. Seesrc/instrument-packs/
for examples likeoscillators.ts
ornoises.ts
.
Player Class - Returned from the Conductor Class when calling Conductor.finish()
Method | Params | Description |
---|---|---|
play() | n/a | Play the music. |
pause() | n/a | Pause the music. |
stop(fadeOut) | fadeOut: true | Stop the music with a slight fade out. If you don't want the fade, pass in false . |
mute(callback) | n/a | Mutes the music. You can pass in a function as a callback when the music completely faded. |
unmute(callback) | n/a | Unmute the music. You can pass in a function as a callback when the music is completely faded up. |
loop(loop) | loop: false | Pass in true if you want the music to keep looping forever. |
setTime(seconds) | seconds: 0 | You can set the specific time a song should start playing at. This is handy for seeking time. |
Instrument Class - Created by using the Conductor.createInstrument()
method.
Method | Params | Description |
---|---|---|
note(rhythm, pitch, tie) | rhythm : Must be set (string, e.g., 'quarter')pitch : Optional (string/number/array, e.g., 'C4', 440, ['C4', 'E4'])tie: false (boolean) | Adds a note to the stack of notes for the particular instrument. rhythm refers to a key in a loaded rhythm pack. Common rhythms include: whole, dottedHalf, half, dottedQuarter, tripletHalf, quarter, dottedEighth, tripletQuarter, eighth, dottedSixteenth, tripletEighth, sixteenth, tripletSixteenth, thirtySecond. pitch can be any note name defined in the loaded tuning pack (e.g., 'C0' to 'C8', 'Bb3', 'G#7'), a frequency number, or an array for chords. For noise instruments, pitch is the noise type (e.g., 'white', 'pink'). tie can tie two notes together without any gap. |
rest(rhythm) | rhythm : Must be set (string) | Adds a rest to the list of notes. Use a rhythm name from a loaded rhythm pack. |
setVolume(volume) | volume: 1 | Sets the volume for this particular instrument. From 0 to 1 (0-100% volume). You can call this multiple times before notes to change their volume at that point of the music. |
repeatStart() | n/a | Puts in a marker where a section of music should be repeated from. |
repeat(times) | times: 1 | Used in conjunction with repeatStart() . Pass in how many times the section should be repeated. If no repeatStart() is set, it goes from the beginning. |
Development
If you want to contribute or build Band.js from source:
- Clone the repository:
git clone https://github.com/meenie/band.js.git cd band.js
- Install dependencies:
bun install
- Build the library:
This will output the bundled files to thebun run build
dist/
directory. - Run tests:
bun test
License
Copyright 2013-2025 Cody Lundquist and various contributors. Released under the MIT License (MIT).
Top Related Projects
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot