Come riprodurre un suono di notifica sui siti Web?

Quando si verifica un determinato evento, desidero che il mio sito Web riproduca un breve suono di notifica per l'utente.Come riprodurre un suono di notifica sui siti Web?

L'audio dovrebbe non autoavvio (istantaneo) quando il sito Web viene aperto. Invece, dovrebbe essere riprodotto su richiesta tramite JavaScript (quando si verifica quel determinato evento).

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

Quindi, in sostanza ci sono due domande:

Quali codec devo usare?
Qual è la procedura migliore per incorporare il file audio? (Vs <embed> vs <object> vs Flash <audio>)

fonte

2012-04-11 Timo

La cura del paziente per spiegare cosa c'è di sbagliato nella mia domanda? – Timo

ho trovato una soluzione molto elegante che funziona su praticamente tutti i browser (anche senza Flash installato).

Ho provato su Chrome, Safari, Firefox, Opera e IE6.

E 'un mix di HTML5 <audio> tag per i browser più recenti e <embed> tag Fallback per browser meno recenti:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 

    <head> 
     <title>Audio test</title> 

     <script type="text/javascript"> 
      /** 
      * @param {string} filename The name of the file WITHOUT ending 
      */ 
      function playSound(filename){ 
       document.getElementById("sound").innerHTML='<audio autoplay="autoplay"><source src="' + filename + '.mp3" type="audio/mpeg" /><source src="' + filename + '.ogg" type="audio/ogg" /><embed hidden="true" autostart="true" loop="false" src="' + filename +'.mp3" /></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>

Come codec MP3 che uso per Chrome, Safari e IE. Per Firefox e Opera ho usato OGG.

fonte

2012-04-11 13:56:18 Timo

Bella risposta. In questo caso, tuttavia, il suono viene riprodotto istantaneamente quando si apre la pagina, ma presumo che tu mostri come, solo a scopo dimostrativo. – Stefan

@Stefan Questo è corretto ma potrebbe essere fonte di confusione. Lo rimuoverò dalla mia risposta. Grazie per il suggerimento. – Timo

Risposta perfetta bro ............ funziona alla grande ....... Grazie @valmar –

Utilizzare il audio.js che è un polyfill per il tag <audio> con fallback a lampeggiare.

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

fonte

2012-04-11 11:58:43

Mh, che non funzionerà su IE6 senza Flash installato. – Timo

ah .. scusa .. non ho capito che volevi una soluzione nativa .. –

Come circa i media del yahoo giocatore Basta incorporare biblioteca di yahoo

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

e usarlo come

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

per l'avvio automatico di più

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

fonte

2012-04-11 15:49:59 Starx

Anche una bella soluzione, ma sarebbe possibile nascondere quel collegamento? Penso che se imposti 'display: none' per questo, non suonerà più il suono. Inoltre, la libreria multimediale di Yahoo mostra una piccola icona "play" a sinistra del collegamento. – Timo

@valmar: 'visiblity: hidden;' è la tua risposta – Starx

Un plug-in, per riprodurre i suoni di notifica sui siti Web: Ion.Sound

Vantaggi:

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

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

fonte

2014-06-16 23:59:54

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 da talkerscode Per una completa visita un'esercitazione http://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.php

fonte

2016-02-25 11:17:06 ramancha

Giocare con cross browser compatibili notifiche

Come consigliate dallo @ Tim Tisdall dal post this, Controllare Howler.js Plugin.

I browser come chrome disabilita l'esecuzione javascript quando ridotta a icona o inattiva per i miglioramenti performance. Ma questo riproduce i 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.

fonte

2016-07-25 15:20:36 stom

In che modo "Suona la notifica suona anche se il browser è inattivo o ridotto a icona"? Il suono potrebbe suonare se chiamato quando la pagina è addormentata, ma come fa il codice che chiama 'sound.play()' viene eseguito in primo luogo? Howler mette tutti i tuoi setTimeout in un wrapper? – poshest

@poshest, non so come funzioni, potrebbe essere il controllo del codice sorgente o contattare l'autore del plugin per aiutarti. – stom

OK, grazie.È solo che hai menzionato questa funzione e hai collegato quell'altra risposta StackOverflow, ma non è menzionata come una funzione nella [documentazione di Howler] (https://github.com/goldfire/howler.js/), quindi pensavo che tu sapessi qualcosa speciale a riguardo. – poshest

A partire dal 2016, di seguito sarà sufficiente (non c'è nemmeno bisogno di incorporare):

var audio = new Audio('/path/to/audio/file.mp3'); 
audio.play();

Tutte here.

fonte

2016-09-02 06:50:02 weltschmerz

Come riprodurre un suono di notifica sui siti Web?

risposta

Problemi correlati