Odtwarzasz powiadomienia dźwiękowe za pomocą JavaScript?


86

Jak mogę to zrobić, więc kiedy użytkownik kliknie link, odtwarzamy dźwięk? Używając javascript i jquery tutaj.


2
Napisałem wtyczkę jQ do sterowania dźwiękiem soundplay.nikolavukovic.net63.net , obsługuje to, o co prosisz i nie tylko, dokumenty są dołączone do kodu JavaScript, sprawdź to.
publiczne zastąpienie

Możesz (na przykład) wypełnić listy odtwarzania z kilkoma efektami dźwiękowymi strony i .load(), .play()w kluczowych momentach, za pomocą interfejsu API.
publiczne zastąpienie

1
Z miłości do wszystkiego, co święte, włącz opcję wyciszenia. Linki z dźwiękami to jeden z najszybszych sposobów zapewnienia, że ​​użytkownik nigdy nie wróci do Twojej witryny.
Wobbles

Odpowiedzi:



25

Umieść <audio>element na swojej stronie.
Zdobądź swój element audio i wywołaj play()metodę:

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

Sprawdź ten przykład: http://www.storiesinflight.com/html5/audio.html

Ta strona odkrywa kilka innych fajnych rzeczy można zrobić, takie jak load(), pause()oraz kilku innych właściwości elementu audio.

To, kiedy dokładnie chcesz odtworzyć ten element audio, zależy od Ciebie. Przeczytaj tekst przycisku i porównaj go z „nie”, jeśli chcesz.

Alternatywnie

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

SoundManager 2 zapewnia łatwy w użyciu interfejs API, który umożliwia odtwarzanie dźwięku w dowolnej nowoczesnej przeglądarce, w tym IE 6+. Jeśli przeglądarka nie obsługuje HTML5, wówczas pomaga jej flash. Jeśli chcesz ściśle HTML5 i bez Flasha, jest do tego ustawienie preferFlash = false

Obsługuje dźwięk w 100% wolny od Flasha na iPadzie, iPhonie (iOS4) i innych urządzeniach obsługujących HTML5 + przeglądarkach

Używanie jest tak proste, jak:

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

Oto demo w akcji: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/


21

Znalazłem coś takiego:

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

5
To jest za wolne. Gra w przeglądarkach Windows zajmuje prawie sekundę
thenengah

@Codeglot, który zależy od aplikacji. 1 sekunda spełniłaby moje wymagania.
Muhd

1
Ponadto prawdopodobnie można by go jakoś wstępnie załadować, aby pozbyć się opóźnienia.
Muhd

9
Opóźnienie pochodzi z analizy DOM, a następnie załadowania pliku i uruchomienia go. Jeśli go wstępnie załadujesz, możesz go po prostu uruchomić w razie potrzeby .
Xeoncross

1 sekunda po zdarzeniu mousedown to długi czas. Za długo.
TARKUS

12

Za pomocą tagu audio html5 i 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();

Kod stąd .

W mojej implementacji dodałem audio embed bezpośrednio do HTML bez dołączania jquery.


2
Dla porównania odtwarzam dźwięk w module obsługi sukcesu z funkcji Ajax (która działa podczas ładowania strony) i otrzymuję ten błąd Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document firstVersion 70.0.3538.102 (Official Build) (64-bit)
:,



3

Napisałem małą funkcję, która może to zrobić, z interfejsem API Web Audio ...

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

Poniższy kod może pomóc w odtwarzaniu dźwięku na stronie internetowej przy użyciu wyłącznie javascript. Więcej szczegółów można znaleźć pod adresem 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

Po pierwsze, nie spodobało mi się to jako użytkownikowi.

Najlepszym sposobem na to jest prawdopodobnie użycie małego apletu flash, który odtwarza dźwięk w tle.

Odpowiedziałem również tutaj: Cross-platform, cross-browser sposób na odtwarzanie dźwięku z Javascript?


3
Co jest w tym złego, jeśli użytkownik wie, że dźwięk będzie odtwarzany?
lc.

3
Jest to przydatne, a co jeśli użytkownik potrzebuje sygnału dźwiękowego, gdy nadejdą nowe zamówienia? Być może użytkownicy nie są z oczami na ekranie przez cały czas, chyba muszę siusiu i włączyć sygnał, potem ktoś inny może odebrać zamówienie .. zaledwie kilka przykładów ..
deepcell
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.