Présentation faite le 11 avril 2015 à Paris pour la HTML5 Game Jam (http://html5gamejam.org). Web Audio API offre de grandes possibilités pour traiter le signal sonore en JavaScript. Nous allons voir à travers cette présentation les techniques pour automatiser une construction de "stage" pour un DDR (Dance Dance Revolution) : comment la pulsation est calculée pour le placement des flèches.

1. GÉNÉRER UN “DANCE DANCE
REVOLUTION”AVEC
WEB AUDIO API
Sann-Rémy Chea
@srchea

2. DANCE
DANCE
REVOLUTION ?

4. AGENDA
• Web Audio API
• Applications
• Pulsation au service du gameplay

5. WEB AUDIO API

6. –Mozilla Developer Network
“The Web Audio API provides a powerful and
versatile system for controlling audio on the Web.”

7. –Boris Smus (Developer Relations, Google)
“The goal of this API is to include capabilities found in
modern game audio engines.”

8. HISTORIQUE DE
WEB 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.

9. FONCTIONNALITÉS
WEB 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.

11. APPLICATIONS

12. SOUNDVISUALIZER
http://srchea.com/apps/sound-visualizer-web-audio-api-webgl/

13. JAM WITH
CHROME
http://www.jamwithchrome.com/

14. ACID DEFENDER
http://www.cappel-nord.de/webaudio/acid-defender/

15. TRIGGER
RALLY
https://triggerrally.com/

16. PULSATION AU SERVICE DU
GAMEPLAY

17. CALCUL DE LA PULSATION
DONNÉ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

18. CALCUL DE LA PULSATION
FILTRAGE 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)

19. 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

20. QUESTIONS ?
@srchea
https://github.com/srchea