Jump to content

Chamar som de senha na página

fabiopavila

Por fabiopavila
em JavaScript

 Compartilhar

Postagens Recomendadas

fabiopavila

fabiopavila

Postado
Postado

Ola amigos , 

Estou criando uma pagina para exibir uma sequencia de Senhas de Fila de Atendimento e a cada senha chamada ele fala a Senha atraves do Som,  gostaria de saber como que faço para que o som inicie automaticamente ao carregar a pagina pois o som é iniciado pela primeira se eu clicar no da senha Atual (meio da pagina) .

  

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

<head>
    <meta charset="UTF-8">
    <title>Exibir Senhas</title>
    <style>
        body {
            background-color: #ededed;
            text-align: center;
            font-family: Arial, sans-serif;
        }

        .container {
            margin-top: 50px;
            position: relative;
        }

        #logo {
            position: absolute;
            top: 10px;
            left: 10px;
            max-width: 400px;
            height: auto;
        }

        #infoAtual {
            font-size: 20px;
            margin-bottom: 20px;
        }

        @keyframes blink {
            0%, 49.9%, 100% { color: transparent; }
            50%, 99.9% { color: #fff; }
        }

        #senhaAtual {
            font-size: 180px;
            margin-bottom: 20px;
            background-color: #333;
            color: #fff;
            padding: 10px;
            animation: blink 1s infinite;
        }

        #ultimasSenhas {
            font-size: 40px;
            text-align: left;
        }

        .ultimaSenha {
            margin-bottom: 5px;
        }
    </style>
</head>

<body>
    <div class="container">
        <img id="logo" src="logo.jpg" alt="Logomarca" width="292" height="63">
        <h2><font face="Arial" style="font-size: 22pt">Painel Senhas</font></h2>
        <div id="infoAtual"></div>
        <div id="senhaAtual"></div>
        <div id="ultimasSenhas"></div>
        <audio id="audio" src=""></audio>

        <script>
            function playAudio(numeroSenha) {
                var audio = document.getElementById("audio");
                var senhaFalada = "Senha " + ("" + numeroSenha).slice(-3);
                var url = "https://translate.google.com/translate_tts?ie=UTF-8&tl=pt-BR&client=tw-ob&q=" + encodeURIComponent(senhaFalada);
                audio.src = url;
                audio.play();
                setTimeout(function() {
                    audio.pause();
                    audio.currentTime = 0; // Reinicia o áudio
                }, 5000); // Parar o áudio após 5 segundos
            }

            function atualizarDados() {
                var numeroSenha = localStorage.getItem("numeroSenha");
                var guiche = localStorage.getItem("guiche");
                var ultimasSenhas = JSON.parse(localStorage.getItem("ultimasSenhas")) || [];

                ultimasSenhas.unshift({ senha: numeroSenha, guiche: guiche });
                ultimasSenhas = ultimasSenhas.slice(0, 3);

                document.getElementById("infoAtual").innerHTML = "Guiche: " + guiche;
                document.getElementById("senhaAtual").innerHTML = ("" + numeroSenha).slice(-3);


                var ultimasSenhasHTML = "<div>ÚLTIMAS CHAMADAS</div>";
                for (var i = 0; i < ultimasSenhas.length; i++) {
                    ultimasSenhasHTML += '<div class="ultimaSenha">' + ultimasSenhas[i].senha.slice(-3) + ' - Guiche ' + ultimasSenhas[i].guiche + '</div>';
                }

                document.getElementById("ultimasSenhas").innerHTML = ultimasSenhasHTML;

                localStorage.setItem("ultimasSenhas", JSON.stringify(ultimasSenhas));

                playAudio(numeroSenha);
            }

            setInterval(atualizarDados, 3000);
            document.addEventListener("DOMContentLoaded", function () {
                atualizarDados();
            });
        </script>
    </div>
</body>

</html>

 

  • Curtir 1
Link to comment
Compartilhe em outros sites

Crie uma conta ou entre para comentar 😀

Você precisa ser um membro para deixar um comentário.

Crie a sua conta

Participe da nossa comunidade, crie sua conta.
É bem rápido!

Criar minha conta agora

Entrar

Você já tem uma conta?
Faça o login agora.

Entrar agora
 Compartilhar
Ir para a listagem de tópicos


×
×
  • Create New...