web-dev-qa-db-fra.com

Jouer des notifications sonores en utilisant Javascript?

Comment puis-je faire cela, donc lorsqu'un utilisateur clique sur un lien, nous émettons un son? Utiliser javascript et jquery ici.

javascriptjqueryaudio
86
Click Upvote

https://github.com/admsev/jquery-play-sound

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

46
Alexander Manzyuk

Placez un élément <audio> Sur votre page.
Récupérez votre élément audio et appelez la méthode play():

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

Découvrez cet exemple: http://www.storiesinflight.com/html5/audio.html

Ce site dévoile certaines des choses intéressantes que vous pouvez faire, telles que load(), pause() et quelques autres propriétés de l'élément audio.

Quand exactement vous voulez jouer cet élément audio est à vous. Lisez le texte du bouton et comparez-le à "non" si vous le souhaitez.

Alternativement

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

SoundManager 2 fournit une API facile à utiliser qui permet de lire le son dans n’importe quel navigateur moderne, y compris IE 6+. Si le navigateur ne prend pas en charge HTML5, il obtient de l’aide flash. Si vous voulez strictement HTML5 et pas de flash, il y a un paramètre pour cela, preferFlash = false

Il prend en charge 100% du son sans flash sur iPad, iPhone (iOS4) et autres appareils compatibles avec HTML5

L'utilisation est aussi simple que:

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

En voici une démonstration en action: http://www.schillmania.com/projects/soundmanager2/demo/christmas-lights/

25
Joris Van Regemortel

J'ai trouvé quelque chose comme ça:

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

Utilisation de la balise audio html5 et de 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 à partir d'ici .

Dans mon implémentation, j'ai ajouté l'audio incorporer directement dans le HTML sans jquery append.

12
Kai Noack

Gestionnaire de son JavaScript:

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

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

J'ai écrit une petite fonction qui peut le faire, avec l'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);

};
3
alex

Nouvel émetteur ... semble compatible avec IE, les navigateurs Gecko et l'iPhone jusqu'à présent ...

http://www.jplayer.org/

2
degenerate

Le code suivant peut vous aider à jouer du son dans une page Web en utilisant uniquement du javascript. Vous pouvez voir plus de détails sur 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

Tout d’abord, je n’aimerais pas cela en tant qu’utilisateur.

La meilleure façon de le faire est probablement d'utiliser un petit applet flash qui lit votre son en arrière-plan.

Aussi répondu ici: Multiplate-forme, moyen multi-navigateur pour jouer du son à partir de Javascript?

0
Javache