Feeds an existing audio element into the AudioContext.
const audioElement = document.querySelector('audio');
const audioCtx = new AudioContext();
const source = audioCtx.createMediaElementSource(audioElement);
source.connect(audioCtx.destination);
The following creates a JavaScript promise fetching an audio file from a URL into an arrayBuffer. From this arrayBuffer we can either create a new Blob to integrate the audio into an audio Element on the site or decode the audio for passing it on as the source to the audioContext.
async function loadAudioWithAjax() {
const arrayBuffer = await (await fetch('audio.ogg')).arrayBuffer();
audioURL = URL.createObjectURL(new Blob([arrayBuffer]));
const audioCtx = new AudioContext();
const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);
const source = audioCtx.createBufferSource();
source.buffer = audioBuffer;
source.connect(audioCtx.destination);
}
async function recordFromMicrophone() {
let chunks = [];
let stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
let mediaRecorder = new MediaRecorder(stream, { mimeType: "video/webm" });
mediaRecorder.start();
mediaRecorder.ondataavailable = function (e) { chunks.push(e.data); };
mediaRecorder.onstop = async function () {
let blob = new Blob(chunks, { type: mediaRecorder.mimeType });//+'; codecs=opus' });//
audioURL = URL.createObjectURL(blob);
let arrayBuffer = await (await fetch(audioURL)).arrayBuffer();
...
}
}
function loadAudioFile(file) {
let reader = new FileReader();
reader.onloadend = async function () {
let arrayBuffer = this.result;
...
}
reader.readAsArrayBuffer(file);
}
let ctx = new OfflineAudioContext(audioBuffer.numberOfChannels, audioBuffer.length, audioBuffer.sampleRate);
let source = ctx.createBufferSource();
source.buffer = audioBuffer;
// some effect
// source.connect(effect)
effect.connect(ctx.destination);
// Render
source.start();
let outputAudioBuffer = await ctx.startRendering();
return outputAudioBuffer;
let convolver = ctx.createConvolver();
convolver.buffer = await ctx.decodeAudioData(await (await fetch("./audio/church.wav")).arrayBuffer());
source.connect(convolver);
convolver.connect(ctx.destination);
WaveShaper BiquadFilter Gain DynamicsCompressor
loops through inputChannels, delays the source and creates new outputChannels
uses Google Jungle library
Oscillators BiquadFilters Gains DynamicsCompressors
recorder.js, vmsg and opus-recorder
w3c Editor's draft: https://w3c.github.io/mediacapture-record/
Chrome and Opera will record mono channel Opus (default) and pcm (wav, uncompressed) audio at 48kHz in .webm (Matroska) containers.
Firefox will record mono Opus audio at 48kHz in .ogg containers (.webm is supported starting with Firefox 63). Firefox used Vorbis for audio recording in the 1st implementations but it moved to Opus since.
Data stream saved as a Blob in browser cache. Chrome uses webm and opus audio codec.