Share
Dans ce didacticiel, nous examinerons de près les éléments Web Audio fondamentaux utilisés pour créer des paysages sonores 3D pour des applications interactives immersives, notamment les jeux 3D..
L'API Web Audio et la terminologie utilisée peuvent parfois prêter à confusion, mais ce tutoriel a pour objectif de simplifier la tâche et de fournir une explication plus simple des éléments Web Audio et de la manière dont ils fonctionnent ensemble pour former un paysage sonore 3D..
Cette démonstration contient trois sons qui tournent autour d’un auditeur, la direction de l'auditeur est indiquée par la flèche. Si vous imaginez mépriser un personnage du jeu (l'auditeur), les sons en rotation pourraient facilement représenter des amis ou des ennemis encerclant le personnage..
Le code source et les ressources de démonstration sont joints à ce didacticiel..
le AudioContext L’interface est le cœur et l’âme du Web Audio. Elle fournit les fonctions nécessaires à la création de divers éléments Web Audio et permet également d’envoyer tout l’audio au matériel, puis aux haut-parleurs ou au casque de quelqu'un..
var audioContext = null si (window.AudioContext! == non défini) audioContext = new AudioContext ()
Il est important de s'assurer que le AudioContext l'interface est disponible car Web Audio est encore relativement récent et il est possible qu'il ne soit pas disponible sur certains navigateurs Web.
En plus de fournir les fonctions nécessaires à la création de divers éléments Web Audio, le AudioContext l'interface a deux propriétés importantes; destination et auditeur qui sont tous deux en lecture seule. le destination La propriété peut être considérée comme la connexion au matériel audio, c’est là que tout l’audio généré finira par se retrouver. le auditeur propriété (nous verrons cela plus en détail plus tard) représente la chose qui écoute tout l’audio, par exemple un personnage, ou plus précisément une caméra, dans un jeu.
le AudioBuffer et AudioBufferSourceNode les interfaces nous permettent de jouer de l'audio. AudioBuffer Les objets contiennent l'audio brut (échantillons de sons) qui est peaufiné, écrasé et écrasé à mesure qu'ils se frayent un chemin dans Web Audio avant d'atteindre les haut-parleurs ou les écouteurs de quelqu'un.. AudioBufferSourceNode les objets sont utilisés pour démarrer et arrêter l'audio contenu dans AudioBuffer objets.
La méthode standard pour charger de l'audio dans un AudioBuffer l'objet est d'utiliser un XMLHttpRequest objet avec son responseType mis à arraybuffer. Une fois le fichier audio chargé, le tampon de matrice est ensuite envoyé au AudioContext objet de décodage et, si le décodage est réussi, nous recevrons un AudioBuffer objet.
Accentsconagua
var loader = new XMLHttpRequest () loader.open ("GET", "massive-explosion.ogg") loader.responseType = "arraybuffer" loader.onload = whenLoaded fonction loader.send () whenLoaded (événement) var data = loader .response if (data === null) // Un problème est survenu lors du chargement du fichier. return // Décode les données. audioContext.decodeAudioData (data, whenDecoded) function whenDecoded (audioBuffer) // "audioBuffer" est un objet AudioBuffer. le decodeAudioData () La fonction a également un troisième paramètre qui accepte un deuxième rappel, ce rappel est appelé lorsque le fichier audio chargé ne peut pas être décodé..
decodeAudioData (data, whenDecoded, whenFailed)
Tous les navigateurs Web ne prennent pas en charge les mêmes formats audio. Vous trouverez ici un bon tableau des formats pris en charge. Par conséquent, vous pouvez utiliser le deuxième rappel pour revenir à un autre format audio si nécessaire. Par exemple, Internet Explorer ne prend pas en charge OGG Vorbis, mais MP3. Le seul problème réel avec le format MP3 est qu’il ne permet pas une boucle audio transparente comme le fait OGG Vorbis..
Quand vous avez un AudioBuffer objet disponible, vous pouvez y jouer en utilisant un AudioBufferSourceNode objet.
var source = audioContext.createBufferSource () // Attache un objet AudioBuffer. source.buffer = audioBuffer // Connectez l'objet "source" à l'objet "destination". source.connect (audioContext.destination) // Facultativement, indiquez à "source" de mettre en boucle l'audio en continu. source.loop = false // Démarrer l'audio. source.start ()
Il est important de se rappeler AudioBufferSourceNode les objets sont des lecteurs audio uniques, autrement dit, vous ne pouvez utiliser que le début() fonctionner une fois. Vous devrez créer un AudioBufferSourceNode objet et connectez-le (directement ou indirectement) au destination objet exposé par le AudioContext objet chaque fois que vous voulez jouer de l'audio à partir d'un AudioBuffer objet.
Vous pourriez rendre la vie un peu plus simple en créant une petite fonction utilitaire qui crée, connecte et démarre une AudioBufferSourceNode objet pour vous.
fonction jouer (audioBuffer, audioContext) var source = audioContext.createSourceBuffer () source.buffer = audioBuffer source.connect (audioContext.destination) source.start () jouer (audioBuffer01, audioContext) jouer (audioBuffer02, audioContext) , audioContext)
Quand un AudioBufferSourceCode La lecture de l'objet est terminée et si vous ne faites référence à aucun objet (par exemple, vous ne les avez pas stockées dans un tableau), Web Audio déconnectera automatiquement l'objet pour vous. Ceci est extrêmement pratique lorsque vous n’avez qu’à feu et à oublier des effets sonores brefs, etc..
Si vous décidez de mettre l’audio en boucle, utilisez la commande AudioBufferSourceNode boucle propriété, vous devrez garder une référence à la AudioBufferSourceNode object quelque part afin que vous puissiez Arrêtez() la lecture audio.
source.stop ()
Donc, à ce stade, nous utilisons des tampons pour lire de l’audio, mais l’audio est joué directement sans aucun panoramique ni spatialisation. C'est ici que PannerNode les objets entrent en jeu.
PannerNode Les objets nous permettent de positionner l'audio dans un espace 3D, dans un système de coordonnées cartésiennes. C'est là que se passe la majeure partie de la magie 3D.
UNE PannerNode object a pas mal de propriétés qui nous permettent d'affiner le comportement de l'audio mais pour ce tutoriel, nous ne nous intéressons qu'à deux d'entre elles; maxDistance et panningModel. le maxDistance la propriété est la distance de la auditeur à quel point le volume audio sera nul. Ceci est une valeur arbitraire et n'aura de sens que dans votre application, mais sa valeur par défaut est 10000. Le panningModel indique à Web Audio comment traiter l'audio passant par un PannerNode objet. Pour les paysages sonores 3D, vous voudrez probablement définir la valeur sur HRTF (fonction de transfert liée à la tête).
Pour définir la position d'un AudioBufferSourceNode nous utilisons le setPosition () fonction exposée par un PannerNode objet.
var panner = audioContext.createPanner () panner.panningModel = "HRTF" // Définit la position 3D (x, y, z). panner.setPosition (1, 2, 3) // Connecte l'objet "source" à l'objet "panner". source.connect (panner) // Connecte l'objet "panner" à l'objet "destination". panner.connect (audioContext.destination) // Lancer l'audio. source.start ()
Pour clarifier les choses, mettons à jour la fonction utilitaire créée précédemment.
fonction de lecture (audioBuffer, x, y, z, audioContext) var source = audioContext.createSourceBuffer () source.buffer = audioBuffer var panner = audioContext.createPanner () panner.panningModel = "HRTF" panner.setPosition (x, y, z) source.connect (panoramique) panner.connect (audioContext.destination) source.start () lecture (audioBuffer01, 1, 2, 3, audioContext) lecture (audioBuffer02, 4, 5, 6, audioContext) lecture (audioBuffer03, 7, 8, 9, audioContext)
À ce stade, nous jouons de l'audio et le positionnons dans l'espace 3D, mais nous devons examiner un autre élément important. l'auditeur audio.
Chaque AudioContext objet expose un auditeur objet qui représente la position et l'orientation du chose c'est écouter l'audio. Généralement le chose serait une caméra virtuelle attachée à la tête d'un personnage du jeu, au pare-chocs d'une voiture, à la queue d'un avion, ou à tout autre élément ayant un sens pour le spectateur de son point de vue.
le auditeur l'objet a un setPosition () fonction et un setOrientation () une fonction. le setPosition () fonction place l'auditeur quelque part dans l'espace 3D, et le setOrientation () fait tourner l'auditeur (imaginez une caméra panoramique et inclinable).
le setPosition () la fonction fonctionne exactement de la même manière que le PannerNode setPosition () fonction et accepte trois coordonnées.
audioContext.listener.setPosition (x, y, z)
le setOrientation () la fonction est un peu plus complexe, elle accepte deux vecteurs unitaires. Le premier vecteur représente la rotation de l'auditeur (la direction indiquée par la caméra) et le second vecteur représente la rotation de l'auditeur. en haut direction (il pointe du haut de la caméra).
audioContext.listener.setOrientation (x1, y1, z1, x2, y2, z2)
Si vous ne devez faire pivoter l'auditeur que sur un axe, les calculs vectoriels sont relativement simples. Par exemple, si vous utilisez le même système de coordonnées que WebGL utilise où positive X pointe à droite de l'écran, positif y pointe vers le haut de l'écran et positif z pointe sur l'écran, vous pouvez alors faire tourner l'auditeur autour du y axe (panoramique de la caméra) en utilisant un cos () appel de fonction et un péché() appel de fonction.
// La position de l'auditeur (peut être n'importe quoi). var x = 50 var y = 100 var z = 0 audioContext.listener.setPosition (x, y, z) // Calcule le vecteur de rotation. // rad = rotation, en radians var rad = 0.10 var v1 = Math.cos (rad) // x var v2 = 0 // y var v3 = Math.sin (rad) // z // Le vecteur "up" var v4 = 0 // x var v5 = 1 // y var v6 = 0 // z audioContext.listener.setOrientation (v1, v2, v3, v4, v5, v6)
La démonstration de ce tutoriel (le code source est joint) fait la même chose et fait pivoter le PannerNode objets autour d'un seul axe.
Dans ce didacticiel, nous avons examiné les éléments Web Audio fondamentaux utilisés pour construire des paysages sonores 3D pour des applications interactives immersives, notamment les jeux 3D. J'espère que ce tutoriel vous a été utile et qu'il a fourni suffisamment d'informations pour vous permettre de comprendre comment les tampons audio, les panoramique et les écouteurs travaillent ensemble pour produire des paysages sonores 3D..
Si vous avez des commentaires ou des questions, n'hésitez pas à poster un commentaire ci-dessous.
Dans le prochain tutoriel, Web Audio et paysages sonores 3D: Implémentation, nous allons prendre tout ce qui précède (et plus) et les intégrer dans une API simplifiée. Le prochain tutoriel sera principalement consacré aux jeux 3D, mais l’API sera suffisamment générique pour pouvoir être utilisée dans diverses applications interactives immersives..
