Home
Pour cet exercice noté, vous allez créer un piano interactif. En cliquant sur les touches, une note sera jouée et un gif emoji aléatoire sera affiché.
Vous avez le droit à 3 jokers. C’est à dire que vous pouvez me demander de l’aide trois fois dans le cadre de l’exercice. (si il y a un problème pour démarrer le projet, ce n’est pas comptabiliser comme joker)
L’exercice se découpe en plusieurs parties :
- Intégrer le piano en HTML/CSS. Je veux que le site fonctionne sur mobile et desktop.
- Jouer une note au click sur une touche.
- Utiliser l’api de giphy pour aller chercher un gif emoji.
J'ai designé le piano sur Figma, pour le fichier se trouve ici => https://www.figma.com/file/Ss7ekBYkqxojGCDjdaYUWm/The-emoji-piano?node-id=0%3A1
Pour intégrer le piano, vous êtes libre, full CSS, svg, canvas...
J'ai ajouté tailwind, mais pareil, vous pouvez l'utiliser ou non.
Le principal, c'est d'avoir le même rendu.
Vu qu'on a essentiellement travailler sous Vue.js. Et bien, le projet est basé dessus :) Chaque touche du piano devra répondre au click et lancer la note correspondante. Vous allez avoir besoin de l'element HTML audio.
const audio = document.createElement('audio')
audio.src = 'mon_son.mp3'
audio.play()Les différents fichiers mp3 sont stockés dans le repertoire /public/assets/sounds/.
La nomenclature des notes est en anglais.
Ensuite un autre évènement se passe quand je clique sur une touche. Un emoji aleatoire s'affiche au dessus du piano. Pour aller chercher ces emojis, on va utiliser l'API de Giphy.
La doc est ici => https://github.com/Giphy/giphy-js/blob/master/packages/fetch-api/README.md
Vous aurez besoin de la GIPHY_KEY, je vous la donnerai en début de session.
const gf = new GiphyFetch('GIPHY_KEY')- brancher les touches du clavier QZSEDFTGYHUJ avec le piano.