générer un "dance dance revolution" avec web audio api
TRANSCRIPT
GÉNÉRER UN “DANCE DANCE REVOLUTION” AVEC
WEB AUDIO API
Sann-Rémy Chea@srchea
DANCEDANCE
REVOLUTION ?
AGENDA
• Web Audio API
• Applications
• Pulsation au service du gameplay
WEB AUDIO API
–Mozilla Developer Network
“The Web Audio API provides a powerful and versatile system for controlling audio on the Web.”
–Boris Smus (Developer Relations, Google)
“The goal of this API is to include capabilities found in modern game audio engines.”
HISTORIQUE DEWEB AUDIO API
• Spécification commencée par le W3C.
• Premier draft le 1 juin 2010.
• En Working draft depuis 2013.
• Suppression des préfixes webkit mi-2014.
FONCTIONNALITÉSWEB AUDIO API
• Récupérer le son à partir d’une entrée.
• Modifier : filtrer, augmenter/réduire le gain, créer des effets, compresser…
• Analyser : fréquences, bit rates, pics…
• Diriger vers une sortie : processus déconnecté, audio output.
APPLICATIONS
SOUND VISUALIZERhttp://srchea.com/apps/sound-visualizer-web-audio-api-webgl/
ACID DEFENDERhttp://www.cappel-nord.de/webaudio/acid-defender/
PULSATION AU SERVICE DU GAMEPLAY
CALCUL DE LA PULSATIONDONNÉES EXPLOITABLES
1. Récupération des données brutes du fichier.
2. Application du filtre low-pass
3. Calcul des pics par rapport à un seuil variable (90% à 30%, itération de -5%)
4. Conversion des résultats en millisecondes
5. Suppression des doublons + tri croissant
CALCUL DE LA PULSATIONFILTRAGE ET RÉSULTAT FINAL
1. Calcul des intervalles des pics + puissance des intervalles (moyenne quadratique)
2. Filtrage des pics plus hauts que la puissance
3. Intervalle le plus répandue (avec delta d’erreur acceptable)
4. ♪ BPM = 60 000 (1 min) / intervalle (ms)
GÉNÉRATION DES FLÈCHES
• Extrapoler les pics “sûrs” par rapport à la durée de la pulsation.
• Une image SVG + transformation (rotation).
• Animations en CSS.
• Scoring : 1000 / decalage
