Jouer des notifications sonores avec Javascript?


86

Comment puis-je faire cela, alors chaque fois qu'un utilisateur clique sur un lien, nous jouons un son? Utilisation de javascript et jquery ici.


2
J'ai écrit un plugin jQ pour le contrôle audio soundplay.nikolavukovic.net63.net , il prend en charge ce que vous demandez et plus encore, les documents sont fournis avec du code JavaScript, vérifiez-le.
remplacement public

Vous pouvez (par exemple) remplir la ou les listes de lecture avec un tas d'effets sonores de page et .load(), .play()les dans les moments clés à l'aide de l'API.
remplacement public

1
Pour l'amour de toutes choses saintes, incluez une option muette. Les liens avec des sons sont l'un des moyens les plus rapides de garantir qu'un utilisateur ne revienne jamais sur votre site.
Wobbles

Réponses:



25

Mettez un <audio>élément sur votre page.
Obtenez votre élément audio et appelez la play()méthode:

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

Consultez cet exemple: http://www.storiesinflight.com/html5/audio.html

Ce site révèle quelques - unes des autres choses cool que vous pouvez faire, comme load(), pause()et quelques autres propriétés de l'élément audio.

C'est à vous de décider quand exactement vous voulez lire cet élément audio. 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 l'aide de Flash. Si vous voulez strictement HTML5 et pas de flash, il existe un paramètre pour cela, preferFlash = false

Il prend en charge l'audio 100% sans Flash sur iPad, iPhone (iOS4) et autres appareils compatibles HTML5 + navigateurs

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/


21

Trouvé quelque chose comme ça:

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

5
C'est ralentir. Il faut près d'une seconde pour jouer avec les navigateurs Windows
thenengah

@Codeglot qui dépend de l'application. 1 seconde répondrait à mes exigences.
Muhd

1
En outre, vous pourriez probablement le précharger d'une manière ou d'une autre pour vous débarrasser du retard.
Muhd

9
Le retard provient de l'analyse du DOM, puis du chargement du fichier et du démarrage de celui-ci. Si vous le préchargez, vous pouvez simplement le démarrer en cas de besoin .
Xeoncross

1 seconde après un événement mousedown, c'est long. Trop long.
TARKUS

12

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 d'ici .

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


2
Juste pour référence, je joue du son sur le gestionnaire de succès de la fonction ajax (qui s'exécute au chargement de la page), et j'obtiens cette erreur 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

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

};


1

Le code suivant peut vous aider à lire du son dans une page Web en utilisant uniquement 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>

0

Tout d'abord, je n'aimerais pas ça en tant qu'utilisateur.

La meilleure façon de faire est probablement d'utiliser une petite applet flash qui joue votre son en arrière-plan.

Également répondu ici: Moyen multiplateforme et multi-navigateurs pour lire du son à partir de Javascript?


3
Qu'y a-t-il de si mauvais si l'utilisateur sait qu'un son serait joué?
lc.

3
C'est utile, qu'en est-il si un utilisateur a besoin d'une alerte sonore, lorsque de nouvelles commandes arrivent? peut-être que les utilisateurs n'ont pas les yeux sur l'écran tout le temps, peut-être ai-je besoin de faire pipi et d'activer le bip, alors quelqu'un d'autre peut répondre à la commande .. juste quelques exemples ..
deepcell
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.