Share
Qu'est-il arrivé à l'audio sur le Web? Pendant un temps le web était la plate-forme pour montrer votre goût dans les airs. Des versions MIDI du compte à rebours final à l'arrière-plan, à la lecture automatique de fichiers MP3 MySpace, le son était omniprésent.
Plus maintenant. Brûlés par ces atrocités vécues par les utilisateurs, les développeurs Web s'en tiennent bien. Malheureusement, le son est relégué au second plan sur le Web, tandis que les applications natives s'épanouissent.
Pensez à la tonalité de notification que vous entendez lorsque vous recevez un courrier électronique ou au petit éclat lorsque vous tirez pour actualiser l'application Twitter. De telles applications montrent à quel point le son peut faire partie intégrante d'une expérience utilisateur exceptionnelle.
Dans ce tutoriel, je vais vous montrer comment ramener le son sur le Web, dans le bon sens!
L'API Web Audio est un moyen puissant et performant de manipuler le son dans le navigateur. Avant de poursuivre ce didacticiel, vous voudrez peut-être consulter le didacticiel précédent de cette série, dans lequel j'ai expliqué comment créer un son de base à l'aide de JavaScript et lire un fichier mp3..
Pour ce tutoriel, nous allons créer une page de paiement qui nous indique de manière audio que notre paiement a abouti. J'utiliserai Bootstrap pour rendre les choses plus jolies plus rapidement.
Ajouter du son à votre application Web Mon magasin
Êtes-vous prêt à acheter cet article?
Vous remarquerez tout en bas que j'ai inclus un fichier appelé "success-sound.js". C’est là que nous écrirons notre code pour fournir un retour audio à l’utilisateur lorsque son paiement sera effectué avec succès. Une fois que vous avez créé ce fichier, la première chose à faire est de créer un AudioContext. Vous vous souvenez peut-être du dernier tutoriel qu'un AudioContext est le moyen d'accéder aux différentes fonctions de l'API Web Audio..
var context = new AudioContext ();
L’un des avantages de l’API Web Audio est qu’elle nous permet de créer des sons à partir de rien, sans même regarder un fichier audio. Nous faisons cela en utilisant des oscillateurs.
Les oscillateurs sont un moyen de créer un son que nous pouvons entendre. Ils le font en générant une onde périodique à une certaine fréquence. La forme de cette onde varie, mais les types les plus courants sont les ondes sinusoïdales, carrées, triangulaires et en dents de scie. Ces types de vagues ont tous un son différent. Créons deux oscillateurs à onde triangulaire.
var osc1 = context.createOscillator (), osc2 = context.createOscillator (); osc1.type = 'triangle'; osc2.type = 'triangle';
Les oscillateurs sont assez bruyants par défaut. Par conséquent, à moins que nous ne voulions donner à nos utilisateurs la peur de leur vie, nous devrions baisser un peu le volume. Puisque l'API Web Audio fonctionne en enchaînant des nœuds pour canaliser le son, nous créons et connectons nos oscillateurs à un GainNode..
var volume = context.createGain (); volume.gain.value = 0,1;
Les nœuds de gain multiplient le volume du son entrant par le nombre que vous spécifiez. Donc, dans ce cas, le volume sera le dixième du signal qui lui est transmis.
Connectons tout.
// Connecte les oscillateurs au GainNode osc1.connect (volume); osc2.connect (volume); // Connecte GainNode aux haut-parleurs volume.connect (context.destination);
Ensuite, vérifiez que vous avez bien joué en jouant sur les oscillateurs pendant deux secondes..
// Durée de lecture de l'oscillateur (en secondes) var duration = 2; // Quand commencer à jouer les oscillateurs var startTime = context.currentTime; // Démarrer les oscillateurs osc1.start (startTime); osc2.start (heure de début); // Arrête les oscillateurs dans 2 secondes osc1.stop (startTime + duration); osc1.stop (heure de début + durée);
À ce stade, vous devriez entendre une tonalité lorsque vous rechargez votre page. Ce n'est pas le son le plus étonnant, je suis sûr que vous serez d'accord, mais c'est un début!
Les oscillateurs que nous avons créés jouent à une fréquence par défaut. En modifiant cette fréquence, nous pouvons modifier la note musicale que vous entendez quand elle est jouée. C’est ce qui rendra le ton un peu plus agréable et la clé du sentiment que vous souhaitez exprimer lorsque votre utilisateur l’entend. Changeons notre oscillateur pour jouer à la note "B4", qui est 493.883Hz.
fréquence var = 493,883; osc1.frequency.value = frequency; osc2.frequency.value = frequency;
Maintenant, si nous rechargeons la page, vous entendrez la tonalité à un ton différent. Vous pensez peut-être à ce stade: "Pourquoi jouons-nous sur deux oscillateurs avec exactement la même hauteur?" Eh bien, cela nous amène à un petit truc que nous pouvons faire pour rendre notre tonalité un peu plus agréable.
Si nous désaccordons nos oscillateurs pour rendre leurs fréquences légèrement différentes, nous obtenons un bel effet de chorus, ce qui rend notre son beaucoup plus riche..
fréquence var = 493,883; osc1.frequency.value = fréquence + 1; osc2.frequency.value = fréquence - 2;
Bien que notre petit son sonne beaucoup mieux, il se termine assez brusquement. Pour rendre cela moins choquant, nous devrions rapidement baisser le volume à la fin du son; c'est ce qu'on appelle aussi "disparaître en fondu". Cela se fait via AudioParams, qui sont utilisés pour automatiser les valeurs des nœuds audio, telles que le gain et la fréquence. Nous entrerons dans AudioParams dans beaucoup plus de détails dans le prochain tutoriel de cette série.
// Réglez le volume sur 0,1 juste avant la fin de la tonalité volume.gain.setValueAtTime (0.1, startTime + duration - 0.05); // Réduit le volume à zéro 0,1 seconde après la fin de la tonalité volume.gain.linearRampToValueAtTime (0, heure de début + durée);
Ce que nous disons ici est de s’assurer que le volume est à 0,1, 0,05 seconde avant la fin de la tonalité. Continuez ensuite à baisser le volume jusqu'à ce qu'il atteigne zéro en même temps que notre sonorité se termine..
Enveloppons notre code jusqu'à présent dans une seule fonction et voyons ce que nous avons.
// Lecture des oscillateurs à une certaine fréquence et pendant un certain temps var playNote = function (fréquence, heure de début, durée) var osc1 = context.createOscillator (), osc2 = context.createOscillator (), volume = context.createGain (); // Définit le type d'onde de l'oscillateur osc1.type = 'triangle'; osc2.type = 'triangle'; volume.gain.value = 0,1; // Configure le routage des noeuds osc1.connect (volume); osc2.connect (volume); volume.connect (context.destination); // désaccorde les oscillateurs pour l'effet de chorus osc1.frequency.value = frequency + 1; osc2.frequency.value = fréquence - 2; // fermeture en fondu volume.gain.setValueAtTime (0.1, heure de début + durée - 0,05); volume.gain.linearRampToValueAtTime (0, heure de début + durée); // Démarrer les oscillateurs osc1.start (startTime); osc2.start (heure de début); // Arrêt des oscillateurs osc1.stop (startTime + duration); osc2.stop (heure de début + durée); ;
Pour rendre cette fonction un peu plus puissante, j'ai supprimé certaines variables et autorisé la transmission de ces valeurs. Cela nous permet de jouer différentes notes à différentes fréquences. Il est maintenant temps de faire preuve de créativité!
Pensez à ce que vous voulez que vos utilisateurs ressentent lorsqu'ils viennent d'acheter quelque chose dans votre boutique en ligne. C'est une expérience positive: quelqu'un a acheté quelque chose qu'il voulait pour améliorer sa vie, aucune erreur ne s'est produite et la transaction a été traitée avec succès..
Sur le plan audio, l’indication du succès est en réalité assez simple. Un motif musical qui monte en profondeur à la fin sonne toujours beaucoup plus joyeux que celui qui tombe. Vous n'avez même pas besoin d'une mélodie ou de tout un tas de notes pour exprimer cela. Pour prouver cette théorie, utilisons simplement deux notes simples pour notre motif de réussite.
// Joue un 'B' maintenant qui dure 0,116 seconde playNote (493.883, context.currentTime, 0.116); // Joue un 'E' juste à la fin de la note précédente, qui dure 0,232 seconde playNote (659.255, context.currentTime + 0.116, 0.232);
Ahh, le doux son du succès.
N'oubliez pas que si vous n'aimez pas jouer avec des oscillateurs, vous pouvez utiliser un fichier MP3. Ayez une lecture du tutoriel précédent pour voir comment.
Il vaut mieux envelopper ces deux playNote appelle en un seul appel de fonction, donc nous avons un crochet facile pour jouer notre son.
var playSuccessSound = function () // Joue un "B" qui dure 0,116 seconde playNote (493.883, context.currentTime, 0.116); // Joue un 'E' juste à la fin de la note précédente, qui dure 0,232 seconde playNote (659.255, context.currentTime + 0.116, 0.232); ;
C'est maintenant à vous de décider comment vous voulez déclencher ce son et à quel événement vous souhaitez le jouer en réaction. Pour les besoins de ce tutoriel. simulons un appel Ajax qui prend trois secondes. Nous allons utiliser cela pour prétendre qu'une transaction côté serveur est en cours.
var myFakeAjaxCall = function (rappel) setTimeout (function () callback ();, 3000); ;
Il ne nous reste plus qu'à ajouter un auditeur d'événement à notre bouton Acheter maintenant..
Accentsconagua
$ ('# buy-now-button'). click (function () myFakeAjaxCall (function () playSuccessSound ();););Cliquez sur le bouton, attendez trois secondes, puis dansez avec joie lorsque vous entendez la confirmation audio que votre transaction a réussi..
Afin de modifier le texte du bouton afin d'indiquer visuellement que quelque chose s'est passé, Bootstrap fournit des fonctions d'aide au bouton permettant de permuter le texte fourni dans un attribut de données. Comment cela fonctionne est en dehors de la portée de cet article, mais voici le code pour l'exhaustivité.
$ ('# buy-now-button'). click (function () var que = ceci, $ btn = $ (this) .button ('chargement'); myFakeAjaxCall (function () playSuccessSound (); $ btn .button ('complete');););J'espère que vous avez trouvé ce tutoriel utile et qu'il vous a encouragé à ajouter du son (de manière responsable!) À votre application Web. Le code de ce tutoriel est sur GitHub, ainsi qu'une démo de notre son final. Le prochain tutoriel de cette série est destiné à ceux d'entre vous qui ont attrapé le bug de l'oscillateur; nous allons construire un synthétiseur audio Web.
