Riproduzione di notifiche sonore utilizzando Javascript?


86

Come posso farlo, quindi ogni volta che un utente fa clic su un collegamento riproduciamo un suono? Usando javascript e jquery qui.


2
Ho scritto un plugin jQ per il controllo audio soundplay.nikolavukovic.net63.net , supporta ciò che chiedi e altro ancora, i documenti sono in bundle con codice JavaScript, dai un'occhiata.
override pubblico

Puoi (ad esempio) popolare playlist con un sacco di effetti sonori di pagina e .load(), .play()nei momenti chiave, usando l'API.
override pubblico

1
Per amore di tutte le cose sante, includi un'opzione muta. I collegamenti con i suoni sono uno dei modi più rapidi per garantire che un utente non torni mai più sul tuo sito.
Oscilla il

Risposte:



25

Metti un <audio>elemento sulla tua pagina.
Ottieni il tuo elemento audio e chiama il play()metodo:

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

Guarda questo esempio: http://www.storiesinflight.com/html5/audio.html

Questo sito scopre alcune delle altre cose interessanti che si possono fare, come load(), pause(), e poche altre proprietà dell'elemento audio.

Quando esattamente vuoi riprodurre questo elemento audio dipende da te. Leggi il testo del pulsante e confrontalo con "no" se lo desideri.

In alternativa

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

SoundManager 2 fornisce un'API facile da usare che consente di riprodurre il suono in qualsiasi browser moderno, incluso IE 6+. Se il browser non supporta HTML5, riceve aiuto da Flash. Se vuoi rigorosamente HTML5 e nessun flash, c'è un'impostazione per questo, preferFlash = false

Supporta audio senza Flash al 100% su iPad, iPhone (iOS4) e altri dispositivi abilitati per HTML5 + browser

L'uso è semplice come:

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

Eccone una demo in azione: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/


21

Trovato qualcosa del genere:

//javascript:
function playSound( url ){   
  document.getElementById("sound").innerHTML="<embed src='"+url+"' hidden=true autostart=true loop=false>";
} 

5
Questo è rallentare. Ci vuole quasi un secondo per giocare con i browser Windows
quindi il

@Codeglot che dipende dall'applicazione. 1 secondo soddisferebbe le mie esigenze.
Muhd

1
Inoltre, potresti probabilmente precaricarlo in qualche modo per eliminare il ritardo.
Muhd

9
Il ritardo deriva dall'analisi del DOM, quindi dal caricamento del file e dall'avvio. Se lo precarichi, puoi semplicemente avviarlo quando necessario .
Xeoncross

1 secondo dopo un evento mousedown è molto tempo. Troppo lungo.
TARKUS

12

Utilizzando il tag audio 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();

Codice da qui .

Nella mia implementazione ho aggiunto l'audio embed direttamente nell'HTML senza jquery append.


2
Solo per riferimento, sto giocando suono sul gestore successo da Ajax funzione (che viene eseguito al caricamento della pagina), e ottengo questo errore: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first, Chrome Version 70.0.3538.102 (Official Build) (64-bit)... sembra essere la soluzione qui: stackoverflow.com/a/52821721
user1063287



3

Ho scritto una piccola funzione che può farlo, con l'API 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);

};


1

Il codice seguente potrebbe aiutarti a riprodurre il suono in una pagina web usando solo javascript. Puoi vedere ulteriori dettagli su 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>

0

Per prima cosa, non mi piacerebbe come utente.

Il modo migliore per farlo è probabilmente utilizzare una piccola applet flash che riproduce il suono in sottofondo.

Risposta anche qui: Cross-platform, cross-browser way to play sound from Javascript?


3
Cosa c'è di male se l'utente sa che verrà riprodotto un suono?
lc.

3
È utile, cosa succede se un utente ha bisogno di un segnale acustico, quando arrivano nuovi ordini? forse gli utenti non sono sempre con gli occhi sullo schermo, forse ho bisogno di fare pipì e attivare il BEEP, poi qualcun altro può rispondere all'ordine .. solo pochi esempi ..
deepcell
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.