it-swarm.com.de

Wie kann ich auf Websites einen Benachrichtigungston abspielen?

Wenn ein bestimmtes Ereignis eintritt, möchte ich, dass meine Website dem Benutzer einen kurzen Benachrichtigungston gibt.

Der Sound sollte nicht automatisch gestartet werden (sofort), wenn die Website geöffnet wird . Stattdessen sollte er bei Bedarf per JavaScript abgespielt werden (wenn das bestimmte Ereignis eintritt).

Es ist wichtig, dass dies auch mit älteren Browsern (IE6 und dergleichen) funktioniert.

Im Grunde gibt es zwei Fragen:

  1. Welchen Codec sollte ich verwenden?
  2. Was ist die beste Methode zum Einbetten der Audiodatei? (<embed> vs. <object> vs. Flash vs. <audio>)
85
Timo

Diese Lösung funktioniert auf fast allen Browsern (auch ohne 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>

Browser-Unterstützung

Verwendete Codes

  • MP3 für Chrome, Safari und Internet Explorer.
  • OGG für Firefox und Opera.
85
Timo

Ab 2016 genügt Folgendes (Sie müssen nicht einmal einbetten):

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

Sehen Sie mehr hier .

51
weltschmerz

Ein weiteres Plugin, um Benachrichtigungstöne auf Websites abzuspielen: Ion.Sound

Vorteile:

  • JavaScript-Plugin zum Abspielen von Sounds basierend auf Web Audio API mit Rückgriff auf HTML5-Audio.
  • Das Plugin funktioniert mit den gängigsten Desktop- und mobilen Browsern und kann überall verwendet werden, von gängigen Websites bis zu Browsergames.
  • Audio-Sprites-Unterstützung enthalten.
  • Keine Abhängigkeiten (jQuery nicht erforderlich).
  • 25 kostenlose Sounds enthalten.

Plugin einrichten:

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

Wie wäre es mit dem Mediaplayer von Yahoo Betten Sie einfach die Bibliothek von Yahoo ein 

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

Und benutze es gerne

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

Autostart

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

Crossbrowser-kompatible Benachrichtigungen abspielen

Wie von @Tim Tisdall aus this post, Check Howler.js Plugin empfohlen.

Browser wie Chrome deaktivieren die Ausführung von javascript, wenn sie für Leistung Verbesserungen minimiert oder inaktiv sind. Hiermit werden jedoch Benachrichtigungstöne abgespielt, auch wenn der Browser inaktiv ist oder vom Benutzer minimiert wird.

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

               sound.play();

Hoffnung hilft jemandem.

3
stom

Verwenden Sie die Datei audio.js , die eine Polyfill für das <audio>-Tag mit Fallback zum Flashen ist.

Im Allgemeinen unter https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills nach Polyfills für die HTML 5-APIs .. (es enthält weitere <audio> Polyfills)

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

dieser Code stammt von talkerscode. Eine vollständige Anleitung finden Sie unter http://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.php

0
ramancha

Wir können Audio und ein Objekt einfach zusammen verwenden:

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

und sogar addEventListener für play und ended hinzufügen

0
Mostafa

Ich habe eine saubere funktionale Methode zum Abspielen von Sounds geschrieben:

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