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:

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

Risposte:


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

Codici utilizzati

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

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 .


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");

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

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.


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

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


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


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;
}
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.