aws polly speaking using vuejs

Question

i want to make application for text to speech in vuejs using aws polly

here is my code

<template>
  <div>
    <textarea v-model="textToSpeak" rows="4" cols="50"></textarea>
    <button @click="synthesizeSpeech">Synthesize Speech</button>
    <audio ref="audioPlayer" controls></audio>
  </div>
</template>

<script>
import { Polly,SynthesizeSpeechCommand } from "@aws-sdk/client-polly";

export default {
  data() {
    return {
      textToSpeak: "hello world",
    };
  },
  methods: {
    async synthesizeSpeech() {
      const accessKeyId = "YOUR_ACCESS_KEY_ID";
      const secretAccessKey = "YOUR_SECRET_ACCESS_KEY";
      const region = "us-east-1";

      const pollyClient = new Polly({
        region: region ,
        credentials: {
          accessKeyId: accessKeyId ,
          secretAccessKey: secretAccessKey ,
        },
      });

      try {
        const response = await pollyClient.send(
          new SynthesizeSpeechCommand({
            OutputFormat: "mp3",
            Text: this.textToSpeak,
            VoiceId: "Joanna", // You can change the voice ID as per your preference
          })
        );

        const audioBlob = new Blob([response.AudioStream], { type: "audio/mpeg" });
        const audioUrl = URL.createObjectURL(audioBlob);
        

        if (this.$refs.audioPlayer.canPlayType(audioBlob.type)) {
          this.$refs.audioPlayer.src = audioUrl;
          this.$refs.audioPlayer.play();
        } else {
          console.error("Unsupported audio format");
        }

      } catch (error) {
        console.error("Error synthesizing speech:", error);
      }
    },
  },
};
</script>

its throw error : Uncaught (in promise) DOMException: Failed to load because no supported source was found.

How Can i fix this error or play audio in browser