web-dev-qa-db-fra.com

Comment jouer un son de notification sur des sites Web?

Lorsqu'un certain événement se produit, je souhaite que mon site Web émette une courte notification sonore à destination de l'utilisateur.

Le son devrait pas démarrer automatiquement (instantanément) à l'ouverture du site . Au lieu de cela, il devrait être lu à la demande via JavaScript (lorsque cet événement se produit).

Il est important que cela fonctionne également sur les anciens navigateurs (IE6 et autres).

Donc, fondamentalement, il y a deux questions:

  1. Quel codec devrais-je utiliser?
  2. Quelle est la meilleure pratique pour intégrer le fichier audio? (<embed> vs. <object> vs. Flash vs. <audio>)
javascripthtmlaudionotificationshtml5-audio
85
Timo

Cette solution fonctionne sur pratiquement tous les navigateurs (même sans Flash):

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

Support du navigateur

Codes utilisés

  • MP3 pour Chrome, Safari et Internet Explorer.
  • OGG pour Firefox et Opera.
85
Timo

À compter de 2016, les éléments suivants suffiront (vous n'avez même pas besoin d'intégrer):

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

Voir plus ici .

51
weltschmerz

Encore un plugin, pour jouer les notifications sonores sur les sites web: Ion.Sound

Avantages:

  • Plug-in JavaScript pour la lecture de sons basés sur l'API Web Audio, avec repli sur HTML5 Audio.
  • Plugin fonctionne sur la plupart des navigateurs de bureau et mobiles les plus courants et peut être utilisé partout, des sites Web courants aux jeux sur navigateur.
  • Support audio-sprites inclus.
  • Aucune dépendance (jQuery non requis).
  • 25 sons gratuits inclus.

Mettre en place le 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");
14
Cassio Landim

Qu'en est-il du lecteur multimédia de Yahoo Il suffit d'intégrer la bibliothèque de Yahoo 

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

Et l'utiliser comme

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

Pour démarrer automatiquement

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

Lire les notifications compatibles avec tous les navigateurs

Comme conseillé par @Tim Tisdall de this post, Check Howler.js Plugin.

Des navigateurs tels que chrome désactivent l'exécution javascript quand elle est réduite ou inactive pour les améliorations performances . Mais cette notification sonne même si le navigateur est inactif ou minimisé par l'utilisateur.

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

               sound.play();

Hope aide quelqu'un.

3
stom

Utilisez le fichier audio.js qui est un remplissage multiple pour la balise <audio> avec un repli pour clignoter.

En général, regardez https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills pour les polyfills des API HTML 5 .. (il comprend plus de <audio> polyfills)

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

ce code provient de talkerscode Pour un tutoriel complet, visitez http://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.php

0
ramancha

Nous pouvons simplement utiliser Audio et un objet ensemble comme:

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

et même en ajoutant addEventListener pour play et ended

0
Mostafa

J'ai écrit une méthode fonctionnelle propre pour jouer des sons:

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;
}
0
Jack Nicholson