Denvolva um novo leitor de texto mais moderno e elegante, que liste todas as vozes com base no seu respectivo idioma:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leitor de Texto com Voz do Microsoft Edge</title>
    <style>
        body {
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 2rem;
            background-color: #f8f8f8;
        }

        #container {
            background-color: #fff;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 800px;
        }

        textarea {
            width: 100%;
            height: 200px;
            padding: 1rem;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
            font-size: 1rem;
        }

        button {
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 4px;
            background-color: #4CAF50;
            color: #fff;
            font-size: 1rem;
            cursor: pointer;
            margin-top: 1rem;
        }

        button:hover {
            background-color: #45a049;
        }

        button:disabled {
            background-color: #ccc;
            cursor: default;
        }

        #controls {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 1rem;
        }

        #controls button {
            margin: 0 0.5rem;
        }

        #voice-select {
            margin-right: 1rem;
            padding: 0.5rem;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        progress {
            width: 100%;
            height: 8px;
            background-color: #e0e0e0;
            border-radius: 4px;
            overflow: hidden;
            appearance: none;
        }

        progress::-webkit-progress-bar {
            background-color: #e0e0e0;
        }

        progress::-webkit-progress-value {
            background-color: #4CAF50;
        }

        progress::-moz-progress-bar {
            background-color: #4CAF50;
        }
    </style>
</head>
<body>
    <h1>Leitor de Texto</h1>

    <div id="container">
        <textarea id="text-input" placeholder="Cole o texto aqui..."></textarea>

        <button id="read-button">Ler Texto</button>

        <div id="controls">
            <select id="voice-select"></select>
            <button id="pause-button" disabled>Pausar</button>
            <button id="resume-button" disabled>Continuar</button>
            <button id="stop-button" disabled>Parar</button>
        </div>

        <progress id="audio-progress" value="0" max="1"></progress>
    </div>

    <script>
        // Token de cliente confiável para o serviço de fala do Edge
        const TRUSTED_CLIENT_TOKEN = "6A5AA1D4EAFF4E9FB37E23D68491D6F4";

        // Elementos do DOM
        const textInput = document.getElementById('text-input');
        const readButton = document.getElementById('read-button');
        const pauseButton = document.getElementById('pause-button');
        const resumeButton = document.getElementById('resume-button');
        const stopButton = document.getElementById('stop-button');
        const voiceSelect = document.getElementById('voice-select');
        const audioProgress = document.getElementById('audio-progress');

        // Variáveis de controle
        let audioPlayer = null;
        let isPaused = false;
        let currentUtterance = null;

        // Inicialização
        window.onload = async () => {
            // Carrega as vozes disponíveis
            await loadVoices();

            // Define os eventos dos botões
            readButton.addEventListener('click', handleReadButtonClick);
            pauseButton.addEventListener('click', handlePauseButtonClick);
            resumeButton.addEventListener('click', handleResumeButtonClick);
            stopButton.addEventListener('click', handleStopButtonClick);
        };

        // Carrega as vozes disponíveis do serviço de fala do Edge
        async function loadVoices() {
            try {
                const response = await fetch(
                    "https://speech.platform.bing.com/consumer/speech/synthesize/readaloud/voices/list?trustedclienttoken=" +
                    TRUSTED_CLIENT_TOKEN
                );

                if (!response.ok) {
                    throw new Error(`Erro ao carregar as vozes: ${response.status}`);
                }

                const voicesData = await response.json();

                // Filtra e ordena as vozes por idioma e nome
                const voices = voicesData
                    .filter(voice => voice.Locale.startsWith('pt-'))
                    .sort((a, b) => {
                        // Ordena primeiro por idioma
                        if (a.Locale < b.Locale) return -1;
                        if (a.Locale > b.Locale) return 1;

                        // Se o idioma for o mesmo, ordena por nome
                        if (a.DisplayName < b.DisplayName) return -1;
                        if (a.DisplayName > b.DisplayName) return 1;

                        return 0;
                    });

                voices.forEach(voice => {
                    const option = document.createElement('option');
                    option.value = voice.ShortName; // Usa ShortName para o valor
                    option.textContent = `${voice.DisplayName} (${voice.LocaleName})`; // Exibe nome e idioma
                    voiceSelect.appendChild(option);
                });
            } catch (error) {
                console.error(error);
                alert("Erro ao carregar as vozes. Verifique o console para mais detalhes.");
            }
        }

        // Manipulador de evento para o botão "Ler Texto"
        async function handleReadButtonClick() {
            const text = textInput.value;

            if (text.trim() === "") {
                alert("Por favor, insira um texto para ler.");
                return;
            }

            // Desabilita os botões enquanto o texto é lido
            disableButtons();

            try {
                // Cria uma nova instância do AudioContext
                const audioContext = new AudioContext();

                // Cria um MediaSource
                const mediaSource = new MediaSource();

                // Define a URL do MediaSource como a origem do áudio
                const audioSource = URL.createObjectURL(mediaSource);

                // Cria um elemento de áudio e define a origem
                audioPlayer = new Audio(audioSource);

                // Quando o MediaSource estiver aberto, adiciona um buffer de origem
                mediaSource.addEventListener('sourceopen', async () => {
                    const sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');

                    // Gera o áudio do texto usando o serviço de fala do Edge
                    const audioData = await synthesizeSpeech(text);

                    // Adiciona os dados de áudio ao buffer de origem
                    sourceBuffer.appendBuffer(audioData);

                    // Sinaliza o fim do fluxo de dados
                    mediaSource.endOfStream();
                });

                // Define os ouvintes de eventos para o player de áudio
                audioPlayer.addEventListener('ended', handleAudioEnded);
                audioPlayer.addEventListener('timeupdate', handleAudioTimeUpdate);

                // Inicia a reprodução do áudio
                audioPlayer.play();
            } catch (error) {
                console.error(error);
                alert("Erro ao sintetizar a fala. Verifique o console para mais detalhes.");
                enableButtons();
            }
        }

        // Sintetiza a fala usando o serviço de fala do Edge
        async function synthesizeSpeech(text) {
            const voiceName = voiceSelect.value;

            const date = new Date().toISOString();
            const requestId = uuidv4();

            // Cria a solicitação WebSocket
            const ws = new WebSocket(
                "wss://speech.platform.bing.com/consumer/speech/synthesize/readaloud/edge/v1?trustedclienttoken=" +
                TRUSTED_CLIENT_TOKEN
            );

            ws.binaryType = "arraybuffer";

            // Aguarda a conexão WebSocket ser aberta
            await new Promise(resolve => ws.onopen = resolve);

            // Envia as mensagens de configuração
            ws.send(getWSAudio(date, requestId));
            ws.send(getWSText(date, requestId, voiceName, text));

            // Aguarda os dados de áudio serem recebidos
            const audioData = await new Promise((resolve, reject) => {
                let audioChunks = [];

                ws.onmessage = (event) => {
                    if (event.data instanceof ArrayBuffer) {
                        audioChunks.push(event.data.slice(130)); // Remove o cabeçalho
                    } else if (event.data.includes('Path:turn.end')) {
                        // Concatena os chunks de áudio e resolve a promessa
                        const audioBlob = new Blob(audioChunks, { type: 'audio/mpeg' });
                        const fileReader = new FileReader();
                        fileReader.onload = () => resolve(fileReader.result);
                        fileReader.readAsArrayBuffer(audioBlob);
                    }
                };

                ws.onerror = reject;
            });

            // Fecha a conexão WebSocket
            ws.close();

            // Retorna os dados de áudio
            return audioData;
        }

        // Manipulador de evento para o botão "Pausar"
        function handlePauseButtonClick() {
            audioPlayer.pause();
            isPaused = true;
            pauseButton.disabled = true;
            resumeButton.disabled = false;
        }

        // Manipulador de evento para o botão "Continuar"
        function handleResumeButtonClick() {
            audioPlayer.play();
            isPaused = false;
            pauseButton.disabled = false;
            resumeButton.disabled = true;
        }

        // Manipulador de evento para o botão "Parar"
        function handleStopButtonClick() {
            audioPlayer.pause();
            audioPlayer.currentTime = 0;
            isPaused = false;
            enableButtons();
        }

        // Manipulador de evento para o fim da reprodução de áudio
        function handleAudioEnded() {
            enableButtons();
        }

        // Manipulador de evento para a atualização do tempo de reprodução de áudio
        function handleAudioTimeUpdate() {
            audioProgress.value = audioPlayer.currentTime / audioPlayer.duration;
        }

        // Habilita os botões de controle
        function enableButtons() {
            readButton.disabled = false;
            pauseButton.disabled = false;
            stopButton.disabled = false;
        }

        // Desabilita os botões de controle
        function disableButtons() {
            readButton.disabled = true;
            pauseButton.disabled = true;
            resumeButton.disabled = true;
            stopButton.disabled = true;
        }

        // Gera um UUID v4
        function uuidv4() {
            return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
                (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
            );
        }

        // Retorna a mensagem de configuração de áudio WebSocket
        function getWSAudio(date, requestId) {
            return `X-Timestamp:${date}\r\nContent-Type:application/json; charset=utf-8\r\nPath:speech.config\r\n\r\n{"context":{"synthesis":{"audio":{"metadataoptions":{"sentenceBoundaryEnabled":"false","wordBoundaryEnabled":"true"},"outputFormat":"audio-24khz-48kbitrate-mono-mp3"}}}}`;
        }

        // Retorna a mensagem de configuração de texto WebSocket
        function getWSText(date, requestId, voiceName, text) {
            return `X-RequestId:${requestId}\r\nContent-Type:application/ssml+xml\r\nX-Timestamp:${date}Z\r\nPath:ssml\r\n\r\n<speak version='1.0' xmlns='http://www.w3.org/2001/10/synthesis' xml:lang='pt-BR'><voice name='${voiceName}'>${text}</voice></speak>`;
        }
    </script>
</body>
</html>