Відтворювати звукові сповіщення за допомогою Javascript?


86

Як я можу це зробити, щоб кожен раз, коли користувач натискає посилання, ми відтворювали звук? Використовуючи тут javascript та jquery.


2
Я написав плагін jQ для управління звуком soundplay.nikolavukovic.net63.net , він підтримує те, що ви просите, і багато іншого, документи в комплекті з кодом JavaScript, перевірте це.
перевизначення громадськості

Ви можете (наприклад) заселити відтворення (ів) з купою сторінки звукових ефектів і .load(), .play()їх в ключові моменти , використовуючи API.
перевизначення громадськості

1
Для любові до всього святого, включіть німий варіант. Посилання зі звуками - це один із найшвидших способів забезпечити, щоб користувач ніколи не повертався на ваш сайт.
Хитається

Відповіді:


46

Використовуйте цей плагін: https://github.com/admsev/jquery-play-sound

$.playSound('http://example.org/sound.mp3');

Чи є спосіб зробити це так, щоб воно витягувало URL-адресу фактичного посилання?
hakarune

@hakarune: Так, просто видаліть закінчення ".mp3" із джерела .
Kai Noack

Це відтворює звуки, якщо браузер неактивний або згорнутий користувачем. Надія комусь допомагає.
shaijut

25

Помістіть <audio>елемент на свою сторінку.
Отримайте свій звуковий елемент і викличте play()метод:

document.getElementById('yourAudioTag').play();

Ознайомтесь із цим прикладом: http://www.storiesinflight.com/html5/audio.html

Цей сайт розкриває деякі інші цікаві речі , які ви можете зробити , такі як load(), pause()і кілька інших властивостей звукового елемента.

Коли саме ви хочете відтворити цей звуковий елемент, вирішувати вам. Прочитайте текст кнопки та порівняйте з "ні", якщо хочете.

Як варіант

http://www.schillmania.com/projects/soundmanager2/

SoundManager 2 забезпечує простий у використанні API, що дозволяє відтворювати звук у будь-якому сучасному браузері, включаючи IE 6+. Якщо браузер не підтримує HTML5, він отримує допомогу від flash. Якщо вам потрібен строгий HTML5 і відсутність флеш-пам'яті, для цього є налаштування, preferFlash = false

Він підтримує 100% звук без спалаху на iPad, iPhone (iOS4) та інших пристроях із підтримкою HTML5 + браузерах

Використовувати так само просто, як:

<script src="soundmanager2.js"></script>
<script>
// where to find flash SWFs, if needed...
soundManager.url = '/path/to/swf-files/';

soundManager.onready(function() {
    soundManager.createSound({
        id: 'mySound',
        url: '/path/to/an.mp3'
    });

    // ...and play it
    soundManager.play('mySound');
});

Ось демонстрація цього в дії: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/


21

Знайшов щось подібне:

//javascript:
function playSound( url ){   
  document.getElementById("sound").innerHTML="<embed src='"+url+"' hidden=true autostart=true loop=false>";
} 

5
Це повільно. Гра з браузерами Windows займає майже секунду
thenengah

@Codeglot, що залежить від програми. 1 секунда відповідала б моїм вимогам.
Мухд,

1
Крім того, ви могли б, можливо, попередньо завантажити його, щоб позбутися затримки.
Мухд,

9
Затримка відбувається через синтаксичний аналіз DOM, завантаження файлу та його запуск. Якщо ви попередньо завантажили його, ви можете просто запустити його, коли це потрібно .
Xeoncross

1 секунда після події, пов’язаної з мишами, - це довгий час. Надто довго.
TARKUS

12

Використання аудіотегу html5 та jquery:

// appending HTML5 Audio Tag in HTML Body
$('<audio id="chatAudio">
    <source src="notify.ogg" type="audio/ogg">
    <source src="notify.mp3" type="audio/mpeg">
</audio>').appendTo('body');

// play sound
$('#chatAudio')[0].play();

Код звідси .

У своїй реалізації я додав вбудований звук безпосередньо в HTML без додавання jquery.


2
Просто для довідки, я граю на звук оброблювачем успіху від АЯКС функції (яка працює на сторінці завантаження), і отримати цю помилку: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first, Chrome Version 70.0.3538.102 (Official Build) (64-bit)... здається, рішення тут: stackoverflow.com/a/52821721
user1063287


7
$('a').click(function(){
    $('embed').remove();
    $('body').append('<embed src="/path/to/your/sound.wav" autostart="true" hidden="true" loop="false">');
});

Чому за допомогою цього методу смуги прокрутки стають синіми в Chrome?
Брайан Лейшман,

Відкривши це посилання, це вирішить як проблему смуги прокрутки, так і відтворення звуку stackoverflow.com/questions/15483455/…
Азам Алві

3

Я написав невелику функцію, яка може це робити за допомогою Web Audio API ...

var beep = function(duration, type, finishedCallback) {

    if (!(window.audioContext || window.webkitAudioContext)) {
        throw Error("Your browser does not support Audio Context.");
    }

    duration = +duration;

    // Only 0-4 are valid types.
    type = (type % 5) || 0;

    if (typeof finishedCallback != "function") {
        finishedCallback = function() {};   
    }

    var ctx = new (window.audioContext || window.webkitAudioContext);
    var osc = ctx.createOscillator();

    osc.type = type;

    osc.connect(ctx.destination);
    osc.noteOn(0);

    setTimeout(function() {
        osc.noteOff(0);
        finishedCallback();
    }, duration);

};


1

Наступний код може допомогти вам відтворити звук на веб-сторінці лише за допомогою JavaScript. Детальнішу інформацію можна переглянути на http://sourcecodemania.com/playing-sound-javascript-flash-player/

<script>
function getPlayer(pid) {
    var obj = document.getElementById(pid);
    if (obj.doPlay) return obj;
    for(i=0; i<obj.childNodes.length; i++) {
        var child = obj.childNodes[i];
        if (child.tagName == "EMBED") return child;
    }
}
function doPlay(fname) {
    var player=getPlayer("audio1");
    player.play(fname);
}
function doStop() {
    var player=getPlayer("audio1");
    player.doStop();
}
</script>

<form>
<input type="button" value="Play Sound" onClick="doPlay('texi.wav')">
<a href="#" onClick="doPlay('texi.wav')">[Play]</a>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    width="40"
    height="40"
    id="audio1"
    align="middle">
    <embed src="wavplayer.swf?h=20&w=20"
        bgcolor="#ffffff"
        width="40"
        height="40"
        allowScriptAccess="always"
        type="application/x-shockwave-flash"
        pluginspage="http://www.macromedia.com/go/getflashplayer"
    />
</object>

<input type="button" value="Stop Sound" onClick="doStop()">
</form>

0

Перш за все, мені це не сподобалось би як користувачеві.

Найкращий спосіб - це, мабуть, використання невеликого флеш-аплету, який відтворює ваш звук у фоновому режимі.

Тут також відповіли: Кроссплатформенний, крос-браузерний спосіб відтворення звуку з Javascript?


3
Що в цьому поганого, якщо користувач знає, що буде відтворений звук?
lc.

3
Це корисно, а як бути, якщо користувачеві потрібен звуковий сигнал, коли надходять нові замовлення? можливо, користувачі весь час не мають очей на екрані, можливо, мені потрібно пописати і увімкнути ЗВУК, тоді хтось інший може відповісти на замовлення .. лише кілька прикладів ..
deepcell
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.