Convert Figma logo to code with AI

meenie logoband.js

Band.js - Music composer interface for the Web Audio API.

1,185
95
1,185
12

Top Related Projects

13,925

A Web Audio framework for making interactive music in the browser.

24,778

Javascript audio library for the modern web.

Library to simplify the way you create and manipulate sounds with the Web Audio API.

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

  1. Include Band.js in your HTML file:

    <script src="https://cdn.jsdelivr.net/gh/meenie/band.js@master/dist/band.min.js"></script>
    
  2. Create a new conductor and instrument:

    var conductor = new BandJS();
    conductor.setTimeSignature(4, 4);
    conductor.setTempo(120);
    
    var instrument = conductor.createInstrument('piano');
    
  3. Add notes or chords to the instrument:

    instrument.note('quarter', 'C4')
              .note('quarter', 'E4')
              .note('quarter', 'G4')
              .note('quarter', 'C5');
    
  4. Play the composition:

    conductor.play();
    

Competitor Comparisons

13,925

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.

24,778

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Band.js - Music Composer

An interface for the Web Audio API that supports rhythms, multiple instruments, repeating sections, and complex time signatures.

Get Started

  1. Install Band.js:

    npm install @meenie/band.js
    # or
    bun install @meenie/band.js
    
  2. 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

In The News

API

Conductor Class
MethodParamsDescription
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: 4This 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: 120Set the tempo (BPM) of the music. If a player has been instantiated, then the onDurationChangeCallback will be called.
setMasterVolume(volume)volume: 1Set the master volume of the music. From 0 to 1 (0-100% volume).
getTotalSeconds()n/aReturns the total number of seconds a song is.
setNoteBufferLength(bufferLength)bufferLength: 20Set 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/aTotals up the duration of the song and returns the Player Class.
setOnFinishedCallback(callback)callback: FuncPass in a function that will be called when the music has completed.
setTickerCallback(callback)callback: FuncPass 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: FuncPass 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: SongJSONLoad 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
MethodParamsDescription
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 an AudioNode (like OscillatorNode or AudioBufferSourceNode) connected to the provided destination. The frequency is provided for pitched instruments. See src/instrument-packs/ for examples like oscillators.ts or noises.ts.
Player Class - Returned from the Conductor Class when calling Conductor.finish()
MethodParamsDescription
play()n/aPlay the music.
pause()n/aPause the music.
stop(fadeOut)fadeOut: trueStop the music with a slight fade out. If you don't want the fade, pass in false.
mute(callback)n/aMutes the music. You can pass in a function as a callback when the music completely faded.
unmute(callback)n/aUnmute the music. You can pass in a function as a callback when the music is completely faded up.
loop(loop)loop: falsePass in true if you want the music to keep looping forever.
setTime(seconds)seconds: 0You 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.
MethodParamsDescription
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: 1Sets 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/aPuts in a marker where a section of music should be repeated from.
repeat(times)times: 1Used 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:

  1. Clone the repository:
    git clone https://github.com/meenie/band.js.git
    cd band.js
    
  2. Install dependencies:
    bun install
    
  3. Build the library:
    bun run build
    
    This will output the bundled files to the dist/ directory.
  4. Run tests:
    bun test
    

License

Copyright 2013-2025 Cody Lundquist and various contributors. Released under the MIT License (MIT).

NPM DownloadsLast 30 Days