crunker

Simple way to merge or concatenate audio files with the Web Audio API.

Usage no npm install needed!

<script type="module">
  import crunker from 'https://cdn.skypack.dev/crunker';
</script>

README

Crunker

Experimental, use in production with caution

Simple way to merge, concatenate, play, export and download audio files with the Web Audio API.

  • No dependencies
  • Tiny 2kB gzipped
  • Written in Typescript

Installation

yarn add crunker
npm install crunker

Example

let crunker = new Crunker();

crunker
  .fetchAudio("/song.mp3", "/another-song.mp3")
  .then(buffers => {
    // => [AudioBuffer, AudioBuffer]
    return crunker.mergeAudio(buffers);
  })
  .then(merged => {
    // => AudioBuffer
    return crunker.export(merged, "audio/mp3");
  })
  .then(output => {
    // => {blob, element, url}
    crunker.download(output.blob);
    document.body.append(output.element);
    console.log(output.url);
  })
  .catch(error => {
    // => Error Message
  });

crunker.notSupported(() => {
  // Handle no browser support
});

Condensed Example

let crunker = new Crunker();

crunker
  .fetchAudio("/voice.mp3", "/background.mp3")
  .then(buffers => crunker.mergeAudio(buffers))
  .then(merged => crunker.export(merged, "audio/mp3"))
  .then(output => crunker.download(output.blob))
  .catch(error => {
    throw new Error(error);
  });

Input file Example

let crunker = new Crunker();

const onFileInputChange = async (target) => {
  const buffers = await crunker.fetchAudio(...target.files, "/voice.mp3", "/background.mp3");
};

<input
  onChange={onFileInputChange(this)}
  type="file"
  accept="audio/*"
/>

Graphic Representation of Methods

Merge

merge

Concat

concat

Methods

For more detailed API documentation, view the Typescript typings.

new Crunker({ sampleRate: 44100 })

Create a new Crunker. You may optionally provide an object with a sampleRate key, defaults to 44100.

crunker.fetchAudio(songURL, anotherSongURL)

Fetch one or more audio files. Returns: an array of audio buffers in the order they were fetched.

crunker.mergeAudio(arrayOfBuffers);

Merge two or more audio buffers. Returns: a single AudioBuffer object.

crunker.concatAudio(arrayOfBuffers);

Concatenate two or more audio buffers in the order specified. Returns: a single AudioBuffer object.

crunker.padAudio(buffer, padStart, seconds);

Pad the audio with silence, at the beginning, the end, or any specified points through the audio. Returns: a single AudioBuffer object.

crunker.export(buffer, type);

Export an audio buffers with MIME type option. Type: 'audio/mp3', 'audio/wav', 'audio/ogg'. Returns: an object containing the blob object, url, and an audio element object.

crunker.download(blob, filename);

Automatically download an exported audio blob with optional filename. Filename: String not containing the .mp3, .wav, or .ogg file extension. Returns: the HTMLAnchorElement element used to simulate the automatic download.

crunker.play(buffer);

Starts playing the exported audio buffer in the background. Returns: the HTMLAudioElement.

crunker.notSupported(callback);

Execute custom code if Web Audio API is not supported by the users browser. Returns: The callback function.

License

MIT