Як відтворювати звук сповіщень на веб-сайтах?

108

Коли відбувається певна подія, я хочу, щоб мій веб-сайт відтворював коротке повідомлення користувача.

Звук не повинен автоматично запускатися (миттєво), коли веб-сайт відкривається. Натомість його слід відтворювати на вимогу через JavaScript (коли відбувається певна подія).

Важливо, щоб це також працювало на старих браузерах (IE6 і подібних).

Отже, в основному є два питання:

Який кодек я повинен використовувати?
Яка найкраща практика вбудувати аудіофайл? ( <embed>проти <object>Flash проти <audio>)

— Тімо
джерело

Ви можете спробувати github.com/VJAI/musquito

— VJAI

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 Це правильно, але це може заплутати. Я вилучу це зі своєї відповіді. Дякую за підказку.

— Тимо

Дуже

— дякую

@DavidLarsson Оскільки є деякі браузери, які не можуть читати певні кодеки.

— Тімо

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

Це чудова відповідь, така проста і працює чудово.

— Поляріс

3

Більше не працює, я отримуюUncaught (in promise) DOMException

— jack blank

2

Просто спробував його на останньому Chrome (версія 74.0.3729.169), і він працює для мене.

— weltschmerz

він працює правильно на chrome, FF та opera і є набагато кращим підходом, ніж прийнятий відповідь, оскільки ця відповідь продовжує додавати звуковий тег до вашого тегу, оскільки сценарій сповіщень, швидше за все, буде викликаний з інтервалом

— Мухаммед Омер Аслам

16

Ще один плагін для відтворення звуків сповіщень на веб-сайтах: Ion.Sound

Переваги:

JavaScript-плагін для відтворення звуків на основі веб-аудіо 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(); });

— Старкс
джерело

Також приємне рішення, але чи можна було б приховати це посилання? Я думаю, якщо ви налаштуєте display: noneце, він більше не відтворюватиме звук. Також медіатека Yahoo показує невелику піктограму "грати" ліворуч від посилання ..

— Тимо

@valmar: visiblity: hidden;ваша відповідь

— Starx

3

Відтворюйте сповіщення, сумісні між веб-переглядачами

Як повідомив @Tim Tisdall з цієї публікації, перевірте плагін Howler.js .

Веб-переглядачі, як хром, відключають 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()в першу чергу? Чи хаулер поклав усі ваші встановлені таймери в обгортку?

— найвищий

@poshest, я не знаю, як це відтворюється, можливо, перевірка вихідного коду чи контакт з автором плагіна може вам допомогти.

— shaijut

1

Добре, дякую. Просто ви згадали про цю функцію та пов’язали цю іншу відповідь Stackoverflow, але вона не згадується як особливість у документації Howler , тому я подумав, що ви знаєте про неї щось особливе.

— найвищий

2

Використовуйте audio.js, який є полізасипкою для <audio>тегу з резервним відтворенням для спалаху.

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

— Габріеле Петріолі
джерело

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

цей код від розмовного коду. Повний підручник відвідайте 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;
}

— Джек
джерело