Javascript Girl
  1. Javascript Girl
  3. Débarrassez-vous du retard lorsque vous jouez avec jQuery
Intereting Posts
Regex en Javascript pour la validation du nombre décimal Je veux des caractères non modifiés dans mon cookie (jquery) Comment imprimer un fichier PDF à partir du navigateur Changer les onglets Twitter Bootstrap automatiquement Sécurité dans Node.JS Webserver Zone déplacable déplacée en raison de la modification de la hauteur de la classe / de la hauteur lors de l'événement tactile Comment puis-je afficher les données JSON dans Chart.js avec Javascript si les valeurs statiques fonctionnent mais la dynamique de mySQL n'est pas? Angulaire avec ui.bootstrap rendering blank page Compte à rebours Javascript et fuseau horaire et temps d'été Incrémenter la classe onclick javascript JQuery désérialise la forme Lorsque j'ajoute deux scripts à une page html … l'un ne fonctionne pas Comment clignoter un div dans jquery? Javascript: activez / désactivez le bouton avec mouseover / mouseout Obtenir le nombre total d'éléments sur l'objet Json?

Débarrassez-vous du retard lorsque vous jouez avec jQuery

J'essaie de jouer des sons avec un événement .keydown () dans jQuery. J'aimerais que les sons jouent rapidement, mais il semble y avoir un temps de retard lorsque je réalise l'événement de dépannage plus rapidement que 3 fois par seconde.

Voici un jsFiddle de mon exemple de code: http://jsfiddle.net/pfrater/FRudg/3/

J'utilise les balises audio html pour le son et la lecture: 

<audio controls id="sound" preload="auto"> <source src="http://www.wavlist.com/soundfx/011/duck-baby.wav" type="audio/wav"/> </audio> <audio controls id="sound2" preload="auto"> <source src="http://rezound.sourceforge.net/examples/chirp.wav" type="audio/wav"/> </audio> <audio controls id="sound3" preload="auto"> <source src="http://www.all-birds.com/Sound/downychirp.wav" type="audio/wav"/> </audio>

Et voici mon jQuery: 

 $(document).ready( function() { var playing; $(document).bind("keydown", function(key) { playing = undefined; switch(parseInt(key.which, 10)) { case 65: playing = $("#sound").get(0); break; case 83: playing = $("#sound2").get(0); break; case 68: playing = $("#sound3").get(0); break; }; if (playing) { playing.play(); } }).on("keyup", function() { if(playing){ playing.pause(); playing.currentTime=50; playing = undefined; } }); });

Quelqu'un sait-il un moyen de se débarrasser de ce décalage? En outre, les fichiers réels que je vais jouer sont mpegs. Ceux ci-dessus ne sont qu'un exemple.

Merci pour toute aide,
Paul

Vous ne pourrez pas le faire avec l'élément audio. C'est parce que le coût de configuration et de remplissage des tampons prendra beaucoup de temps.

La bonne nouvelle est que vous pouvez le faire en utilisant l' API Web Audio à la place.

Je vous ai fait un exemple basé sur ce code à partir de roches HTML5 (que vous devriez consulter pour plus de détails) et votre violon d'origine.

Actuellement, cette API est prise en charge dans Chrome, Firefox, Safari et Opera pourront l'utiliser:

Démo du violon 

 window.AudioContext = window.AudioContext || window.webkitAudioContext; /// custom buffer loader /// see http://www.html5rocks.com/en/tutorials/webaudio/intro/ function BufferLoader(context, urlList, callback) { this.context = context; this.urlList = urlList; this.onload = callback; this.bufferList = new Array(); this.loadCount = 0; } BufferLoader.prototype.loadBuffer = function (url, index) { var request = new XMLHttpRequest(); request.open("GET", url, true); request.responseType = "arraybuffer"; var loader = this; request.onload = function () { // Asynchronously decode the audio file data in request.response loader.context.decodeAudioData( request.response, function (buffer) { if (!buffer) { alert('error decoding file data: ' + url); return; } loader.bufferList[index] = buffer; if (++loader.loadCount == loader.urlList.length) loader.onload(loader.bufferList); }, function (error) { console.error('decodeAudioData error', error); }); } request.onerror = function (e) { alert('BufferLoader: XHR error'); } request.send(); } BufferLoader.prototype.load = function () { for (var i = 0; i < this.urlList.length; ++i) this.loadBuffer(this.urlList[i], i); }

Le code principal: 

 /// setup audio context and start loading samples var actx = new AudioContext(), blst, bLoader = new BufferLoader( actx, [ 'duck-baby.wav', 'chirp.wav', 'downychirp.wav'], done), isReady = false; /// start loading the samples bLoader.load(); function done(bl) { blst = bl; /// buffer list isReady = true; /// enable keys $('#status').html('Ready!'); /// update statusw } /// this sets up chain so we can play audio function play(i) { var src = actx.createBufferSource(); /// prepare sample src.buffer = blst[i]; /// set buffer from loader src.connect(actx.destination); /// connect to speakers src.start(0); /// play sample now } /// check keys $(window).bind("keydown", function (key) { if (!isReady) return; switch (parseInt(key.which, 10)) { case 65: play(0); return; case 83: play(1); return; case 68: play(2); return; } })

REMARQUE: lorsque vous utilisez des échantillons externes, vous devez vous assurer qu'ils peuvent être utilisés à travers les origines, sinon le chargement échouera (j'ai utilisé mon DropBox pour permettre aux échantillons d'être chargés de violon).