Soundbenachrichtigungen mit Javascript abspielen?

86

Wie kann ich das tun? Wenn ein Benutzer auf einen Link klickt, wird ein Sound abgespielt. Verwenden Sie hier Javascript und JQuery.

Klicken Sie auf Upvote
quelle
2
Ich habe ein jQ-Plugin für die Audiosteuerung soundplay.nikolavukovic.net63.net geschrieben . Es unterstützt Ihre Fragen und mehr. Die Dokumente sind mit JavaScript-Code gebündelt. Probieren Sie es aus.
öffentliche
Sie können (zum Beispiel) bevöl Wiedergabeliste (n) mit einem Bündel von Seite Soundeffekte und .load(), .play()sie in entscheidenden Momenten die api verwenden.
öffentliche
1
Fügen Sie aus Liebe zu allen heiligen Dingen eine Stummschaltoption hinzu. Links mit Sounds sind eine der schnellsten Möglichkeiten, um sicherzustellen, dass ein Benutzer nie wieder auf Ihre Website zurückkehrt.
Wobbles

Antworten:

25

Fügen Sie ein <audio>Element auf Ihre Seite ein.
Holen Sie sich Ihr Audioelement und rufen Sie die play()Methode auf:

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

Schauen Sie sich dieses Beispiel an: http://www.storiesinflight.com/html5/audio.html

Diese Seite deckt einige der anderen kühlen Dinge , die Sie wie tun können load(), pause()und einige andere Eigenschaften des Audio - Element.

Wann genau Sie dieses Audioelement abspielen möchten, liegt bei Ihnen. Lesen Sie den Text der Schaltfläche und vergleichen Sie ihn mit "Nein", wenn Sie möchten.

Alternative

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

SoundManager 2 bietet eine benutzerfreundliche API, mit der Sound in jedem modernen Browser, einschließlich IE 6+, abgespielt werden kann. Wenn der Browser HTML5 nicht unterstützt, erhält er Hilfe von Flash. Wenn Sie streng HTML5 und keinen Flash möchten, gibt es dafür eine Einstellung: prepareFlash = false

Es unterstützt 100% Flash-freies Audio auf iPad, iPhone (iOS4) und anderen HTML5-fähigen Geräten + Browsern

Die Verwendung ist so einfach wie:

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

Hier ist eine Demo in Aktion: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

Joris Van Regemortel
quelle
21

So etwas gefunden:

//javascript:
function playSound( url ){   
  document.getElementById("sound").innerHTML="<embed src='"+url+"' hidden=true autostart=true loop=false>";
} 
Xn0vv3r
quelle
5
Das ist zu langsam. Es
dauert
@ Codeglot, der von der Anwendung abhängt. 1 Sekunde würde meine Anforderungen erfüllen.
Muhd
1
Außerdem könnten Sie es wahrscheinlich irgendwie vorladen, um die Verzögerung zu beseitigen.
Muhd
9
Die Verzögerung ergibt sich aus der DOM-Analyse, dem Laden und Starten der Datei. Wenn Sie es vorladen, können Sie es bei Bedarf einfach starten .
Xeoncross
1 Sekunde nach einem Mousedown-Ereignis ist eine lange Zeit. Zu lang.
TARKUS
12

Verwenden des HTML5-Audio-Tags und der 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();

Code von hier .

In meiner Implementierung habe ich das Audio direkt in den HTML-Code eingefügt, ohne dass jquery angehängt wurde.

Kai Noack
quelle
2
Nur als Referenz, ich spiele Sound on Success Handler von der Ajax-Funktion (die beim Laden der Seite ausgeführt wird) und erhalte den folgenden Fehler : 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)... scheint hier eine Lösung zu sein: 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">');
});
Andrew Philpott
quelle
Warum werden bei dieser Methode die Bildlaufleisten in Chrome blau?
Brian Leishman
Öffnen Sie diesen Link, um sowohl das Problem der Scrol-Leiste als auch den Sound zu lösen. Stackoverflow.com/questions/15483455/…
Azam Alvi
3

Ich habe eine kleine Funktion geschrieben, die dies mit der Web-Audio-API kann ...

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

};
Alex
quelle
2

Neuer Emerger ... scheint bisher mit IE, Gecko-Browsern und iPhone kompatibel zu sein ...

http://www.jplayer.org/

degenerieren
quelle
1

Der folgende Code kann Ihnen dabei helfen, Sound auf einer Webseite nur mit Javascript abzuspielen. Weitere Details finden Sie unter 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>
Falak
quelle
0

Das Wichtigste zuerst, das würde mir als Benutzer nicht gefallen.

Am besten verwenden Sie wahrscheinlich ein kleines Flash-Applet, das Ihren Sound im Hintergrund wiedergibt.

Auch hier beantwortet: Plattformübergreifende, browserübergreifende Möglichkeit, Sound aus Javascript abzuspielen?

Javache
quelle
3
Was ist daran so schlimm, wenn der Benutzer weiß, dass ein Sound abgespielt wird?
lc.
3
Es ist nützlich, wenn ein Benutzer einen Signalton benötigt, wenn neue Bestellungen eingehen. Vielleicht sind Benutzer nicht die ganze Zeit mit Augen auf dem Bildschirm, vielleicht brauche ich eine Pisse und schalte den Piepton ein, dann kann jemand anderes die Bestellung beantworten. Nur ein paar Beispiele.
Deepcell