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

108

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

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

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

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

Какой кодек мне использовать?
Как лучше всего встроить аудиофайл? ( <embed>vs. <object>Flash vs. <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

Используйте audio.js, который является полифилом для <audio>тега с резервной вспышкой.

В общем, посмотрите https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills для полифиллов для API HTML 5 .. ( он включает больше <audio>полифиллов )

— Габриэле Петриоли
источник

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

— разъем
источник