sointu/examples/code/wasm/index.html

52 lines
1.6 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>sointu WASM example</title>
</head>
<body>
<script type="module">
// button to start audio context
const button = document.createElement("button");
button.innerHTML = "start";
document.body.appendChild(button);
button.onclick = () => {
document.body.removeChild(button);
fetch("test_chords.wasm")
.then((response) => response.arrayBuffer())
.then((bytes) => WebAssembly.instantiate(bytes, { m: Math }))
.then(({ instance }) => {
const context = new AudioContext({ sampleRate: 44100 });
let frames = instance.exports.t.value
? instance.exports.l.value / 4
: instance.exports.l.value / 8;
let wasmBuffer = new Float32Array(
instance.exports.m.buffer,
instance.exports.s.value,
frames * 2
);
const buffer = context.createBuffer(2, frames, context.sampleRate);
// convert wasm buffer to audio buffer
for (let channel = 0; channel < 2; channel++) {
const buffering = buffer.getChannelData(channel);
for (let i = 0; i < frames; i++) {
buffering[i] = wasmBuffer[i * 2 + channel];
}
}
// connect to output and start playing
const src = context.createBufferSource();
src.buffer = buffer;
src.connect(context.destination);
src.start();
});
};
</script>
</body>
</html>