J'utilise HTML5 pour programmer des jeux; l'obstacle que j'ai rencontré maintenant est de savoir comment jouer des effets sonores.

Les exigences spécifiques sont peu nombreuses:

• Jouez et mixez plusieurs sons,
• Jouez le même échantillon plusieurs fois, éventuellement des chevauchements de lectures,
• Interrompez la lecture d'un échantillon à tout moment,
• Jouez de préférence des fichiers WAV contenant du PCM brut (de faible qualité), mais je peux les convertir, bien sûr.

Ma première approche a été d'utiliser l' <audio>élément HTML5 et de définir tous les effets sonores de ma page. Firefox lit les fichiers WAV simplement pêche, mais appeler #playplusieurs fois ne joue pas vraiment l'échantillon plusieurs fois. D'après ma compréhension de la spécification HTML5, l' <audio>élément suit également l'état de la lecture, ce qui explique pourquoi.

Ma pensée immédiate était de cloner les éléments audio, j'ai donc créé la petite bibliothèque JavaScript suivante pour le faire pour moi (cela dépend de jQuery):

var Snd = {
  init: function() {
    $("audio").each(function() {
      var src = this.getAttribute('src');
      if (src.substring(0, 4) !== "snd/") { return; }
      // Cut out the basename (strip directory and extension)
      var name = src.substring(4, src.length - 4);
      // Create the helper function, which clones the audio object and plays it
      var Constructor = function() {};
      Constructor.prototype = this;
      Snd[name] = function() {
        var clone = new Constructor();
        clone.play();
        // Return the cloned element, so the caller can interrupt the sound effect
        return clone;
      };
    });
  }
};

Alors maintenant, je peux le faire à Snd.boom();partir de la console Firebug et jouer snd/boom.wav, mais je ne peux toujours pas jouer le même échantillon plusieurs fois. Il semble que l' <audio>élément soit plus une fonctionnalité de streaming que quelque chose avec lequel jouer des effets sonores.

Existe-t-il un moyen intelligent de faire en sorte que cela me manque, en utilisant de préférence uniquement HTML5 et JavaScript?

Je dois également mentionner que mon environnement de test est Firefox 3.5 sur Ubuntu 9.10. Les autres navigateurs que j'ai essayés - Opera, Midori, Chromium, Epiphany - ont produit des résultats variables. Certains ne jouent rien, et certains lèvent des exceptions.

AudioObjets HTML5

Vous n'avez pas besoin de vous soucier des <audio>éléments. HTML 5 vous permet d'accéder directement aux Audioobjets :

var snd = new Audio("file.wav"); // buffers automatically when created
snd.play();

Il n'y a pas de support pour le mixage dans la version actuelle de la spécification.

Pour lire plusieurs fois le même son, créez plusieurs instances de l' Audioobjet. Vous pouvez également définir snd.currentTime=0l'objet après qu'il ait fini de jouer.

Étant donné que le constructeur JS ne prend pas en charge les <source>éléments de secours , vous devez utiliser

(new Audio()).canPlayType("audio/ogg; codecs=vorbis")

pour tester si le navigateur prend en charge Ogg Vorbis.

Si vous écrivez un jeu ou une application musicale (plus qu'un simple lecteur), vous souhaiterez utiliser une API Web Audio plus avancée , désormais prise en charge par la plupart des navigateurs .

API WebAudio par W3C

Depuis juillet 2012, l' API WebAudio est désormais prise en charge dans Chrome, et au moins en partie dans Firefox, et devrait être ajoutée à IOS à partir de la version 6.

Bien qu'il soit suffisamment robuste pour être utilisé par programme pour les tâches de base, l'élément audio n'a jamais été conçu pour fournir un support audio complet pour les jeux, etc. Il a été conçu pour permettre à un seul élément multimédia d'être intégré dans une page, semblable à un img marque. Il y a beaucoup de problèmes à essayer d'utiliser la balise audio pour les jeux:

• Les feuillets de synchronisation sont courants avec les éléments audio
• Vous avez besoin d'un élément audio pour chaque instance d'un son
• Les événements de chargement ne sont pas encore totalement fiables
• Pas de contrôles de volume communs, pas de décoloration, pas de filtres / effets

J'ai utilisé cet article Mise en route avec WebAudio pour commencer avec l'API WebAudio. L' étude de cas FieldRunners WebAudio est également une bonne lecture.

howler.js

Pour la création de jeux, l'une des meilleures solutions consiste à utiliser une bibliothèque qui résout les nombreux problèmes auxquels nous sommes confrontés lors de l'écriture de code pour le Web, comme howler.js . howler.js résume la grande (mais de bas niveau) API Web Audio dans un cadre facile à utiliser. Il tentera de revenir à l' élément audio HTML5 si l'API Web Audio n'est pas disponible.

var sound = new Howl({
  urls: ['sound.mp3', 'sound.ogg']
}).play();
// it also provides calls for spatial/3d audio effects (most browsers)
sound.pos3d(0.1,0.3,0.5);

wad.js

Une autre grande bibliothèque est wad.js , qui est particulièrement utile pour produire du son de synthé, comme de la musique et des effets. Par exemple:

var saw = new Wad({source : 'sawtooth'})
saw.play({
    volume  : 0.8,
    wait    : 0,     // Time in seconds between calling play() and actually triggering the note.
    loop    : false, // This overrides the value for loop on the constructor, if it was set. 
    pitch   : 'A4',  // A4 is 440 hertz.
    label   : 'A',   // A label that identifies this note.
    env     : {hold : 9001},
    panning : [1, -1, 10],
    filter  : {frequency : 900},
    delay   : {delayTime : .8}
})

Sound for Games

Une autre bibliothèque similaire à Wad.js est " Sound for Games ", elle se concentre davantage sur la production d'effets, tout en fournissant un ensemble similaire de fonctionnalités via une API relativement distincte (et peut-être plus concise):

function shootSound() {
  soundEffect(
    1046.5,           //frequency
    0,                //attack
    0.3,              //decay
    "sawtooth",       //waveform
    1,                //Volume
    -0.8,             //pan
    0,                //wait before playing
    1200,             //pitch bend amount
    false,            //reverse bend
    0,                //random pitch range
    25,               //dissonance
    [0.2, 0.2, 2000], //echo array: [delay, feedback, filter]
    undefined         //reverb array: [duration, decay, reverse?]
  );
}

Résumé

Chacune de ces bibliothèques vaut le coup d'œil, que vous ayez besoin de lire un seul fichier audio ou de créer votre propre éditeur de musique html, générateur d'effets ou jeu vidéo.

Vous pouvez également utiliser ceci pour détecter l'audio HTML 5 dans certains cas:

http://diveintohtml5.ep.io/everything.html

Fonction de détection HTML 5 JS

function supportsAudio()
{
    var a = document.createElement('audio'); 
    return !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
}

Voici une méthode permettant de jouer même le même son simultanément. Combinez avec le préchargeur et vous êtes prêt. Cela fonctionne avec Firefox 17.0.1 au moins, je ne l'ai pas encore testé avec autre chose.

// collection of sounds that are playing
var playing={};
// collection of sounds
var sounds={step:"knock.ogg",throw:"swing.ogg"};

// function that is used to play sounds
function player(x)
{
    var a,b;
    b=new Date();
    a=x+b.getTime();
    playing[a]=new Audio(sounds[x]);
    // with this we prevent playing-object from becoming a memory-monster:
    playing[a].onended=function(){delete playing[a]};
    playing[a].play();
}

Associez-le à une touche du clavier et profitez:

player("step");

Des sons comme ce que vous voulez sont des sons multicanaux. Supposons que vous ayez 4 canaux (comme sur les très vieux jeux 16 bits), je n'ai pas encore commencé à jouer avec la fonctionnalité audio HTML5, mais n'avez-vous pas simplement besoin de 4 éléments <audio> et du cycle qui est utilisé jouer le prochain effet sonore? As-tu essayé ça? Ce qui se produit? Si cela fonctionne: Pour jouer plus de sons simultanément, ajoutez simplement plus d'éléments <audio>.

J'ai déjà fait cela sans l'élément HTML5 <audio>, en utilisant un petit objet Flash de http://flash-mp3-player.net/ - j'ai écrit un quiz musical ( http://webdeavour.appspot.com/ ) et l'a utilisé pour lire des clips de musique lorsque l'utilisateur a cliqué sur le bouton de la question. Au départ, j'avais un joueur par question, et il était possible de les jouer les uns sur les autres, alors je l'ai changé pour qu'il n'y ait qu'un seul joueur, que j'ai pointé sur différents clips musicaux.

Jetez un œil au site jai (-> miroir ) (interface audio javascript). En regardant leur source, ils semblent appeler à play()plusieurs reprises, et ils mentionnent que leur bibliothèque pourrait être appropriée pour une utilisation dans des jeux basés sur HTML5.

Vous pouvez déclencher plusieurs événements audio simultanément, ce qui pourrait être utilisé pour créer des jeux Javascript ou avoir une voix parlant sur une musique de fond

Pour lire le même échantillon plusieurs fois, ne serait-il pas possible de faire quelque chose comme ceci:

e.pause(); // Perhaps optional
e.currentTime = 0;
e.play();

(e est l'élément audio)

Peut-être que j'ai complètement mal compris votre problème, voulez-vous que l'effet sonore soit lu plusieurs fois en même temps? Alors c'est complètement faux.

Voici une idée. Chargez tout votre audio pour une certaine classe de sons dans un seul élément audio individuel où les données src sont tous vos échantillons dans un fichier audio contigu (vous voulez probablement un peu de silence entre les deux afin de pouvoir capturer et couper les échantillons avec un délai d'attente avec moins risque de saignement à l'échantillon suivant). Ensuite, recherchez l'échantillon et jouez-le si nécessaire.

Si vous avez besoin de plusieurs d'entre eux pour jouer, vous pouvez créer un élément audio supplémentaire avec le même src afin qu'il soit mis en cache. Maintenant, vous avez effectivement plusieurs "pistes". Vous pouvez utiliser des groupes de pistes avec votre schéma d'allocation de ressources préféré comme Round Robin, etc.

Vous pouvez également spécifier d'autres options comme la mise en file d'attente des sons dans une piste à lire lorsque cette ressource devient disponible ou la découpe d'un échantillon en cours de lecture.

http://robert.ocallahan.org/2011/11/latency-of-html5-sounds.html

http://people.mozilla.org/~roc/audio-latency-repeating.html

Fonctionne bien dans Firefox et Chrome pour moi.

Pour arrêter un son que vous avez commencé, faites var sound = document.getElementById ("shot"). CloneNode (true); sound.play (); et plus tard sound.pause ();

Je recommanderais d'utiliser SoundJS , une bibliothèque que j'ai aidé à développer. Il vous permet d'écrire une base de code unique qui fonctionne partout, avec SoundJS choisissant l'audio Web, l'audio html ou l'audio flash selon le cas.

Cela vous permettra de faire tout ce que vous voulez:

• Jouez et mixez plusieurs sons,
• Lire le même échantillon plusieurs fois, chevauchant éventuellement des lectures
• Interrompre la lecture d'un échantillon à tout moment
• lire des fichiers WAV contenant (selon le support du navigateur)

J'espère que cela pourra aider.

Il n'est pas possible de jouer à plusieurs coups avec un seul <audio>élément. Vous devez utiliser plusieurs éléments pour cela.

Je suis tombé sur cela lors de la programmation d'un générateur de cartes Musicbox. Commencé avec différentes bibliothèques mais à chaque fois il y avait un problème. Le retard sur l'implémentation audio normale était mauvais, pas de lecture multiple ... a finalement fini par utiliser la bibliothèque lowlag + soundmanager:

http://lowlag.alienbill.com/ et http://www.schillmania.com/projects/soundmanager2/

Vous pouvez consulter la mise en œuvre ici: http://musicbox.grit.it/

J'ai généré des fichiers wav + ogg pour des jeux multi-navigateurs. Ce lecteur de boîte à musique fonctionne réactif sur iPad, iPhone, Nexus, Mac, PC, ... fonctionne pour moi.

Je sais que c'est un hack total mais j'ai pensé que je devrais ajouter cet exemple de bibliothèque audio open source que j'ai mise sur github il y a un moment ...

https://github.com/run-time/jThump

Après avoir cliqué sur le lien ci-dessous, tapez sur les touches de la ligne d'accueil pour jouer un riff de blues (tapez également plusieurs touches en même temps, etc.)

Exemple d'utilisation de la bibliothèque jThump >> http://davealger.com/apps/jthump/

Il fonctionne essentiellement en créant des <iframe>éléments invisibles qui chargent une page qui lit un son sur Ready ().

Ce n'est certainement pas idéal mais vous pourriez attribuer +1 à cette solution uniquement sur la base de la créativité (et du fait qu'elle est open source et fonctionne dans n'importe quel navigateur sur lequel j'ai essayé). J'espère que cela donnera à quelqu'un d'autre au moins quelques idées.

:)

La réponse sélectionnée fonctionnera dans tout sauf IE. J'ai écrit un tutoriel sur la façon de le faire fonctionner cross browser = http://www.andy-howard.com/how-to-play-sounds-cross-browser-including-ie/index.html

Voici la fonction que j'ai écrite;

function playSomeSounds(soundPath)
 {

 var trident = !!navigator.userAgent.match(/Trident\/7.0/);
 var net = !!navigator.userAgent.match(/.NET4.0E/);
 var IE11 = trident && net
 var IEold = ( navigator.userAgent.match(/MSIE/i) ? true : false );
 if(IE11 || IEold){
 document.all.sound.src = soundPath;
 }
 else
 {
 var snd = new Audio(soundPath); // buffers automatically when created
 snd.play();
 }
 };

Vous devez également ajouter la balise suivante à la page html:

<bgsound id="sound">

Enfin, vous pouvez appeler la fonction et simplement passer par le chemin ici:

playSomeSounds("sounds/welcome.wav");

Vous pouvez toujours l'essayer AudioContextavec un support limité, mais cela fait partie du brouillon de travail de l' API audio Web . Cela pourrait valoir la peine si vous prévoyez de sortir quelque chose à l'avenir. Et si vous ne programmez que pour Chrome et Firefox, vous êtes en or.

L'API Web Audio est l'outil idéal pour ce travail. Il y a peu de travail impliqué dans le chargement des fichiers sons et leur lecture. Heureusement, il existe de nombreuses bibliothèques qui simplifient le travail. Étant intéressé par les sons, j'ai également créé une bibliothèque appelée musquito vous pouvez également consulter.

Actuellement, il ne prend en charge que les effets sonores atténués et je travaille sur d'autres choses comme la spatialisation 3D.