Simple way to merge, concatenate, play, export and download audio files with the Web Audio API.
yarn add crunker
npm install crunker
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
});
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);
});
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/*" />;
For more detailed API documentation, view the Typescript typings.
Create a new instance of Crunker.
You may optionally provide an object with a sampleRate
key, but it will default to the same sample rate as the internal audio context, which is appropriate for your device.
Fetch one or more audio files.\ Returns: an array of audio buffers in the order they were fetched.
Merge two or more audio buffers.\
Returns: a single AudioBuffer
object.
Concatenate two or more audio buffers in the order specified.\
Returns: a single AudioBuffer
object.
Pad the audio with silence, at the beginning, the end, or any specified points through the audio.\
Returns: a single AudioBuffer
object.
Slice the audio to the specified range, removing any content outside the range. Optionally add a fade-in at the start and a fade-out at the end to avoid audible clicks.
0
.0
.Returns: a single AudioBuffer
object.
Export an audio buffers with MIME type option.\
Type: e.g. 'audio/mp3', 'audio/wav', 'audio/ogg'
.
IMPORTANT: the MIME type does not change the actual file format. It will always be a WAVE
file under the hood.\
Returns: an object containing the blob object, url, and an audio element object.
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.
Starts playing the exported audio buffer in the background.\
Returns: the HTMLAudioElement
.
Execute custom code if Web Audio API is not supported by the users browser.\ Returns: The callback function.
For more detailed API documentation, view the Typescript typings.
Access the AudioContext used internally by a given Crunker.\ Returns: AudioContext.
MIT