Воспроизведение звуковых уведомлений с использованием Javascript?


86

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


2
Я написал плагин jQ для управления звуком soundplay.nikolavukovic.net63.net , он поддерживает то, что вы просите, и многое другое, документы связаны с кодом JavaScript, проверьте это.
публичное переопределение

Вы можете (например) заселить воспроизведения (ов) с кучей страницы звуковых эффектов и .load(), .play()их в ключевые моменты , используя API.
публичное переопределение

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

Ответы:


46

Используйте этот плагин: https://github.com/admsev/jquery-play-sound

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

Есть ли способ сделать так, чтобы он вытягивал URL-адрес фактической ссылки?
hakarune

@hakarune: Да, просто удалите окончание ".mp3" из источника .
Кай Ноак

Это воспроизводит звуки, если браузер неактивен или свернут пользователем. Надежда кому-то помогает.
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 и нет flash, для этого есть настройка, preferenceFlash = false.

Он поддерживает 100% аудио без Flash на 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 секунда соответствует моим требованиям.
Muhd

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

9
Задержка возникает из-за синтаксического анализа DOM, затем загрузки файла и его запуска. Если вы его предварительно загрузите, то можете просто запустить при необходимости .
Xeoncross

1 секунда после события mousedown - долгое время. Слишком долго.
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
Просто для справки, я проигрываю звук в обработчике успеха из функции ajax (которая запускается при загрузке страницы) и получаю эту ошибку:, Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document firstChrome 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

Я написал небольшую функцию, которая может это сделать с помощью 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.