Come riprodurre un suono di notifica sui siti Web?

108

Quando si verifica un determinato evento, desidero che il mio sito Web riproduca un breve suono di notifica all'utente.

Il suono non dovrebbe avviarsi automaticamente (istantaneamente) all'apertura del sito web. Invece, dovrebbe essere riprodotto su richiesta tramite JavaScript (quando si verifica quel determinato evento).

È importante che funzioni anche sui browser meno recenti (IE6 e simili).

Quindi, fondamentalmente ci sono due domande:

Quale codec dovrei usare?
Qual è la migliore pratica per incorporare il file audio? ( <embed>vs. <object>Flash vs. <audio>)

— Timo
fonte

Puoi provare github.com/VJAI/musquito

— VJAI

98

Questa soluzione funziona praticamente su tutti i browser (anche senza Flash installato):

<!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>

Supporto del browser

<audio> (Browser moderni)
<embed> (Fallback)

Codici utilizzati

MP3 per Chrome, Safari e Internet Explorer.
OGG per Firefox e Opera.

— Timo
fonte

Bella risposta. In questo caso, però, il suono viene riprodotto immediatamente quando la pagina viene aperta, ma presumo che tu mostri come, solo a scopo dimostrativo.

— Stefan

@Stefan È corretto, ma potrebbe creare confusione. Lo rimuoverò dalla mia risposta. Grazie per il suggerimento.

— Timo

Grazie mille per la soluzione @valmar

— Jagdeep Singh

@DavidLarsson Perché ci sono alcuni browser che non sono in grado di leggere determinati codec.

— Timo

2

Non sono riuscito a farlo funzionare con la mia versione di Internet Explorer 8.

— Md. Arafat Al Mahmud

83

A partire dal 2016, sarà sufficiente quanto segue (non è nemmeno necessario incorporare):

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

Vedi di più qui .

— Weltschmerz
fonte

E forse controlla anche se l'audio è definito prima di farlo.

— Christophe Roussy

1

Questa è un'ottima risposta, così semplice e funziona perfettamente.

— Polaris

3

Non funziona più OttengoUncaught (in promise) DOMException

— jack vuoto

2

L'ho appena provato sull'ultimo Chrome (versione 74.0.3729.169) e per me funziona.

— weltschmerz

funziona correttamente su chrome, FF e opera ed è un approccio molto migliore rispetto alla risposta accettata poiché quella risposta continua ad aggiungere il tag audio al tag del corpo poiché lo script delle notifiche sarà molto probabilmente chiamato a intervalli

— Muhammad Omer Aslam

16

Un altro plugin, per riprodurre suoni di notifica sui siti web: Ion.Sound

vantaggi:

Plugin JavaScript per la riproduzione di suoni basati sull'API Web Audio con fallback su HTML5 Audio.
Il plugin funziona sui browser desktop e mobili più diffusi e può essere utilizzato ovunque, dai siti Web comuni ai giochi per browser.
Supporto per audio-sprite incluso.
Nessuna dipendenza (jQuery non richiesto).
25 suoni gratuiti inclusi.

Imposta il 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

Che ne dici del lettore multimediale di yahoo Basta incorporare la libreria di yahoo

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

E usalo come

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

Per l'avvio automatico

$(function() { $("#beep").click(); });

— Starx
fonte

Anche una bella soluzione ma sarebbe possibile nascondere quel collegamento? Penso che se lo imposti display: none, non riprodurrà più il suono. Inoltre, la libreria multimediale di Yahoo mostra una piccola icona di "riproduzione" a sinistra del collegamento ..

— Timo

@valmar: visiblity: hidden;è la tua risposta

— Starx

3

Riproduci notifiche compatibili con tutti i browser

Come consigliato da @Tim Tisdall da questo post, controlla il plugin Howler.js .

Browser come Chrome disabilitano l' javascriptesecuzione quando sono ridotti a icona o inattivi per migliorare le prestazioni . Ma questo riproduce suoni di notifica anche se il browser è inattivo o ridotto a icona dall'utente.

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

               sound.play();

La speranza aiuta qualcuno.

— shaijut
fonte

Come funziona "Questo riproduce i suoni di notifica anche se il browser è inattivo o ridotto a icona"? Il suono potrebbe essere riprodotto se chiamato quando la pagina è addormentata, ma come funziona il codice che chiama sound.play()in primo luogo? Howler mette tutti i tuoi setTimeouts in un wrapper?

— più elegante

@poshest, non so come funziona, potrebbe esserti utile controllare il codice sorgente o contattare l'autore del plugin.

— Shaijut

1

Ok grazie. È solo che hai menzionato questa funzione e hai collegato l'altra risposta di Stackoverflow, ma non è menzionata come una funzionalità nella documentazione di Howler , quindi pensavo che ne sapessi qualcosa di speciale.

— più elegante

2

Utilizza l' audio.js che è un polyfill per il <audio>tag con fallback da lampeggiare.

In generale, guarda https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills per polyfill alle API HTML 5 .. ( include più <audio>polyfills )

— Gabriele Petrioli
fonte

2

se vuoi chiamare un evento sul codice Il modo migliore per farlo è creare un trigger perché il browser non risponderà se l'utente nonènella pagina

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

ora puoi attivare il pulsante quando vuoi riprodurre il suono

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

questo codice proviene da talkerscode Per il tutorial completo visita http://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.php

— ramancha
fonte

0

Possiamo semplicemente usare l'audio e un oggetto insieme come:

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

e persino aggiungendo addEventListenerper playeended

— Mostafa
fonte

0

Ho scritto un metodo funzionale pulito per riprodurre i suoni:

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