Update README.md

README.md

@@ -432,6 +432,136 @@ predictions = thread.get( # same arguments as queue.Queue.get()
 first_audio_has_wakeword = predictions[0] # bool by default
 ```
 
+# Errata
+
+These are some potentially useful JavaScript snippets for working with raw audio samples.
+
+```js
+/**
+ * Play audio samples using the Web Audio API.
+ * @param {Float32Array} audioSamples - The audio samples to play.
+ * @param {number} sampleRate - The sample rate of the audio samples.
+ */
+function playAudioSamples(audioSamples, sampleRate = 16000) {
+    // Create an AudioContext
+    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+
+    // Create an AudioBuffer
+    const audioBuffer = audioContext.createBuffer(
+        1, // number of channels
+        audioSamples.length, // length of the buffer in samples
+        sampleRate // sample rate (samples per second)
+    );
+
+    // Fill the AudioBuffer with the Float32Array of audio samples
+    audioBuffer.getChannelData(0).set(audioSamples);
+
+    // Create a BufferSource node
+    const source = audioContext.createBufferSource();
+    source.buffer = audioBuffer;
+
+    // Connect the source to the AudioContext's destination (the speakers)
+    source.connect(audioContext.destination);
+
+    // Start playback
+    source.start();
+};
+
+/**
+ * Turns floating-point audio samples to a Wave blob.
+ * @param {Float32Array} audioSamples - The audio samples to play.
+ * @param {number} sampleRate - The sample rate of the audio samples.
+ * @param {number} numChannels - The number of channels in the audio. Defaults to 1 (mono).
+ * @return {Blob} A blob of type `audio/wav`
+ */
+function samplesToBlob(audioSamples, sampleRate = 16000, numChannels = 1) {
+    // Helper to write a string to the DataView
+    const writeString = (view, offset, string) => {
+        for (let i = 0; i < string.length; i++) {
+            view.setUint8(offset + i, string.charCodeAt(i));
+        }
+    };  
+
+    // Helper to convert Float32Array to Int16Array (16-bit PCM)
+    const floatTo16BitPCM = (output, offset, input) => {
+        for (let i = 0; i < input.length; i++, offset += 2) {
+            let s = Math.max(-1, Math.min(1, input[i])); // Clamping to [-1, 1]
+            output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true); // Convert to 16-bit PCM
+        }
+    };  
+
+    const byteRate = sampleRate * numChannels * 2; // 16-bit PCM = 2 bytes per sample
+
+    // Calculate sizes
+    const blockAlign = numChannels * 2; // 2 bytes per sample for 16-bit audio
+    const wavHeaderSize = 44; 
+    const dataLength = audioSamples.length * numChannels * 2; // 16-bit PCM data length
+    const buffer = new ArrayBuffer(wavHeaderSize + dataLength);
+    const view = new DataView(buffer);
+
+    // Write WAV file headers
+    writeString(view, 0, 'RIFF'); // ChunkID
+    view.setUint32(4, 36 + dataLength, true); // ChunkSize
+    writeString(view, 8, 'WAVE'); // Format
+    writeString(view, 12, 'fmt '); // Subchunk1ID
+    view.setUint32(16, 16, true); // Subchunk1Size (PCM = 16)
+    view.setUint16(20, 1, true); // AudioFormat (PCM = 1)
+    view.setUint16(22, numChannels, true); // NumChannels
+    view.setUint32(24, sampleRate, true); // SampleRate
+    view.setUint32(28, byteRate, true); // ByteRate
+    view.setUint16(32, blockAlign, true); // BlockAlign
+    view.setUint16(34, 16, true); // BitsPerSample (16-bit PCM)
+    writeString(view, 36, 'data'); // Subchunk2ID
+    view.setUint32(40, dataLength, true); // Subchunk2Size
+
+    // Convert the Float32Array audio samples to 16-bit PCM and write them to the DataView
+    floatTo16BitPCM(view, wavHeaderSize, audioSamples);
+
+    // Create and return the Blob
+    return new Blob([view], { type: 'audio/wav' }); 
+}
+
+/**
+ * Renders a blob to an audio element with controls.
+ * Use `appendChild(result)` to add to the document or a node.
+ * @param {Blob} audioBlob - A blob with a valid audio type.
+ * @see samplesToBlob
+ */
+function blobToAudio(audioBlob) {
+    // Create data URL
+    const url = URL.createObjectURL(audioBlob);
+
+    // Create and configure audio element
+    const audio = document.createElement("audio");
+    audio.controls = true;
+    audio.src = url;
+    return audio;
+}
+
+/**
+ * Downloads a blob as a file.
+ * @param {Blob} blob - A blob with a type that can be converted to an object URL.
+ * @param {string} filename - The file name after downloading.
+ */
+function downloadBlob(blob, filename) {
+    // Create data URL
+    const url = URL.createObjectURL(blob);
+
+    // Create and configure link element
+    const link = document.createElement("a");
+    link.href = url;
+    link.setAttribute("download", filename);
+    link.style.display = "none";
+
+    // Add the link to the page, click, then remove
+    document.body.appendChild(link);
+    window.requestAnimationFrame(() => {
+        link.dispatchEvent(new MouseEvent("click"));
+        document.body.removeChild(link);
+    });
+}
+```
+
 # License
 
 - HeyBuddy source code and pretrained models are released under the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0.html).