guest271314
commented
2 years ago An example of resampling 44100, 2 channel WAV input to 48000 sample rate Float32Arrays using AudioContext (see https://github.com/w3c/webcodecs/issues/378), encoding to WebCodecs 'opus', playing back EncodedAudioChunk's with Media Source Extensions.
<!DOCTYPE html>
<html>
<head></head>
<body>
<input type="file" />
<script>
document.querySelector('input[type=file]').onchange = async (e) => {
const wav = await e.target.files[0].arrayBuffer();
const ac = new AudioContext({
sampleRate: 48000,
});
let timestamp = 0,
array = [],
chunks = [],
config = {
numberOfChannels: 2,
sampleRate: 48000,
codec: 'opus',
};
const ab = await ac.decodeAudioData(wav);
const left = ab.getChannelData(0);
const right = ab.getChannelData(1);
console.log(left, right);
for (let i = 0; i < left.length; i += 480) {
const data = new Float32Array(480 * 2);
data.set(left.subarray(i, i + 480), 0);
data.set(right.subarray(i, i + 480), 480);
const frame = new AudioData({
timestamp,
data,
sampleRate: 48000,
format: 'f32-planar',
numberOfChannels: 2,
numberOfFrames: 480,
});
timestamp += frame.duration;
array.push(frame);
}
console.log(array);
const encoder = new AudioEncoder({
error(e) {
console.log(e);
},
output: async (chunk, metadata) => {
if (metadata.decoderConfig) {
config.description = metadata.decoderConfig.description;
}
chunks.push(chunk);
},
});
console.log(await AudioEncoder.isConfigSupported(config));
encoder.configure(config);
for (const audioData of array) {
encoder.encode(audioData);
}
await encoder.flush();
console.log(chunks);
const audio = new Audio();
audio.controls = true;
const events = [
'loadedmetadata',
'loadeddata',
'canplay',
'canplaythrough',
'play',
'playing',
'pause',
'waiting',
'progress',
'seeking',
'seeked',
'ended',
'stalled',
'timeupdate',
];
for (const event of events) {
audio.addEventListener(event, async (e) => {
if (e.type === 'ended') {
}
if (e.type === 'loadedmetadata') {
console.log(e.type);
await audio.play();
}
});
}
document.body.appendChild(audio);
const ms = new MediaSource();
ms.addEventListener('sourceopen', async (e) => {
console.log(e.type, config);
URL.revokeObjectURL(audio.src);
const sourceBuffer = ms.addSourceBuffer({
audioConfig: config,
});
console.log(ms.activeSourceBuffers);
sourceBuffer.onupdate = (e) => console.log(e.type);
sourceBuffer.mode = 'sequence';
for (const chunk of chunks) {
await sourceBuffer.appendEncodedChunks(chunk);
}
});
audio.src = URL.createObjectURL(ms);
};
</script>
</body>
</html>
onthegit
Hello, thank you for the examples regarding the webcodecs apis.
I am trying to construct AudioData object from raw PCM data (retrieved from wav file). I have the following (parsed from the header of the WAV file):
And the actual Linear PCM data in ArrayBuffer.
How to construct the AudioData object from the ArrayBuffer so that it can be passed for encoding to "opus" codec.
How to construct the rest of the ArrayBuffer into AudioData? The
data.byteLength = 10406468AudioEncoder config:
Thanks.