69 lines
1.8 KiB
Vue
69 lines
1.8 KiB
Vue
<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>
|