Music Experience . User Generated . Creative Coding

Haribo PikBoxing

Brand expérience ludique pour Haribo : transformation des bonbons Pikboxing en instruments de beatbox au sein d'un sampler interactif permettant de composer, personnaliser et partager ses propres créations musicales.

Rôle
Senior Frontend Developer
Année
2021
Durée
2 mois
Stack
next.jsweb audio apireact
Haribo PikBoxing studio
Contexte

Vue d'ensemble

Haribo voulait promouvoir sa nouvelle gamme de bonbon Haribo Pik via une campagne dédiée à la musique.
Le projet proposé permet aux internautes de composer des morceaux à l'aide d'un séquenceur, de les enregistrer et de les diffuser sur les réseaux sociaux.


Le défi

Problématiques

  • 01Synchronisation de la lecture en boucle de tous les samples
  • 02Jouer une vidéo différente pour chaque sample
  • 03Enregistrement de l'ensemble des manipulations de l'utilisateur
  • 04Maquette au design skeuomorphique
L'approche

Solution mise en œuvre

Découpage de l'ensemble des éléments dynamiques de la maquette (boutons, éléments étirables, etc...) afin de produire une intégration propre, dynamique et responsive.

  • Découpage des boutons et des textures
  • Développement d'un moteur basé sur la Web Audio API pour lecture et enregistrement des morceaux
  • Enregistrement des données du morceaux dans un JSON hébergé en BDD
Projet suivant — 01 / 05
Burger King Factory