Jak odtworzyć dźwięk powiadomienia na stronach internetowych?

108

Chcę, aby w przypadku wystąpienia określonego zdarzenia moja witryna internetowa odtwarzała użytkownikowi krótki dźwięk powiadomienia.

Dźwięk nie powinien uruchamiać się automatycznie (natychmiast) po otwarciu strony internetowej. Zamiast tego powinien być odtwarzany na żądanie za pośrednictwem JavaScript (gdy wystąpi określone zdarzenie).

Ważne jest, aby działało to również w starszych przeglądarkach (IE6 i inne).

Zasadniczo istnieją dwa pytania:

  1. Jakiego kodeka powinienem użyć?
  2. Jaka jest najlepsza praktyka przy osadzaniu pliku audio? (w <embed>porównaniu <object>z Flash vs. <audio>)
javascript html audio notifications html5-audio Timo
źródło
Możesz wypróbować github.com/VJAI/musquito
VJAI

Odpowiedzi:

98

To rozwiązanie działa na prawie wszystkich przeglądarkach (nawet bez zainstalowanego Flasha):

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

Wsparcie przeglądarki

Używane kody

  • MP3 dla Chrome, Safari i Internet Explorer.
  • OGG dla przeglądarek Firefox i Opera.
Timo
źródło
Niezła odpowiedź. W tym przypadku dźwięk jest odtwarzany natychmiast po otwarciu strony - ale zakładam, że pokazujesz, jak to zrobić, tylko w celach demonstracyjnych.
Stefan
@Stefan Zgadza się, ale może być mylące. Usunę to z mojej odpowiedzi. Dzięki za podpowiedź.
Timo,
Bardzo dziękuję za rozwiązanie @valmar
Singh
@DavidLarsson Ponieważ istnieją przeglądarki, które nie mogą odczytać niektórych kodeków.
Timo
2
Nie udało mi się to uruchomić z moją przeglądarką Internet Explorer w wersji 8.
Md. Arafat Al Mahmud
83

Od 2016 r. Wystarczą następujące elementy (nie musisz nawet osadzać):

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

Zobacz więcej tutaj .

weltschmerz
źródło
A może także sprawdź, czy wcześniej zdefiniowano Audio.
Christophe Roussy
1
To świetna odpowiedź, tak prosta i działa doskonale.
Polaris
3
Już nie działa, dostajęUncaught (in promise) DOMException
pusty jack
2
Właśnie wypróbowałem to w najnowszym Chrome (wersja 74.0.3729.169) i działa dla mnie.
weltschmerz
działa poprawnie na chrome, FF i operze i jest o wiele lepszym podejściem niż zaakceptowana odpowiedź, ponieważ ta odpowiedź ciągle dołącza tag audio do tagu body, ponieważ skrypt powiadomień najprawdopodobniej będzie wywoływany w odstępach czasu
Muhammad Omer Aslam
16

Jeszcze jedna wtyczka do odtwarzania dźwięków powiadomień na stronach internetowych: Ion.Sound

Zalety:

  • Wtyczka JavaScript do odtwarzania dźwięków w oparciu o interfejs API Web Audio z możliwością powrotu do HTML5 Audio.
  • Wtyczka działa na najpopularniejszych przeglądarkach stacjonarnych i mobilnych i może być używana wszędzie, od popularnych witryn internetowych po gry przeglądarkowe.
  • Zawiera wsparcie dla sprite'ów audio.
  • Brak gatunków zależnych (jQuery nie jest wymagane).
  • Zawiera 25 darmowych dźwięków.

Skonfiguruj wtyczkę:

// 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
źródło
4

Co powiesz na odtwarzacz multimedialny Yahoo? Po prostu umieść bibliotekę Yahoo? 

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

I używaj go jak

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

Aby automatycznie uruchomić

$(function() { $("#beep").click(); });
Starx
źródło
Również fajne rozwiązanie, ale czy dało się ukryć ten link? Myślę, że jeśli to ustawisz display: none, nie będzie już odtwarzać dźwięku. Biblioteka multimediów Yahoo wyświetla również małą ikonę „odtwarzania” po lewej stronie łącza.
Timo,
@valmar: visiblity: hidden;to twoja odpowiedź
Starx
3

Odtwarzaj powiadomienia kompatybilne z różnymi przeglądarkami

Zgodnie z radą @Tim Tisdall z tego postu, sprawdź wtyczkę Howler.js .

Przeglądarki takie jak Chrome wyłączają javascriptwykonywanie, gdy są zminimalizowane lub nieaktywne w celu poprawy wydajności . Ale to odtwarza dźwięki powiadomień, nawet jeśli przeglądarka jest nieaktywna lub zminimalizowana przez użytkownika.

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

               sound.play();

Nadzieja pomaga komuś.

shaijut
źródło
W jaki sposób „Odtwarza dźwięki powiadomień, nawet jeśli przeglądarka jest nieaktywna lub zminimalizowana”? Dźwięk może być odtwarzany, jeśli zostanie wywołany, gdy strona śpi, ale w jaki sposób działa kod, który wywołuje sound.play()? Czy Howler umieszcza wszystkie twoje setTimeouts w opakowaniu?
najdoskonalszy
@poshest, nie wiem, jak to gra, może sprawdzać kod źródłowy lub skontaktować się z autorem wtyczki.
shaijut
1
Ok dzięki. Po prostu wspomniałeś o tej funkcji i połączyłeś inną odpowiedź Stackoverflow, ale nie jest ona wspomniana jako funkcja w dokumentacji Howlera , więc pomyślałem, że wiesz o niej coś wyjątkowego.
najpiękniejszy
2

jeśli chcesz wywołać zdarzenie w kodzie Najlepszym sposobem na to jest utworzenie wyzwalacza ponieważ przeglądarka nie odpowie jeśli użytkownika nie ma na stronie

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

teraz możesz aktywować przycisk, gdy chcesz odtwarzać dźwięk 

$('#playSoundBtn').trigger('click');
Sfwan Essam
źródło
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();
}

ten kod pochodzi z talkerscode Aby zobaczyć pełny samouczek, odwiedź http://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.php

ramancha
źródło
0

Możemy po prostu użyć razem Audio i obiektu, na przykład:

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

a nawet dodając addEventListenerdla playiended

Mostafa
źródło
0

Napisałem czystą funkcjonalną metodę odtwarzania dźwięków:

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;
}
Jacek
źródło