En savoir plus sur l'API Web Audio, une API qui nous permet de créer et de gérer très facilement des sons dans notre navigateur.
Avant la sortie de HTML5, créer des applications qui allaient utiliser l'audio était très difficile. La mauvaise prise en charge des API de navigateur était la principale cause, et les développeurs devraient rechercher et utiliser des alternatives qui n'étaient pas tout à fait conventionnelles ou appropriées pour le travail.
Pouvez-vous imaginer comment les développeurs ont réussi à utiliser l'audio sur le Web avant la création de l'élément par exemple? Certains développeurs ont utilisé des outils qui sont assez morts aujourd'hui, tels que Flash, Silverlight ou un autre plugin tiers. Si vous ne savez pas exactement ce que sont ces plugins ou à quoi ils servaient, vous avez manqué de nombreuses applications audio difficiles à construire – chanceux.
En 2011, les navigateurs ont commencé à prendre en charge certains fichiers audio des fonctionnalités telles que et d'autres éléments. Cela a changé la donne et amélioré de nombreuses applications qui dépendaient de ces fonctionnalités. Les développeurs pouvaient désormais utiliser l'audio dans leurs applications, mais le support n'était pas encore idéal.
Désormais, avec Web Audio API nous sommes en mesure de créer des applications impressionnantes utilisant l'audio sur le Web sans avoir à créer ou utiliser des bibliothèques tierces, et, par défaut, nous avons un bon support pour tous les navigateurs de nos jours.
Web Audio API
Commençons par les bases de l'API Web Audio. Voici comment l'API fonctionne:
- L'API Web Audio a un contexte audio principal.
- Dans ce contexte audio, nous pouvons gérer et gérer nos opérations audio. Les opérations audio sont gérées par des nœuds audio.
- Nous pouvons avoir beaucoup de nœuds audio différents dans le même contexte audio, ce qui nous permet de créer de belles choses telles que des kits de batterie, des synthétiseurs, etc.
Créons notre premier contexte audio en utilisant l'API Web Audio et commencez à faire du bruit dans notre navigateur. Voici comment créer un contexte audio:
const audioContext = new ( window . AudioContext || window . webkitAudioContext ) ;
Le contexte audio est un objet qui contient tout ce qui concerne l'audio. Ce n’est pas une bonne idée d’avoir plus d’un contexte audio dans votre projet – cela peut vous causer beaucoup de problèmes à l’avenir.
L’API Web Audio possède une interface appelée OscillatorNode . Cette interface représente une forme d'onde périodique, à peu près une onde sinusoïdale. Utilisons cette interface pour créer du son.
Maintenant que nous avons notre audioContext const qui lance le contexte audio, créons un nouveau const appelé mySound en passant le audioContext const et en appelant la méthode createOscillator comme ceci:
const mySound = audioContext . createOscillator ( ) ;
Nous avons créé notre OscillatorNode maintenant nous devrions démarrer le mySound comme ceci:
mySound . start () ;
Mais, comme vous pouvez le voir, il ne lit rien dans votre navigateur. Pourquoi? Nous créons notre audioContext const en initiant le contexte audio, mais nous ne lui avons transmis aucune destination. Nous devrions toujours passer une propriété appelée destination à notre audioContext const, sinon cela ne fonctionnera pas.
Alors, maintenant, utilisez simplement le mySound const, appelez une méthode appelée connect et passez notre audioContext.destination comme ceci:
mySound . connect ( audioContext . destination ) ;
Nous utilisons maintenant l'API Web Audio pour créer très facilement des bruits dans notre navigateur.
Propriétés
Le OscillatorNode possède certaines propriétés, telles que type . La propriété type spécifie le type de forme d'onde que nous voulons que notre OscillatorNode émette. Nous pouvons utiliser 5 formes de sortie: sinus (par défaut), carré dent de scie triangle et personnalisé .
Pour changer le type de notre OscillatorNode il suffit de passer après la méthode start () un type à notre mySound comme ceci :
mySound . type = "square"
Le OscillatorNode possède également une autre propriété appelée frequency . Nous pouvons utiliser cette propriété pour représenter l'oscillation de notre OscillatorNode en hertz.
Pour changer l'oscillation de notre OscillatorNode en hertz, nous devons appeler la fréquence ] et appelez la fonction setValueAtTime . Cette fonction reçoit deux arguments: la valeur en hertz et notre contexte audio. Nous pouvons l'utiliser comme ceci:
mySound . frequency . setValueAtTime ( 400 audioContext . currentTime ) ;
En utilisant l'API Web Audio, nous pouvons gérer l'audio assez facilement maintenant dans nos navigateurs, mais si vous souhaitez utiliser cette API pour créer quelque chose de plus difficile et plus puissant, vous '
Pour nous faciliter les choses, nous pouvons utiliser une bibliothèque audio JavaScript pour le travail, et la bibliothèque audio JavaScript la plus utilisée actuellement est Howler . Avec cette bibliothèque, nous pouvons créer des exemples plus sophistiqués et utiliser toutes les puissances de l'API Web Audio.
Howler
La bibliothèque audio JavaScript Howler a été créée pour aider les développeurs à travailler dans un environnement plus fiable et plus simple avec l'API Web Audio, ce qui rend le travail avec l'audio plus facile et plus amusant. Cette bibliothèque a beaucoup de fonctionnalités et d'avantages, tels que:
- Facile à apprendre —Howler est très facile à apprendre et à démarrer. Il contient également une documentation très correcte et bien expliquée.
- Assistance – Avec cette bibliothèque, vous n’avez pas à vous inquiéter si votre code fonctionnera sur des navigateurs plus anciens. Étant donné que cette bibliothèque utilise l'API Web Audio par défaut et repose sur HMTL5 Audio, votre code fonctionnera dans presque tous les navigateurs, même les navigateurs plus anciens comme IE9.
- Contrôle total – Vous pouvez contrôler pratiquement tout, du src de l'audio à volume, recherche, taux, lecture automatique, mute, etc.
- Zéro dépendances – Cette bibliothèque n'a pas de plugin ou de code de dépendance, ce qui la rend plus légère et moins sujette aux bogues ou erreurs.
Maintenant que nous en savons un peu un peu sur cette bibliothèque, commençons à l'utiliser. Créons un lecteur simple. Commençons par créer un dossier appelé player et à l'intérieur de ce dossier, nous allons créer un package.json .
yarn init - y
Maintenant, nous devons installer la bibliothèque Howler.
yarn add howler
Maintenant, créons un fichier HTML appelé player et, à l'intérieur de ce fichier, nous allons créer deux boutons simples: un bouton pour lire l'audio et l'autre pour mettre en pause. De plus, nous allons importer le fichier index.js que nous créerons plus tard dans notre fichier HTML.
Notre fichier HTML devrait ressembler à ceci:
< html [19659019]>
< head >
< title > Understanding the Web Audio API </ title > [19659072] < meta _charset_ = " UTF-8 " />
</ head > [19659074]
< corps >
< div >
< bouton _id_ = " play " > Play </ button [19659019]>
< bouton _id_ = " pause " > Bouton Pause </ bouton [19659019]>
</ div >
< script _src_ = " ./ index.js " > </ script >
</ body >
</ html >
Maintenant, créons notre fichier index.js et importons le paquet Howler à l'intérieur.
const { Howl } = [19659121] require ( 'howler' ) ;
Ensuite, nous devrions créer un nouveau const appelé sound qui sera une instance de Howl . La classe Howl peut recevoir de nombreuses options, telles que src volume loop etc. Si vous voulez en savoir plus sur toutes les propriétés, vous pouvez lisez la documentation ici .
Nous allons utiliser trois options pour l'instant: src pour passer notre source audio, volume qui sera 0,5, et précharge qui sera vraie.
const sound = new _Howl_ ( {
src : 'http://eatandsleep.net/billboard/1988/10-Rick%20Astley%20-%20Never%20Gonna%20Give%20You%20Up.mp3'
volume : 0,5
précharge : true
} ) ;
Maintenant, créons deux fonctions simples pour lire et mettre en pause notre audio. Nous allons créer une fonction playAudio pour lire notre audio, et une fonction pauseAudio pour mettre notre audio en pause. De plus, nous devons ajouter un écouteur d'événements aux boutons, donc chaque fois que nous cliquons sur les boutons, la fonction respective de chaque bouton est appelée.
function playAudio () {
son . play ()
}
function pauseAudio () {
son . pause () ;
}
const play = document . getElementById [19659019] ( "jouer" ) ;
play . addEventListener ( "click" playAudio false ) ;
const pause = document . getElementById ( "pause" ) ;
pause . addEventListener ( "click" pauseAudio false ) ;
Maintenant, cliquez sur
L'instance Howl a beaucoup de méthodes différentes que vous pouvez utiliser et composer pour obtenir un joli résultat final dans votre application. Par exemple, utilisons deux méthodes qui sont utilisées dans de nombreuses applications audio: les boutons sauter en avant et sauter en arrière.
Créons ces deux nouveaux boutons: un pour sauter 10 secondes en arrière, et un autre pour sauter 10 secondes en avant. . Pour chaque bouton, nous allons transmettre un identifiant unique.
< bouton _id_ = " back " > -10 < / bouton >
< bouton id = " avant " > +10 [19659075] </ bouton >
Maintenant, de retour dans notre fichier index.js nous allons créer deux fonctions à peu près identiques aux deux premières que nous avons créé, mais maintenant, à l'intérieur de chaque fonction, nous allons incrémenter la valeur de seek comme ceci:
function backAudio () [19659018] {
son . recherche ( son . recherche () - 10 ) ; [19659139]}
function forwardAudio () {
son . recherche ( son . recherche () + 10 ) ; [19659139]}
Ajoutons maintenant deux écouteurs d'événements à nos boutons, donc chaque fois que nous cliquons sur un bouton, cela appelle la fonction respective du bouton.
const back = document . getElementById ( "back" ) ;
retour . addEventListener ( "click" backAudio false ) ;
const forward = document . getElementById ( "forward" ) ;
forward . addEventListener ( "click" forwardAudio false ) ;
Nous avons maintenant un lecteur très décent en utilisant Howler, cette bibliothèque audio JavaScript simple mais puissante. Je vous recommande vraiment d'en savoir plus sur Howler et de créer plus de choses avec. Cela vous aidera beaucoup si vous créez quelque chose lié à l'audio sur le Web.
Conclusion
Dans cet article, nous en avons appris davantage sur l'API Web Audio et sur la manière dont cette API peut nous aider à travailler avec l'audio dans navigateurs modernes. Cela nous ouvre de nombreuses possibilités pour créer des applications plus complexes gérant l'audio sur les navigateurs, et nous pouvons appliquer et utiliser cette API dans nos applications pour les rendre plus interactives.
Source link