Le document explique comment créer un jeu de type 'Dance Dance Revolution' en utilisant l'API Web Audio. Il aborde l'historique, les fonctionnalités de l'API et son application dans le gameplay, notamment le calcul de pulsations à partir de données audio. Plusieurs applications utilisant l'API sont également mentionnées, ainsi que des méthodes pour générer des flèches et des animations.

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