Reproduzindo notificações de som usando Javascript?

86

Como posso fazer isso, para que sempre que um usuário clica em um link, reproduzamos um som? Usando javascript e jquery aqui.

Clique em votar positivamente
fonte
2
Eu escrevi um plugin jQ para controle de áudio soundplay.nikolavukovic.net63.net , ele apóia o que você está pedindo e muito mais, os documentos são agrupados com código JavaScript, verifique.
modificação pública de
Você pode (por exemplo) preencher playlist (s) com vários efeitos sonoros da página e .load(), .play()em momentos importantes, usando a API.
modificação pública de
1
Para o amor de todas as coisas sagradas, inclua uma opção muda. Links com sons é uma das maneiras mais rápidas de garantir que o usuário nunca volte ao seu site.
Wobbles

Respostas:

46

Use este plugin: https://github.com/admsev/jquery-play-sound

$.playSound('http://example.org/sound.mp3');
Alexander Manzyuk
fonte
Existe uma maneira de fazer com que ele extraia a url do link real?
hakarune
@hakarune: Sim, apenas remova o final ".mp3" da fonte .
Kai Noack
Isso reproduz sons se o navegador estiver inativo ou minimizado pelo usuário. A esperança ajuda alguém.
shaijut
25

Coloque um <audio>elemento em sua página.
Obtenha seu elemento de áudio e chame o play()método:

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

Confira este exemplo: http://www.storiesinflight.com/html5/audio.html

Este site revela alguns dos outros coisas legais que você pode fazer, como load(), pause()e algumas outras propriedades do elemento de áudio.

Quando exatamente você deseja reproduzir este elemento de áudio, depende de você. Leia o texto do botão e compare-o com "não", se desejar.

alternativamente

http://www.schillmania.com/projects/soundmanager2/

O SoundManager 2 fornece uma API fácil de usar que permite que o som seja reproduzido em qualquer navegador moderno, incluindo o IE 6+. Se o navegador não for compatível com HTML5, ele obtém ajuda do Flash. Se você quiser estritamente HTML5 e sem flash, há uma configuração para isso, prefere Flash = false

Suporta áudio 100% livre de Flash no iPad, iPhone (iOS4) e outros dispositivos + navegadores com HTML5

O uso é tão simples quanto:

<script src="soundmanager2.js"></script>
<script>
// where to find flash SWFs, if needed...
soundManager.url = '/path/to/swf-files/';

soundManager.onready(function() {
    soundManager.createSound({
        id: 'mySound',
        url: '/path/to/an.mp3'
    });

    // ...and play it
    soundManager.play('mySound');
});

Aqui está uma demonstração dele em ação: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

Joris Van Regemortel
fonte
21

Encontrou algo assim:

//javascript:
function playSound( url ){   
  document.getElementById("sound").innerHTML="<embed src='"+url+"' hidden=true autostart=true loop=false>";
} 
Xn0vv3r
fonte
5
Isso é lento.
Demorou
@Codeglot que depende do aplicativo. 1 segundo atenderia aos meus requisitos.
Muhd
1
Além disso, você provavelmente poderia pré-carregá-lo de alguma forma para se livrar do atraso.
Muhd
9
O atraso vem da análise do DOM, do carregamento do arquivo e de seu início. Se você pré-carregá-lo, poderá apenas iniciá-lo quando necessário .
Xeoncross
1 segundo após um evento de queda do mouse é muito tempo. Demasiado longo.
TARKUS
12

Usando a tag de áudio html5 e jquery:

// appending HTML5 Audio Tag in HTML Body
$('<audio id="chatAudio">
    <source src="notify.ogg" type="audio/ogg">
    <source src="notify.mp3" type="audio/mpeg">
</audio>').appendTo('body');

// play sound
$('#chatAudio')[0].play();

Codifique daqui .

Em minha implementação, adicionei o áudio embutido diretamente no HTML sem jquery append.

Kai Noack
fonte
2
Apenas para referência, estou reproduzindo som no manipulador de sucesso da função ajax (que é executado no carregamento da página) e recebo este erro Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document firstVersion 70.0.3538.102 (Official Build) (64-bit)
:,
7
$('a').click(function(){
    $('embed').remove();
    $('body').append('<embed src="/path/to/your/sound.wav" autostart="true" hidden="true" loop="false">');
});
Andrew Philpott
fonte
Por que esse método torna as barras de rolagem azuis no Chrome?
Brian Leishman
Abra este link. Ele resolverá o problema da barra de rolagem e também reproduzirá o som stackoverflow.com/questions/15483455/…
Azam Alvi
3

Eu escrevi uma pequena função que pode fazer isso, com a API de áudio da web ...

var beep = function(duration, type, finishedCallback) {

    if (!(window.audioContext || window.webkitAudioContext)) {
        throw Error("Your browser does not support Audio Context.");
    }

    duration = +duration;

    // Only 0-4 are valid types.
    type = (type % 5) || 0;

    if (typeof finishedCallback != "function") {
        finishedCallback = function() {};   
    }

    var ctx = new (window.audioContext || window.webkitAudioContext);
    var osc = ctx.createOscillator();

    osc.type = type;

    osc.connect(ctx.destination);
    osc.noteOn(0);

    setTimeout(function() {
        osc.noteOff(0);
        finishedCallback();
    }, duration);

};
alex
fonte
2

Novo emerger ... parece ser compatível com o IE, navegadores Gecko e iPhone até agora ...

http://www.jplayer.org/

degenerar
fonte
1

O código a seguir pode ajudá-lo a reproduzir sons em uma página da web usando apenas javascript. Você pode ver mais detalhes em http://sourcecodemania.com/playing-sound-javascript-flash-player/

<script>
function getPlayer(pid) {
    var obj = document.getElementById(pid);
    if (obj.doPlay) return obj;
    for(i=0; i<obj.childNodes.length; i++) {
        var child = obj.childNodes[i];
        if (child.tagName == "EMBED") return child;
    }
}
function doPlay(fname) {
    var player=getPlayer("audio1");
    player.play(fname);
}
function doStop() {
    var player=getPlayer("audio1");
    player.doStop();
}
</script>

<form>
<input type="button" value="Play Sound" onClick="doPlay('texi.wav')">
<a href="#" onClick="doPlay('texi.wav')">[Play]</a>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    width="40"
    height="40"
    id="audio1"
    align="middle">
    <embed src="wavplayer.swf?h=20&w=20"
        bgcolor="#ffffff"
        width="40"
        height="40"
        allowScriptAccess="always"
        type="application/x-shockwave-flash"
        pluginspage="http://www.macromedia.com/go/getflashplayer"
    />
</object>

<input type="button" value="Stop Sound" onClick="doStop()">
</form>
Falak
fonte
0

Em primeiro lugar, eu não gostaria disso como usuário.

A melhor maneira de fazer provavelmente é usar um pequeno miniaplicativo flash que reproduz o som de fundo.

Também respondido aqui: Forma multiplataforma e navegador cruzado de reproduzir som em Javascript?

Javache
fonte
3
O que há de tão ruim nisso se o usuário sabe que um som seria tocado?
lc.
3
É útil, e se um usuário precisar de um alerta sonoro, quando novos pedidos chegarem? talvez os usuários não fiquem com os olhos na tela o tempo todo, talvez eu precise fazer xixi e ligar o BEEP, então outra pessoa pode responder a ordem .. apenas alguns exemplos ..
deepcell