Não sai som

3
respostas

por Guilherme Alves Sampaio

| 3.5k xp | 2 posts

Copeiro

criei todo o código em Inglês ,claro não foi sozinho ,passei horas quebrando a cabeça em certas partes e para corrigir usei o chatGPT aqui esta o código:

APP

let drawnNumbers = [];
let secretNumber = generateRandomNumber();
let attempts = 1;

function displayTextOnScreen(tag, text) {
    let element = document.querySelector(tag);
    element.innerHTML = text;

    if ('speechSynthesis' in window) {
        let utterance = new SpeechSynthesisUtterance(text);
        utterance.lang = 'en-US'; 
        utterance.rate = 1.2; 
        window.speechSynthesis.speak(utterance); 
    } else {
        console.log("Web Speech API is not supported in this browser.");
    }
}

function displayInitialMessage() {
    displayTextOnScreen('h1', 'Secret Number Game');
    displayTextOnScreen('p', 'Choose a number between 1 and 10');
}

displayInitialMessage();

function checkGuess() {
    let guess = document.querySelector('input').value;

    if (guess == secretNumber) {
        displayTextOnScreen('h1', 'You got it!');
        let wordAttempt = attempts > 1 ? 'attempts' : 'attempt';
        let message = `You discovered the secret number with ${attempts} ${wordAttempt}`;
        displayTextOnScreen('p', message);
        document.getElementById('restart').removeAttribute('disabled');
    } else {
        if (guess > secretNumber) {
            displayTextOnScreen('p', 'The secret number is smaller');
        } else {
            displayTextOnScreen('p', 'The secret number is bigger');
        }
        attempts++;
        clearField();
    }
}

function generateRandomNumber() {
    let chosenNumber;

    if (drawnNumbers.length == 3) {
        drawnNumbers = [];
    }

    do {
        chosenNumber = parseInt(Math.random() * 10 + 1);
    } while (drawnNumbers.includes(chosenNumber));

    drawnNumbers.push(chosenNumber);
    console.log(drawnNumbers);
    return chosenNumber;
}

function clearField() {
    let guess = document.querySelector('input');
    guess.value = '';
}

function restartGame() {
    secretNumber = generateRandomNumber();
    clearField();
    attempts = 1;
    displayInitialMessage();
    document.getElementById('restart').setAttribute('disabled', true);
}

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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>Secret Number Game</title>
</head>

<body>
    <div class="container">
        <div class="container__conteudo">
            <div class="container__informacoes">
                <div class="container__texto">
                    <h1></h1>
                    <p class="texto__paragrafo"></p>
                </div>
                <input type="number" min="1" max="10" class="container__input" placeholder="Enter your guess">
                <div class="guess container__botoes">
                    <button onclick="checkGuess()" class="container__botao">Guess</button>
                    <button onclick="restartGame()" id="restart" class="container__botao" disabled>New Game</button>
                </div>
            </div>
            <img src="./img/ia.png" alt="A person looking to the left" class="container__imagem-pessoa" />
        </div>
    </div>

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

</html>

3 respostas

por Guilherme Alves Sampaio

| 3.5k xp | 2 posts

Copeiro

2 semanas atrás

Não sei por que de ter bugado assim quando postei ,como posso postar meu código completo?

por Armano Barros Alves Junior

| 3482.4k xp | 7356 posts

Alura Scuba Team Monitor | Suporte Educacional

2 semanas atrás

Bom dia, Guilherme! Tudo bem?

Para resolver o problema, você pode tentar integrar a biblioteca ResponsiveVoice ao seu projeto. Aqui está como você pode fazer isso:

Adicione o script do ResponsiveVoice ao seu HTML: No arquivo HTML, adicione o seguinte script dentro da tag <head> ou logo antes de fechar a tag <body>:
```
<script src="https://code.responsivevoice.org/responsivevoice.js"></script>
```

Modifique a função displayTextOnScreen para usar o ResponsiveVoice: Substitua a parte da função que usa speechSynthesis pela chamada ao responsiveVoice.speak. Aqui está como a função ficaria:

function displayTextOnScreen(tag, text) {
    let element = document.querySelector(tag);
    element.innerHTML = text;

    if (typeof responsiveVoice !== 'undefined') {
        responsiveVoice.speak(text, 'UK English Male', {rate: 1.2});
    } else {
        console.log("ResponsiveVoice is not available.");
    }
}

Verifique as permissões do navegador: Certifique-se de que o navegador está configurado para permitir a execução de áudio. Quando você carregar a página, o navegador pode pedir permissões para usar o áudio. Certifique-se de clicar em "Allow" (Permitir).
Teste novamente: Atualize a página e veja se agora o som está funcionando conforme esperado.

Agora sobre o seu código está "bugado", acontece porque o chat do fórum usa da configuração do markdown que formata código e aplica código HTML, por isso ficou dessa forma estranha. Para resolver isso você pode adicionar uma estrutura que define o que é código:

Selecione o trecho com o código no seu post;
Aqui no fórum, procure o ícone </>. É a sétima opção na aba superior do nosso editor de texto;
Clique no ícone comentado acima, certificando-se que está com todo o trecho de código selecionado.

Para confirmar se está tudo certo, você pode pré-visualizar seu post clicando no penúltimo ícone da esquerda para a direita, ou também usando o atalho F9.

No mais, se precisar de ajuda ou tiver alguma dúvida relacionada aos seus estudos, o fórum é o melhor lugar para te ajudar.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.

por Vinicius de Oliveira Giuliani

| 49.3k xp | 8 posts

Desenvolvedor Full Stack

1 semana atrás

Olá, Guilherme,

Se estiver usando o Chrome, ou algum navegador baseado nele, o problema é que o navegador não permite mais a reprodução automática de voz, para habilitar a reprodução é necessário um evento disparado pela interação do usuário (por exemplo, ao clicar em um botão).

Para fazer o som funcionar parcialmente, você precisa adicionar window.speechSynthesis.cancel() ao código:

if ('speechSynthesis' in window) {
    let utterance = new SpeechSynthesisUtterance(text);
    utterance.lang = 'en-US'; 
    utterance.rate = 1.2;
    window.speechSynthesis.cancel();
    window.speechSynthesis.speak(utterance);
} else {
    console.log("Web Speech API is not supported in this browser.");
}

Essa linha de código remove da fila as chamadas de áudio que foram impedidas de serem executadas pelo navegador, e permite que as chamadas que ocorrem posteriormente funcionem corretamente. Porém, como mencionei, o funcionamento será parcial, pois as seguintes mensagens não serão reproduzidas:

Inicialmente, as mensagens em displayInitialMessage, pois não existe interação do usuário
Ao acertar o número, a mensagem "You got it!" não será reproduzida pois vai ser cancelada pela mensagem seguinte
Ao clicar no botão "New Game", como houve interação do usuário serão reproduzidas as mensagens em displayInitialMessage, mas a mensagem "Secret Number Game" vai ser cancelada pela seguinte

Mergulhe em IA generativa do zero com Alura e Google

5 aulas gratuitas | com certificado