CODEWITHSUNDEEP
javascriptjqueryaudio
Ali
Ali

Reputation: 267049

Playing sound notifications using Javascript?

How can I do that, so whenever a user clicks a link we play a sound? Using javascript and jquery here.

Upvotes: 91

Views: 197862

Answers (10)

Alexander Manzyuk
Alexander Manzyuk

Reputation: 594

Use this plugin: https://github.com/admsev/jquery-play-sound

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

Upvotes: 49

Avatar
Avatar

Reputation: 15156

Using the html5 audio tag and 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 from here.

In my implementation I added the audio embed directly into the HTML without jquery append.

Upvotes: 13

Joris Van Regemortel
Joris Van Regemortel

Reputation: 945

Put an <audio> element on your page.
Get your audio element and call the play() method:

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

Check out this example: http://www.storiesinflight.com/html5/audio.html

This site uncovers some of the other cool things you can do such as load(), pause(), and a few other properties of the audio element.

When exactly you want to play this audio element is up to you. Read the text of the button and compare it to "no" if you like.

Alternatively

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

SoundManager 2 provides a easy to use API that allows sound to be played in any modern browser, including IE 6+. If the browser doesn't support HTML5, then it gets help from flash. If you want stricly HTML5 and no flash, there's a setting for that, preferFlash=false

It supports 100% Flash-free audio on iPad, iPhone (iOS4) and other HTML5-enabled devices + browsers

Use is as simple as:

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

Here's a demo of it in action: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

Upvotes: 26

alex
alex

Reputation: 490143

I wrote a small function that can do it, with the 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);

};

Upvotes: 3

Falak
Falak

Reputation: 451

Following code might help you to play sound in a web page using javascript only. You can see further details at 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>

Upvotes: 2

degenerate
degenerate

Reputation: 1417

New emerger... seems to be compatible with IE, Gecko browsers and iPhone so far...

http://www.jplayer.org/

Upvotes: 2

Andrew Philpott
Andrew Philpott

Reputation: 939

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

Upvotes: 7

epascarello
epascarello

Reputation: 207501

JavaScript Sound Manager:

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

Upvotes: 9

Xn0vv3r
Xn0vv3r

Reputation: 18184

Found something like that:

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

Upvotes: 21

Javache
Javache

Reputation: 3458

First things first, i'd not like that as a user.

The best way to do is probably using a small flash applet that plays your sound in the background.

Also answered here: Cross-platform, cross-browser way to play sound from Javascript?

Upvotes: 0

Related Questions