Wie wird ein Benachrichtigungston auf Websites abgespielt?

107

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

Der Sound sollte beim Öffnen der Website nicht (sofort) automatisch gestartet werden. Stattdessen sollte es bei Bedarf über JavaScript abgespielt werden (wenn dieses bestimmte Ereignis eintritt).

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

Grundsätzlich gibt es also zwei Fragen:

  1. Welchen Codec soll ich verwenden?
  2. Was ist die beste Vorgehensweise zum Einbetten der Audiodatei? ( <embed>vs. <object>vs. Flash vs. <audio>)
javascript html audio notifications html5-audio Timo
quelle
Sie können versuchen, github.com/VJAI/musquito
VJAI

Antworten:

98

Diese Lösung funktioniert mit nahezu 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.
Timo
quelle
Gute Antwort. In diesem Fall wird der Ton zwar sofort abgespielt, wenn die Seite geöffnet wird - aber ich gehe davon aus, dass Sie nur zu Demonstrationszwecken zeigen, wie.
Stefan
@ Stefan Das ist richtig, kann aber verwirrend sein. Ich werde das aus meiner Antwort entfernen. Danke für den Tipp.
Timo
Vielen Dank für die Lösung @valmar
Jagdeep Singh
@DavidLarsson Da es einige Browser gibt, die bestimmte Codecs nicht lesen können.
Timo
2
Ich konnte es mit meinem Internet Explorer Version 8 nicht zum
Laufen bringen.
82

Ab 2016 reicht Folgendes aus (Sie müssen nicht einmal einbetten):

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

Sehen Sie hier mehr .

weltschmerz
quelle
Überprüfen Sie möglicherweise auch, ob Audio definiert ist, bevor Sie dies tun.
Christophe Roussy
1
Dies ist eine großartige Antwort, so einfach und funktioniert perfekt.
Polaris
3
Funktioniert nicht mehr Ich bekommeUncaught (in promise) DOMException
Jack Blank
2
Habe es gerade auf dem neuesten Chrome (Version 74.0.3729.169) versucht und es funktioniert für mich.
Weltschmerz
Es funktioniert korrekt auf Chrome, FF und Oper und ist viel besser als die akzeptierte Antwort, da diese Antwort das Audio-Tag weiterhin an Ihr Body-Tag anhängt, da das Benachrichtigungsskript höchstwahrscheinlich in Intervallen aufgerufen wird
Muhammad Omer Aslam
16

Ein weiteres Plugin zum Abspielen von Benachrichtigungstönen auf Websites: Ion.Sound

Vorteile:

  • JavaScript-Plugin zum Abspielen von Sounds basierend auf der Web Audio API mit Fallback auf HTML5 Audio.
  • Das Plugin funktioniert auf den meisten gängigen Desktop- und mobilen Browsern und kann überall verwendet werden, von gängigen Websites bis hin zu Browsergames.
  • Unterstützung für Audio-Sprites 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");
Cassio Landim
quelle
4

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>

Zum Autostart

$(function() { $("#beep").click(); });
Starx
quelle
Auch eine schöne Lösung, aber wäre es möglich, diesen Link zu verbergen? Ich denke, wenn Sie sich darauf einstellen display: none, wird der Sound nicht mehr abgespielt. Außerdem zeigt die Yahoo-Medienbibliothek ein kleines "Wiedergabesymbol" links vom Link.
Timo
@valmar: visiblity: hidden;ist Ihre Antwort
Starx
3

Spielen Sie browserübergreifende Benachrichtigungen ab

Überprüfen Sie das Howler.js- Plugin, wie von @Tim Tisdall in diesem Beitrag empfohlen .

Browser wie Chrome deaktivieren die javascriptAusführung, wenn sie minimiert oder inaktiv sind, um die Leistung zu verbessern. Dies spielt jedoch Benachrichtigungstöne ab, selbst wenn der Browser vom Benutzer inaktiv oder minimiert ist.

  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.

Shaijut
quelle
Wie klingt "Dies spielt die Benachrichtigung ab, auch wenn der Browser inaktiv oder minimiert ist"? Der Sound wird möglicherweise abgespielt, wenn er aufgerufen wird, während die Seite schläft. Wie wird der Code, der aufgerufen wird, überhaupt ausgeführt sound.play()? Bringt Howler alle Ihre setTimeouts in einen Wrapper?
vornehmsten
@poshest, ich weiß nicht, wie es abgespielt wird. Möglicherweise hilft es Ihnen, den Quellcode zu überprüfen oder den Autor des Plugins zu kontaktieren.
Shaijut
1
OK danke. Es ist nur so, dass Sie diese Funktion erwähnt und diese andere Stackoverflow-Antwort verknüpft haben, aber sie wird in der Howler-Dokumentation nicht als Funktion erwähnt . Ich dachte, Sie wüssten etwas Besonderes darüber.
vornehmsten
2

Wenn Sie ein Ereignis für den Code aufrufen möchten, erstellen Sie am besten einen Trigger, da der Browser nicht reagiert, wenn sich der Benutzer nicht auf der Seite befindet

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

Jetzt können Sie Ihre Taste auslösen, wenn Sie Sound abspielen möchten 

$('#playSoundBtn').trigger('click');
Sfwan Essam
quelle
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();
}

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

Ramancha
quelle
0

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

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

und sogar addEventListenerfür playund hinzufügenended

Mostafa
quelle
0

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;
}
Jack
quelle