<template>    <UButton @click="generateSpeech()">Generate Speech</UButton>    <audio :src="audioSrc" controls></audio></template><script setup>import { Howl } from 'howler'const isPlayable = ref(false)let audioDataChunks = []let howl;const audioSrc = ref(null)const formattedStory = 'In this heartfelt tale, a young pig named Pippin forms an unexpected friendship with a small spider named Silky. Pippin is initially afraid of Silky, but through mutual kindness and understanding, they become inseparable friends. The story gently explores themes of friendship, empathy, and overcoming fears. <break time="2.0s" /> The Tale of Pippin and Silky <break time="1.5s" /> Once upon a time, in a peaceful farm nestled in the countryside, lived a young pig named Pippin. Pippin was a joyful and curious piglet, but there was one thing he feared more than anything - spiders. One day, while exploring the farm, Pippin discovered a small spider, no bigger than a button, in his favorite mud puddle. Do you remember a time when you were afraid of something? What helped you overcome your fear? <break time="3.0s" /> The spider was Silky, a tiny, friendly creature who had spun a delicate web across the corner of the puddle. Pippin squealed in fright and backed away, but Silky only waved her eight legs in a friendly manner. Pippin was surprised. He had always imagined spiders to be scary and mean, but Silky didn\'t seem to be either of those things. She seemed... kind. Has there been a time when something wasn\'t as scary as you first thought? <break time="3.0s" /> Feeling braver, Pippin took a step closer and introduced himself. Silky replied in her soft, sweet voice, "Hello, Pippin\'! I mean no harm.'const generateSpeech = async (formattedStory) => {    try {        const response = await $fetch("/api/generate-text-to-speech", {            method: "POST",            headers: {                accept: "audio/mpeg",            },            responseType: 'stream',            body: {                text: formattedStory            }        });        const reader = response.getReader();        // While true loop for streaming        while (true) {            const { done, value } = await reader.read();            if (done) {                break;            }            audioDataChunks.push(value);        }        const blob = new Blob(audioDataChunks, { type: 'audio/mpeg' });        const blobURL = URL.createObjectURL(blob);        // Initialize Howler.js Howl object        howl = new Howl({            src: [blobURL],            format: ['mp3'],            html5: true, // <-- I thought this would stream the audio ???            onload: () => {                isPlayable.value = true                audioSrc.value = blobURL            },            onloaderror: (id, err) => {                console.error("Load error: ", err)            }        })    } catch (e) {        console.error("Audio generation failed: ", e);    }}</script>