Initial commit

pages/experiments/Player/TestWebAudioControlOfHowlMediaStream.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="p-4">
+    <h1 class="text-xl font-bold mb-4">Howler → MediaStream + volume Fade-In</h1>
+    <h3>Startet, Kontrolle der Lautstärke über volume-API, aber erst kommt 100% Lautstärke Audio, bevor es verstummt und dann einfaded</h3>
+    <button
+      class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 transition"
+      @click="startCaptureWithVolumeRamp"
+    >
+      Starten & Lautstärke einblenden
+    </button>
+    <div v-if="mediaStream" class="mt-4 text-green-700 font-mono">
+      ✅ MediaStream erzeugt!
+    </div>
+    <p v-if="error" class="text-red-600 mt-2">{{ error }}</p>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Howl } from 'howler'
+import tracksConfig from '~/tracks.config'
+
+const mediaStream = ref(null)
+const error = ref(null)
+
+const startCaptureWithVolumeRamp = async () => {
+  try {
+    const sound = new Howl({
+      src: [tracksConfig.lagoon_48_mp3_src],
+      html5: true,
+      preload: true,
+      muted: true
+    })
+
+    await new Promise(resolve => sound.once('load', resolve))
+
+    const audioElement = sound._sounds[0]._node
+
+    // Volume auf 0 (mute) setzen
+    audioElement.volume = 0
+
+    // captureStream vor play aufrufen
+    const stream = audioElement.captureStream()
+
+    // Starte Audio
+    sound.play()
+
+    // Starte Volume-Ramp (linear über ~3 Sekunden)
+    let volume = 0
+    const step = 0.05 // Schrittgröße
+    const interval = 150 // ms zwischen Schritten
+
+    const ramp = setInterval(() => {
+      volume += step
+      audioElement.volume = Math.min(1, volume)
+
+      if (volume >= 1) {
+        clearInterval(ramp)
+      }
+    }, interval)
+
+    mediaStream.value = stream
+  } catch (err) {
+    useNuxtApp().$logger.error(err)
+    error.value = 'Fehler beim Start: ' + err.message
+  }
+}
+</script>