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:

Qual codec devo usar?
Qual é a prática recomendada para incorporar o arquivo de áudio? ( <embed>vs. <object>Flash vs. <audio>)

— Timo
fonte

Você pode tentar github.com/VJAI/musquito

— VJAI de

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

<audio> (Navegadores modernos)
<embed> (Fallback)

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

Use o audio.js que é um polyfill para a <audio>tag com fallback para flash.

Em geral, veja https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills para polyfills para as APIs HTML 5 .. ( inclui mais <audio>polyfills )

— Gabriele Petrioli
fonte

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