Upload 2 files

index.js

@@ -1,29 +1,41 @@
-/** Configuration */
-const colors = {
-    "buddy": [0,119,187],
-    "hey buddy": [51,187,238],
-    "hi buddy": [0,153,136],
-    "sup buddy": [238,119,51],
-    "yo buddy": [204,51,17],
-    "okay buddy": [238,51,119],
-    "speech": [22,200,206],
-    "frame budget": [25,255,25]
-};
+/**
+ * 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)();
 
-const rootUrl = "https://huggingface.co/benjamin-paine/hey-buddy/resolve/main";
-const wakeWords = ["buddy", "hey buddy", "hi buddy", "sup buddy", "yo buddy", "okay buddy"];
-const canvasSize = { width: 640, height: 100 };
-const graphLineWidth = 1;
-const options = {
-    debug: true,
-    modelPath: wakeWords.map((word) => `${rootUrl}/models/${word.replace(' ', '-')}.onnx`),
-    vadModelPath: `${rootUrl}/pretrained/silero-vad.onnx`,
-    spectrogramModelPath: `${rootUrl}/pretrained/mel-spectrogram.onnx`,
-    embeddingModelPath: `${rootUrl}/pretrained/speech-embedding.onnx`,
+    // 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();
 };
 
-/** Helper method for conversion */
-const float32ToWavBlob = (audioData, sampleRate, numChannels = 1) => {
+/**
+ * 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++) {
@@ -44,7 +56,7 @@ const float32ToWavBlob = (audioData, sampleRate, numChannels = 1) => {
     // Calculate sizes
     const blockAlign = numChannels * 2; // 2 bytes per sample for 16-bit audio
     const wavHeaderSize = 44;
-    const dataLength = audioData.length * numChannels * 2; // 16-bit PCM data length
+    const dataLength = audioSamples.length * numChannels * 2; // 16-bit PCM data length
     const buffer = new ArrayBuffer(wavHeaderSize + dataLength);
     const view = new DataView(buffer);
 
@@ -64,19 +76,45 @@ const float32ToWavBlob = (audioData, sampleRate, numChannels = 1) => {
     view.setUint32(40, dataLength, true); // Subchunk2Size
 
     // Convert the Float32Array audio samples to 16-bit PCM and write them to the DataView
-    floatTo16BitPCM(view, wavHeaderSize, audioData);
+    floatTo16BitPCM(view, wavHeaderSize, audioSamples);
 
     // Create and return the Blob
     return new Blob([view], { type: 'audio/wav' });
 }
 
-/** Helper method for turning the audio samples into an audio element */
-const saveRecording = (audioContainer, audioSamples, sampleRate = 16000) => {
-    const blob = float32ToWavBlob(audioSamples, sampleRate);
-    const url = URL.createObjectURL(blob);
-    audioContainer.innerHTML = `<audio controls src="${url}"></audio>`;
+/**
+ * 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) {
+    const url = URL.createObjectURL(audioBlob);
+    const audio = document.createElement("audio");
+    audio.controls = true;
+    audio.src = url;
+    return audio;
 }
 
+/** Configuration */
+const colors = {
+    "buddy": [0,119,187],
+    "hey buddy": [51,187,238],
+    "hi buddy": [0,153,136],
+    "sup buddy": [238,119,51],
+    "yo buddy": [204,51,17],
+    "okay buddy": [238,51,119],
+    "speech": [22,200,206],
+    "frame budget": [25,255,25]
+};
+const wakeWords = ["buddy", "hey buddy", "hi buddy", "sup buddy", "yo buddy", "okay buddy"];
+const canvasSize = { width: 640, height: 100 };
+const graphLineWidth = 1;
+const options = {
+    debug: true,
+    modelPath: wakeWords.map((word) => `/models/${word.replace(' ', '-')}.onnx`)
+};
+
 /** Main */
 document.addEventListener("DOMContentLoaded", () => {
     /** DOM elements */
@@ -110,7 +148,10 @@ document.addEventListener("DOMContentLoaded", () => {
 
     // When recording is complete, replace the audio element
     heyBuddy.onRecording((audioSamples) => {
-        saveRecording(audioContainer, audioSamples);
+        const audioBlob = samplesToBlob(audioSamples);
+        const audioElement = blobToAudio(audioBlob);
+        audioContainer.innerHTML = "";
+        audioContainer.appendChild(audioElement);
     });
 
     /** Add graphs */