Como reproduzir um som de notificação em sites?

108

Quando um determinado evento ocorre, quero que meu site reproduza um breve som de notificação para o usuário.

O som não deve iniciar automaticamente (instantaneamente) quando o site é aberto. Em vez disso, deve ser reproduzido sob demanda via JavaScript (quando aquele determinado evento ocorre).

É importante que isso também funcione em navegadores mais antigos (IE6 e outros).

Então, basicamente, existem duas questões:

  1. Qual codec devo usar?
  2. Qual é a prática recomendada para incorporar o arquivo de áudio? ( <embed>vs. <object>Flash vs. <audio>)
javascript html audio notifications html5-audio Timo
fonte
Você pode tentar github.com/VJAI/musquito
VJAI de

Respostas:

98

Esta solução funciona em praticamente todos os navegadores (mesmo sem o Flash instalado):

<!doctype html>
<html>
  <head>
    <title>Audio test</title>
    <script>
      /**
        * Plays a sound using the HTML5 audio tag. Provide mp3 and ogg files for best browser support.
        * @param {string} filename The name of the file. Omit the ending!
        */
      function playSound(filename){
        var mp3Source = '<source src="' + filename + '.mp3" type="audio/mpeg">';
        var oggSource = '<source src="' + filename + '.ogg" type="audio/ogg">';
        var embedSource = '<embed hidden="true" autostart="true" loop="false" src="' + filename +'.mp3">';
        document.getElementById("sound").innerHTML='<audio autoplay="autoplay">' + mp3Source + oggSource + embedSource + '</audio>';
      }
    </script>
  </head>

  <body>
    <!-- Will try to play bing.mp3 or bing.ogg (depends on browser compatibility) -->
    <button onclick="playSound('bing');">Play</button>  
    <div id="sound"></div>
  </body>
</html>

Suporte de navegador

Códigos usados

  • MP3 para Chrome, Safari e Internet Explorer.
  • OGG para Firefox e Opera.
Timo
fonte
Boa resposta. Neste caso, o som toca instantaneamente quando a página é aberta - mas presumo que você mostre como, apenas para fins de demonstração.
Stefan
@Stefan Correto, mas pode ser confuso. Vou remover isso da minha resposta. Obrigado pela dica.
Timo
Muito obrigado pela solução @valmar
Jagdeep Singh
@DavidLarsson Porque existem alguns navegadores que não podem ler certos codecs.
Timo,
2
Não consegui fazê-lo funcionar com meu Internet Explorer versão 8.
Md. Arafat Al Mahmud
83

A partir de 2016, o seguinte será suficiente (você nem precisa incorporar):

let src = 'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3';
let audio = new Audio(src);
audio.play();

Veja mais aqui .

Weltschmerz
fonte
E talvez também verifique se o Áudio está definido antes de fazer isso.
Christophe Roussy de
1
Esta é uma ótima resposta, tão simples e funciona perfeitamente.
Polaris
3
Não funciona mais, eu receboUncaught (in promise) DOMException
jack blank
2
Experimentei no Chrome mais recente (versão 74.0.3729.169) e funciona para mim.
weltschmerz
funciona corretamente no chrome, FF e opera e é uma abordagem muito melhor do que a resposta aceita, pois essa resposta continua acrescentando a tag de áudio à tag do seu corpo, pois o script de notificações provavelmente será chamado em intervalos
Muhammad Omer Aslam
16

Mais um plugin para reproduzir sons de notificação em sites: Ion.Sound

Vantagens:

  • Plug-in JavaScript para reproduzir sons com base na API de áudio da Web com fallback para áudio HTML5.
  • O plug-in está funcionando na maioria dos navegadores de desktop e móveis populares e pode ser usado em qualquer lugar, de sites comuns a jogos de navegador.
  • Suporte de áudio-sprites incluído.
  • Sem dependências (jQuery não é necessário).
  • 25 sons gratuitos incluídos.

Configure o plugin:

// set up config
ion.sound({
    sounds: [
        {
            name: "my_cool_sound"
        },
        {
            name: "notify_sound",
            volume: 0.2
        },
        {
            name: "alert_sound",
            volume: 0.3,
            preload: false
        }
    ],
    volume: 0.5,
    path: "sounds/",
    preload: true
});

// And play sound!
ion.sound.play("my_cool_sound");
Cassio Landim
fonte
4

Que tal o media player do yahoo Basta incorporar a biblioteca do yahoo 

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

E usar como

<a id="beep" href="song.mp3">Play Song</a>

Para iniciar automaticamente

$(function() { $("#beep").click(); });
Starx
fonte
Também é uma boa solução, mas seria possível ocultar esse link? Eu acho que se você definir display: noneisso, ele não tocará mais o som. Além disso, a biblioteca de mídia do Yahoo mostra um pequeno ícone "play" à esquerda do link.
Timo
@valmar: visiblity: hidden;é sua resposta
Starx
3

Tocar notificações compatíveis com vários navegadores

Conforme informado por @Tim Tisdall neste post, verifique o plug- in Howler.js .

Navegadores como o Chrome desabilitam a javascriptexecução quando minimizados ou inativos para melhorias de desempenho . Mas isso reproduz sons de notificação mesmo se o navegador estiver inativo ou minimizado pelo usuário.

  var sound =new Howl({
                     src: ['../sounds/rings.mp3','../sounds/rings.wav','../sounds/rings.ogg',
                           '../sounds/rings.aiff'],
                     autoplay: true,
                     loop: true
                    });

               sound.play();

A esperança ajuda alguém.

shaijut
fonte
Como "Isso reproduz sons de notificação mesmo se o navegador estiver inativo ou minimizado"? O som pode ser reproduzido se for chamado quando a página estiver suspensa, mas como funciona o código que sound.play()executa a chamada ? O howler coloca todos os seus setTimeouts em um wrapper?
mais elegante
@poshest, não sei como funciona, posso estar checando o código fonte ou contatando o autor do plugin pode te ajudar.
shaijut
1
OK, obrigado. É só que você mencionou esse recurso e vinculou aquela outra resposta Stackoverflow, mas não é mencionado como um recurso na documentação do Howler , então pensei que você soubesse algo especial sobre ele.
mais elegante de
2

se você quiser chamar um evento no código A melhor maneira de fazer isso é criar um gatilho porque o navegador não responderá se o usuário não estiver na página

<button type="button" style="display:none" id="playSoundBtn" onclick="playSound();"></button>

agora você pode acionar o botão quando quiser tocar o som 

$('#playSoundBtn').trigger('click');
Sfwan Essam
fonte
0 
var audio = new Audio('audio_file.mp3');

function post()
{
  var tval=document.getElementById("mess").value;   
  var inhtml=document.getElementById("chat_div");
  inhtml.innerHTML=inhtml.innerHTML+"<p class='me'>Me:-"+tval+"</p>";
  inhtml.innerHTML=inhtml.innerHTML+"<p class='demo'>Demo:-Hi! how are you</p>";
  audio.play();
}

este código é do talkerscode. Para o tutorial completo, visite http://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.php

Ramancha
fonte
0

Podemos apenas usar Áudio e um objeto juntos como:

var audio = {};
audio['ubuntu'] = new Audio();
audio['ubuntu'].src="start.ogg";
audio['ubuntu'].play();

e até mesmo adicionando addEventListenerpara playeended

Mostafa
fonte
0

Eu escrevi um método funcional limpo para tocar sons:

sounds = {
    test : new Audio('/assets/sounds/test.mp3')
};

sound_volume = 0.1;

function playSound(sound) {
    sounds[sound].volume = sound_volume;
    sounds[sound].play();
}
function stopSound(sound) {
    sounds[sound].pause();
}
function setVolume(sound, volume) {
    sounds[sound].volume = volume;
    sound_volume = volume;
}
Jack
fonte