Vue Js Convert Text to Speech

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue Js Convert Text to Speech</h3>
        <textarea v-model="text"></textarea>
        <button @click="speak">Speak</button>
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    text: 'Fontawesomeicons.com is a website that offers a large collection of free icons that can be used for various design purposes. The icons are available in different styles and can be easily customized to fit specific design needs. The website also provides code snippets and integration guides for popular web frameworks.'
                }
            },
            methods: {
                speak() {
                    const msg = new SpeechSynthesisUtterance();
                    msg.text = this.text;
                    msg.volume = 1.0; // speech volume (default: 1.0)
                    msg.pitch = 1.0; // speech pitch (default: 1.0)
                    msg.rate = 1.0; // speech rate (default: 1.0)
                    msg.lang = 'en-US'; // speech language (default: 'en-US')
                    const voices = window.speechSynthesis.getVoices();
                    msg.voice = voices.find(voice => voice.name === 'Google UK English Female'); // voice URI (default: platform-dependent)
                    msg.onboundary = function (event) {
                        console.log('Speech reached a boundary:', event.name);
                    };
                    msg.onpause = function (event) {
                        console.log('Speech paused:', event.utterance.text.substring(event.charIndex));
                    };
                    window.speechSynthesis.speak(msg);
                }
            }
        });
    </script>
    <style scoped>
        #app {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

textarea {
            height: 200px;
            width: 500px;
            margin: 20px;
            padding: 10px;
            font-size: 18px;
            border: 2px solid #ccc;
            border-radius: 4px;
            resize: none;
        }
      button {
            font-size: 20px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
      }
      button:hover {
            background-color: #3e8e41;
        }
    </style>
</body>
</html>