it-swarm.com.de

Soundbenachrichtigungen mit Javascript abspielen?

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

86
Click Upvote
46

Fügen Sie ein <audio> - Element in Ihre Seite ein.
Holen Sie sich Ihr Audio-Element 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 coolen Dinge auf, die Sie tun können, wie z. B. load(), pause() und einige andere Eigenschaften des Audioelements.

Wann genau Sie dieses Audioelement abspielen möchten, liegt ganz 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 abgespielt werden kann, einschließlich IE 6+. Wenn der Browser HTML5 nicht unterstützt, wird er von Flash unterstützt Wenn Sie ausschließlich HTML5 und kein Flash möchten, gibt es eine Einstellung dafür, preferFlash = false

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

Die Bedienung 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 davon in Aktion: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

25

Fand so etwas:

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

Verwenden des HTML5-Audiotags und der Abfrage:

// 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 die Audio-Einbettung direkt in HTML eingefügt, ohne dass JQuery angehängt wurde.

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

Ich habe eine kleine Funktion geschrieben, die das kann, mit der 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);

};
3
alex

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

http://www.jplayer.org/

2
degenerate

Der folgende Code hilft Ihnen möglicherweise dabei, Sound auf einer Webseite nur mit Javascript wiederzugeben. 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>
1
Falak

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

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

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

0
Javache