Duvida - Voz | Lógica de programação: explore funções e listas

Bom dia pessoal, eu estou com alguns problemas com a voz no jogo, Já resolvi metade, o programa está pedindo para o usuário interagir primeiro com a página para a voz ser ativada,não aparece a caixa de alerta . Se alguém puder ajudar eu agradeço !

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
        var rvApiKey = "key=8Y8T3JIm";
    </script>
    <script src="https://code.responsivevoice.org/responsivevoice.js?key=8Y8T3JIm"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Inter:wght@400;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>JS Game</title>
</head>

<body>

    <div class="container">
        <div class="container__conteudo">
            <div class="container__informacoes">
                <div class="container__texto">
                    <h1>Adivinhe o <span class="container__texto-azul">numero secreto</span></h1>
                    <p class="texto__paragrafo">Escolha um número entre 1 a 10</p>
                </div>
                <input type="number" min="1" max="10" class="container__input">
                <div class="chute container__botoes">
                    <button onclick="verificarChute()" class="container__botao">Chutar</button>
                    <button onclick="reiniciarJogo()" id="reiniciar" class="container__botao" disabled>Novo jogo</button>
                </div>
            </div>
            <img src="./img/ia.png" alt="Uma pessoa olhando para a esquerda" class="container__imagem-pessoa" />
        </div>
    </div>




    <script src="app.js" defer></script>
</body>

</html>

let listaDeNumerosSorteados = [];
let numeroLimite = 10;
let numeroSecreto = gerarNumeroAleatorio();
let tentativas = 1;

function exibirTextoNaTela(tag, texto) {
    let campo = document.querySelector(tag);
    campo.innerHTML = texto;
    responsiveVoice.speak(texto,'Brazilian Portuguese Female',{rate:1.2});
}

function exibirMensagemInicial() {
    exibirTextoNaTela('h1', 'Jogo do número secreto');
    exibirTextoNaTela('p', 'Escolha um número entre 1 e 10');
}

exibirMensagemInicial();

function verificarChute() {
    let chute = document.querySelector('input').value;
    
    if (chute == numeroSecreto) {
        exibirTextoNaTela('h1', 'Acertou!');
        let palavraTentativa = tentativas > 1 ? 'tentativas' : 'tentativa';
        let mensagemTentativas = `Você descobriu o número secreto com ${tentativas} ${palavraTentativa}!`;
        exibirTextoNaTela('p', mensagemTentativas);
        document.getElementById('reiniciar').removeAttribute('disabled');
    } else {
        if (chute > numeroSecreto) {
            exibirTextoNaTela('p', 'O número secreto é menor');
        } else {
            exibirTextoNaTela('p', 'O número secreto é maior');
        }
        tentativas++;
        limparCampo();
    }
}

function gerarNumeroAleatorio() {
    let numeroEscolhido = parseInt(Math.random() *numeroLimite  + 1);
    let quantiDeElementosNaLista = listaDeNumerosSorteados.length;
    if(quantiDeElementosNaLista == numeroLimite){
        listaDeNumerosSorteados = [];
    }
    if(listaDeNumerosSorteados.includes(numeroEscolhido)){
        return gerarNumeroAleatorio();
    }else{
        listaDeNumerosSorteados.push(numeroEscolhido);
        console.log(listaDeNumerosSorteados);
        return numeroEscolhido;
      
    }
    
}

function limparCampo() {
    chute = document.querySelector('input');
    chute.value = '';
}

function reiniciarJogo() {
    numeroSecreto = gerarNumeroAleatorio();
    limparCampo();
    tentativas = 1;
    exibirMensagemInicial();
    document.getElementById('reiniciar').setAttribute('disabled', true)
}

Olá, Manoel! Como vai?

Pelo que entendi, você está com um problema relacionado ao alerta de ativação de voz no seu jogo. Isso pode estar acontecendo porque alguns navegadores, por questões de segurança, bloqueiam a reprodução automática de áudio até que o usuário interaja com a página.

Uma solução possível para isso seria criar um botão de "Iniciar Jogo" ou algo similar que, quando clicado, ative a voz e inicie o jogo. Desta forma, o usuário estará interagindo com a página antes de o áudio começar a tocar.

Aqui está um exemplo de como você poderia fazer isso:

<button onclick="iniciarJogo()" class="container__botao">Iniciar Jogo</button>

E no seu arquivo JavaScript, você poderia ter algo assim:

function iniciarJogo() {
    // Ativa a voz e inicia o jogo
    exibirMensagemInicial();
}

Lembre-se de remover a chamada para exibirMensagemInicial() que está fora de qualquer função, pois agora ela será chamada quando o botão for clicado.

Espero que essa sugestão possa te ajudar a resolver o problema! Lembre-se, essa é apenas uma sugestão e pode ser que você precise fazer alguns ajustes para que funcione perfeitamente no seu código.

Espero ter ajudado e bons estudos!