0

Neste script a baixo ele fica atualizando a div e mostrando um contador

inserir a descrição da imagem aqui

Oque eu queria é que havendo alguma alteração no numero, tocar um Som "Um Alarme" só que eu não tenho conhecimento de javascript se alguem poder me ajudar vai me ajudar muito

contador_mapa.php

 $sql1 = "SELECT COUNT(*) AS total1 FROM agenda_saidas where id_transfer1 = '1' ";
 $resultado1 = mysql_query($sql1) or die ("Erro na consulta1");
 $linha1 = mysql_fetch_assoc($resultado1);
 $cancel_solicitado = $linha1['total1'];

Lista.php

 <div id="latestData"></div>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script>
 $(function () {
 function getContadorMapa() {
    $.get("includes/principal/contador_mapa.php", function (result) {
        $('#latestData').html(result);
    });
  }

  getContadorMapa();
  setInterval(getContadorMapa, 20000);
  });

  </script>

1 Resposta 1

6

Basta usar o play(), nem precisa de JQuery, se usar o JQuery utilize o .trigger('play').

Primeiro defina o audio que irá acionar:

<audio id="notificacao" preload="auto">
  <source src="http://soundbible.com/grab.php?id=2154&type=mp3" type="audio/mpeg">
</audio>

Este áudio é somente um exemplo, ele é do SoundBible, criada por Daniel Simion, está sujeito a alguns termos de licença, revise elas antes de utiliza-las, se assim desejar.


Depois basta que use:

$('#notificacao').trigger('play');

Se não, no VanillaJS:

document.getElementById('notificacao').play();

Experimente:

let Contador = 1;

let ElemContador = document.querySelector("output[contador]");
let ElemAudio = document.querySelector("#notificacao");
let ElemBotao = document.querySelector("button[reproduzir]");

setInterval(function() {
  ElemContador.innerText = 10 - Contador;

  if (Contador === 10) {
    ElemAudio.play();
    Contador = 0;
  }

  Contador++;
}, 1000);

ElemBotao.addEventListener("click", function() {
  ElemAudio.load();
  ElemAudio.play();
})
<p>É necessário que clique aqui para habilitar o Autoplay.</p>

<audio id="notificacao" preload="auto">
  <source src="http://soundbible.com/grab.php?id=2154&type=mp3" type="audio/mpeg">
</audio>

<output contador></output>

<p><button reproduzir>Dar Play</button></p>

Caso esteja interessado em um exemplo COM JQuery, veja a versão antiga desta resposta.

Devido a limitações no browser, é preciso que interaja com a página para que o autoplay (e o play) funcionem. No caso do exemplo, é preciso que clique no quadrado do iframe do StackOverflow. Para mais informações sobre essa restrição acesse: https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

6
  • Quase... mais eu queria quando chegasse um numero novo ai sim toque som Commented 13/06/2017 às 16:31
  • Basta que compare, $('#latestData').html() != result){ // .play() // }, sem o HTML da página fica um tanto dificil saber como os elementos são inseridos, mas genericamente é isso.
    – Inkeliz
    Commented 14/06/2017 às 3:12
  • Ressuscitando o post, estou tendo o mesmo problema do colega, porém gostaria que tocasse apenas 1 vez. Isso é possível?
    – JM_2021
    Commented 27/07/2022 às 1:16
  • @JM_2021 o play.() só executa uma única vez (talvez execute mais vezes se estiver com o atributo de loop).
    – Inkeliz
    Commented 27/07/2022 às 1:21
  • 1
    @JM_2021 editei o exemplo para incluir um exemplo que o audio é acionado por botão, ou seja: uma única vez. Também reescrevi para remover o JQuery, uma vez que isso não é mais usado (como era em 2017).
    – Inkeliz
    Commented 27/07/2022 às 1:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .