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

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

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

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

Таким образом, в основном есть два вопроса:

Какой кодек я должен использовать?
Что лучше всего использовать для встраивания аудиофайла? (<embed> против <object> против вспышки против <audio>)

источник

2012-04-11 Timo

Downvoter поможет объяснить, что не так с моим вопросом? – Timo

Я нашел очень элегантное решение, которое работает на почти все браузеры (даже без вспышки установлен).

Я тестировал Chrome, Safari, Firefox, Opera и IE6.

Это смесь HTML5 <audio> тег для новых браузеров и <embed> тегов Fallback для старых браузеров:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html> 

    <head> 
     <title>Audio test</title> 

     <script type="text/javascript"> 
      /** 
      * @param {string} filename The name of the file WITHOUT ending 
      */ 
      function playSound(filename){ 
       document.getElementById("sound").innerHTML='<audio autoplay="autoplay"><source src="' + filename + '.mp3" type="audio/mpeg" /><source src="' + filename + '.ogg" type="audio/ogg" /><embed hidden="true" autostart="true" loop="false" src="' + filename +'.mp3" /></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>

Как кодеками я использую MP3 для Chrome, Safari и IE. Для Firefox и Opera я использовал OGG.

источник

2012-04-11 13:56:18 Timo

Хороший ответ. В этом случае, хотя звук воспроизводится мгновенно при открытии страницы, но я предполагаю, что вы показываете, как, только для демонстрационных целей. – Stefan

@Stefan Это правильно, но может ввести в заблуждение. Я удалю это из своего ответа. Спасибо за подсказку. – Timo

Отличный ответ bro ............ отлично работает ....... Спасибо @valmar –

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

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

источник

2012-04-11 11:58:43

Mh, что не будет работать на IE6 без установленной Flash. – Timo

ах .. извините .. не понял, что вы хотели родного решения. –

Как насчет средств массовой информации в 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(); });

источник

2012-04-11 15:49:59 Starx

Также хорошее решение, но можно ли скрыть эту ссылку? Я думаю, что если вы установите для него «display: none», он больше не будет воспроизводить звук. Кроме того, в медиабиблиотеке Yahoo отображается небольшая иконка «play» слева от ссылки. – Timo

@valmar: 'visiblity: hidden;' ваш ответ – Starx

Один плагин для воспроизведения звуков уведомлений на сайтах: 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");

источник

2014-06-16 23:59:54

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

источник

2016-02-25 11:17:06 ramancha

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

Как по посоветовал @ Тим Tisdall от this сообщение, Проверить Howler.js Плагин.

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

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

       sound.play();

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

источник

2016-07-25 15:20:36 stom

Как звучит уведомление о воспроизведении, даже если браузер неактивен или сведен к минимуму? Звук может воспроизводиться, если вызывается, когда страница спит, но как работает код, который вызывает 'sound.play()' в первую очередь? Вызывает ли ваш герой все ваши setTimeouts в обертке? – poshest

@poshest, я не знаю, как он играет, может быть проверка исходного кода или обращение к автору плагина может вам помочь. – stom

ОК, спасибо.Просто вы упомянули эту функцию и связали ее с другим ответом Stackoverflow, но она не упоминается как функция в документации [Howler documentation] (https://github.com/goldfire/howler.js/), поэтому я думал, что вы что-то знаете особенный об этом. – poshest

По состоянию на 2016 год, следующий будет достаточно (вам даже не нужно вставлять):

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

Смотреть еще here.

источник

2016-09-02 06:50:02 weltschmerz

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

ответ

Смежные вопросы