¿Reproduciendo notificaciones de sonido usando Javascript?

86

¿Cómo puedo hacer eso, para que cada vez que un usuario haga clic en un enlace, reproduzcamos un sonido? Usando javascript y jquery aquí.

Haga clic en Upvote
fuente
2
Escribí un complemento jQ para control de audio soundplay.nikolavukovic.net63.net , es compatible con lo que preguntas y más, los documentos están incluidos con código JavaScript, compruébalo.
anulación pública
Puede (por ejemplo) completar listas de reproducción con un montón de efectos de sonido de página y .load(), .play()en momentos clave, usando la API.
anulación pública
1
Por amor a todas las cosas santas, incluye una opción muda. Los enlaces con sonidos son una de las formas más rápidas de garantizar que un usuario nunca vuelva a su sitio.
Wobbles

Respuestas:

46

Utilice este complemento: https://github.com/admsev/jquery-play-sound

$.playSound('http://example.org/sound.mp3');
Alexander Manzyuk
fuente
¿Hay alguna forma de hacer que extraiga la URL del enlace real?
Hakarune
@hakarune: Sí, simplemente elimine el final ".mp3" de la fuente .
Kai Noack
Esto reproduce sonidos si el navegador está inactivo o minimizado por el usuario. La esperanza ayuda a alguien.
shaijut
25

Pon un <audio>elemento en tu página.
Obtenga su elemento de audio y llame al play()método:

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

Mira este ejemplo: http://www.storiesinflight.com/html5/audio.html

Este sitio descubre algunas de las otras cosas que puedes hacer, como load(), pause()y algunas otras propiedades del elemento de audio.

Depende de usted cuándo exactamente desea reproducir este elemento de audio. Lea el texto del botón y compárelo con "no" si lo desea.

Alternativamente

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

SoundManager 2 proporciona una API fácil de usar que permite reproducir sonido en cualquier navegador moderno, incluido IE 6+. Si el navegador no es compatible con HTML5, obtiene ayuda de Flash. Si desea estrictamente HTML5 y no flash, hay una configuración para eso, preferFlash = false

Admite audio 100% sin Flash en iPad, iPhone (iOS4) y otros navegadores y dispositivos habilitados para HTML5

El uso es tan simple como:

<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');
});

Aquí hay una demostración en acción: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

Joris Van Regemortel
fuente
21

Encontré algo así:

//javascript:
function playSound( url ){   
  document.getElementById("sound").innerHTML="<embed src='"+url+"' hidden=true autostart=true loop=false>";
} 
Xn0vv3r
fuente
5
Esto es demasiado lento. Se tarda casi un segundo en jugar con los navegadores de Windows
thenengah
@Codeglot que depende de la aplicación. 1 segundo cumpliría con mis requisitos.
Muhd
1
Además, probablemente podría precargarlo de alguna manera para deshacerse del retraso.
Muhd
9
El retraso proviene del análisis de DOM, luego de cargar el archivo e iniciarlo. Si lo carga previamente, puede iniciarlo cuando sea necesario .
Xeoncross
1 segundo después de un evento de mousedown es mucho tiempo. Demasiado largo.
TARKUS
12

Usando la etiqueta de audio html5 y 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();

Código de aquí .

En mi implementación, agregué el audio incrustado directamente en el HTML sin jquery append.

Kai Noack
fuente
2
Solo como referencia, estoy reproduciendo sonido en el controlador de éxito de la función ajax (que se ejecuta en la carga de la página) y obtengo este error:, Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document firstChrome Version 70.0.3538.102 (Official Build) (64-bit)... parece ser la solución aquí: stackoverflow.com/a/52821721
user1063287
7
$('a').click(function(){
    $('embed').remove();
    $('body').append('<embed src="/path/to/your/sound.wav" autostart="true" hidden="true" loop="false">');
});
Andrew Philpott
fuente
¿Por qué este método hace que las barras de desplazamiento sean azules en Chrome?
Brian Leishman
Abra este enlace, resolverá el problema de la barra de desplazamiento y también reproducirá sonido stackoverflow.com/questions/15483455/…
Azam Alvi
3

Escribí una pequeña función que puede hacerlo, con la API de Web Audio ...

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
fuente
1

El siguiente código puede ayudarlo a reproducir sonido en una página web usando solo javascript. Puede ver más detalles en 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
fuente
0

Lo primero es lo primero, no me gustaría eso como usuario.

La mejor manera de hacerlo es probablemente utilizando un pequeño subprograma flash que reproduzca su sonido de fondo.

También se responde aquí: ¿ Forma multiplataforma y entre navegadores para reproducir sonido desde Javascript?

Javache
fuente
3
¿Qué tiene de malo si el usuario sabe que se reproducirá un sonido?
lc.
3
Es útil, ¿qué pasa si un usuario necesita una alerta sonora, cuando llegan nuevos pedidos? tal vez los usuarios no están con los ojos en la pantalla todo el tiempo, tal vez necesito orinar y encender el BEEP, entonces alguien más puede responder la orden ... solo algunos ejemplos ..
deepcell