add opus

.env.example

@@ -0,0 +1 @@
+WS_URL=ws://localhost:3000

nuxt.config.ts

@@ -3,4 +3,15 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: ["@nuxtjs/tailwindcss"],
   plugins: ["~/plugins/websocket.ts"],
+  nitro: {
+    experimental: {
+      websocket: true,
+    }
+  },
+  ssr: false,
+  runtimeConfig: {
+    public: {
+      wsUrl: process.env.WS_URL,
+    }
+  }
 });

package.json

@@ -13,8 +13,10 @@
     "@nuxtjs/tailwindcss": "^6.12.0",
     "lucide-vue-next": "^0.378.0",
     "nuxt": "^3.11.2",
+    "opus-decoder": "^0.7.6",
     "vue": "^3.4.27",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "ws": "^8.17.0"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",

pages/audio/index.vue

@@ -1,9 +1,63 @@
 <script setup lang="ts">
+
 definePageMeta({
   layout: 'audio',
 })
+
+import {OpusDecoderWebWorker} from 'opus-decoder';
+//import WebSocket from 'ws';
+
+
+function start() {
+  const socket = new WebSocket('ws://localhost:3000/api/audio');
+
+  socket.binaryType = 'arraybuffer';
+  socket.onopen = (event) => {
+    console.log('Connected to audio websocket');
+  };
+
+  socket.onerror = (event) => {
+    console.log(event);
+
+    console.log('Error connecting to audio websocket');
+  };
+
+  const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+  const sampleRate = audioCtx.sampleRate;
+
+  socket.onmessage = async (event) => {
+    console.log('Received message: ' + event.data);
+    const data = event.data;
+    console.log('Received data: ' + data);
+
+
+    const decoder = new OpusDecoderWebWorker({ channels: 2 });
+
+    await decoder.ready;
+    const decoded = await decoder.decodeFrame(data);
+    console.log('Decoded data: ' + decoded);
+
+    // play audio
+    const audioCtx = new AudioContext();
+    const source = audioCtx.createBufferSource();
+    const buffer = audioCtx.createBuffer(2, decoded.samplesDecoded, sampleRate);
+
+    for (let channel = 0; channel < 2; channel++) {
+      buffer.copyToChannel(decoded.channelData[channel], channel);
+    }
+    source.buffer = buffer;
+    source.connect(audioCtx.destination);
+    source.start();
+  };
+
+  socket.onclose = (event) => {
+    console.log('Disconnected from audio websocket');
+  };
+}
+
 </script>
 
 <template>
   <h1>Test Audio</h1>
+  <button @click="start">Start</button>
 </template>