Как воспроизвести звук уведомления на веб-сайтах?

108

Когда происходит определенное событие, я хочу, чтобы мой веб-сайт воспроизводил короткое уведомление для пользователя.

Звук не должен запускаться автоматически (мгновенно) при открытии веб-сайта. Вместо этого его следует воспроизводить по запросу через JavaScript (когда происходит определенное событие).

Важно, чтобы это работало и в старых браузерах (IE6 и т. Д.).

Итак, в основном есть два вопроса:

  1. Какой кодек мне использовать?
  2. Как лучше всего встроить аудиофайл? ( <embed>vs. <object>Flash vs. <audio>)
javascript html audio notifications html5-audio Тимо
источник
Вы можете попробовать github.com/VJAI/musquito
VJAI 01

Ответы:

98

Это решение работает практически во всех браузерах (даже без установленного 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>

Поддержка браузера

  • <audio> (Современные браузеры)
  • <embed> (Резерв)

Используемые коды

  • MP3 для Chrome, Safari и Internet Explorer.
  • OGG для Firefox и Opera.
Тимо
источник
Хороший ответ. В этом случае звук воспроизводится мгновенно при открытии страницы, но я предполагаю, что вы покажете, как это сделать, просто в демонстрационных целях.
Стефан
@Stefan Это верно, но может сбивать с толку. Я уберу это из своего ответа. Спасибо за подсказку.
Timo
Большое спасибо за решение @valmar
Jagdeep Singh
@DavidLarsson Потому что есть некоторые браузеры, которые не могут читать определенные кодеки.
Timo
2
Мне не удалось заставить его работать с моим Internet Explorer версии 8.
М. Арафат Аль Махмуд
83

С 2016 года будет достаточно (вам даже не нужно встраивать):

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

Подробнее здесь .

Weltschmerz
источник
И, возможно, также проверьте, определен ли звук, прежде чем делать это.
Кристоф Русси,
1
Это отличный ответ, такой простой и отлично работает.
Polaris
3
Больше не работает, я получаюUncaught (in promise) DOMException
jack blank
2
Просто попробовал его в последней версии Chrome (версия 74.0.3729.169), и у меня это работает.
weltschmerz 03
он работает правильно в Chrome, FF и Opera и является намного лучшим подходом, чем принятый ответ, поскольку этот ответ продолжает добавлять аудиотег к вашему тегу body, поскольку сценарий уведомлений, скорее всего, будет вызываться через определенные промежутки времени
Мухаммад Омер Аслам
16

Еще один плагин для воспроизведения звуков уведомлений на сайтах: Ion.Sound

Преимущества:

  • JavaScript-плагин для воспроизведения звуков на основе Web Audio API с откатом на HTML5 Audio.
  • Плагин работает в большинстве популярных настольных и мобильных браузеров и может использоваться везде, от обычных веб-сайтов до браузерных игр.
  • Включена поддержка аудио-спрайтов.
  • Никаких зависимостей (jQuery не требуется).
  • Включено 25 бесплатных звуков.

Настроить плагин:

// 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");
Кассио Ландим
источник
4

Как насчет медиаплеера Yahoo? Просто вставьте библиотеку Yahoo 

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

И используйте это как

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

Для автозапуска

$(function() { $("#beep").click(); });
Starx
источник
Тоже хорошее решение, но можно ли скрыть эту ссылку? Я думаю, если вы установите display: noneего, он больше не будет воспроизводить звук. Кроме того, в медиа-библиотеке Yahoo слева от ссылки отображается небольшой значок воспроизведения.
Тимо,
@valmar: visiblity: hidden;это ваш ответ
Starx
3

Воспроизведение кросс-браузерных уведомлений

Как посоветовал @Tim Tisdall из этого сообщения, проверьте плагин Howler.js .

Браузеры, такие как Chrome, отключают javascriptвыполнение в свернутом или неактивном состоянии для повышения производительности . Но при этом воспроизводятся звуковые уведомления, даже если браузер неактивен или свернут пользователем.

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

               sound.play();

Надежда кому-то помогает.

шайджут
источник
Как звучит "Уведомление воспроизводится, даже если браузер неактивен или свернут"? Звук может воспроизводиться, если его вызвать, когда страница спит, но как sound.play()в первую очередь запускается вызывающий код ? Помещает ли Howler все ваши setTimeouts в оболочку?
Posest 07
@poshest, я не знаю, как это работает, может проверять исходный код или связаться с автором плагина может вам помочь.
Shaijut
1
Хорошо, спасибо. Просто вы упомянули эту функцию и связали этот другой ответ Stackoverflow, но он не упоминается как функция в документации Howler , поэтому я подумал, что вы знаете об этом что-то особенное.
Poshest 07
2

если вы хотите вызвать событие в коде. Лучший способ сделать это - создать триггер, потому что браузер не будет отвечать, если пользователя нет на странице.

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

теперь вы можете нажать кнопку, когда хотите воспроизвести звук 

$('#playSoundBtn').trigger('click');
Сфван Эссам
источник
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();
}

этот код взят из Talkerscode. Полное руководство см. на http://talkerscode.com/webtricks/play-sound-on-notification-using-javascript-and-php.php

Раманча
источник
0

Мы можем просто использовать звук и объект вместе, например:

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

и даже добавив addEventListenerдля playиended

Мостафа
источник
0

Я написал чистый функциональный метод воспроизведения звуков:

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;
}
разъем
источник