GÉNÉRER UN “DANCE DANCE
REVOLUTION”AVEC
WEB AUDIO API
Sann-Rémy Chea
@srchea
DANCE
DANCE
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 engi...
HISTORIQUE DE
WEB AUDIO API
• Spécification commencée par le W3C.
• Premier draft le 1 juin 2010.
• En Working draft depuis...
FONCTIONNALITÉS
WEB AUDIO API
• Récupérer le son à partir d’une entrée.
• Modifier : filtrer, augmenter/réduire le gain, cré...
APPLICATIONS
SOUNDVISUALIZER
http://srchea.com/apps/sound-visualizer-web-audio-api-webgl/
JAM WITH
CHROME
http://www.jamwithchrome.com/
ACID DEFENDER
http://www.cappel-nord.de/webaudio/acid-defender/
TRIGGER
RALLY
https://triggerrally.com/
PULSATION AU SERVICE DU
GAMEPLAY
CALCUL DE LA PULSATION
DONNÉES EXPLOITABLES
1. Récupération des données brutes du fichier.
2. Application du filtre low-pass...
CALCUL DE LA PULSATION
FILTRAGE ET RÉSULTAT FINAL
1. Calcul des intervalles des pics + puissance des
intervalles (moyenne ...
GÉNÉRATION DES FLÈCHES
• Extrapoler les pics “sûrs”
par rapport à la durée de la
pulsation.
• Une image SVG +
transformati...
QUESTIONS ?
@srchea
https://github.com/srchea
Générer un "Dance Dance Revolution" avec Web Audio API
Générer un "Dance Dance Revolution" avec Web Audio API
Prochain SlideShare
Chargement dans…5
×

Générer un "Dance Dance Revolution" avec Web Audio API

535 vues

Publié le

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.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
535
Sur SlideShare
0
Issues des intégrations
0
Intégrations
17
Actions
Partages
0
Téléchargements
3
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Générer un "Dance Dance Revolution" avec Web Audio API

  1. 1. GÉNÉRER UN “DANCE DANCE REVOLUTION”AVEC WEB AUDIO API Sann-Rémy Chea @srchea
  2. 2. DANCE DANCE REVOLUTION ?
  3. 3. AGENDA • Web Audio API • Applications • Pulsation au service du gameplay
  4. 4. WEB AUDIO API
  5. 5. –Mozilla Developer Network “The Web Audio API provides a powerful and versatile system for controlling audio on the Web.”
  6. 6. –Boris Smus (Developer Relations, Google) “The goal of this API is to include capabilities found in modern game audio engines.”
  7. 7. 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.
  8. 8. 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.
  9. 9. APPLICATIONS
  10. 10. SOUNDVISUALIZER http://srchea.com/apps/sound-visualizer-web-audio-api-webgl/
  11. 11. JAM WITH CHROME http://www.jamwithchrome.com/
  12. 12. ACID DEFENDER http://www.cappel-nord.de/webaudio/acid-defender/
  13. 13. TRIGGER RALLY https://triggerrally.com/
  14. 14. PULSATION AU SERVICE DU GAMEPLAY
  15. 15. 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
  16. 16. 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)
  17. 17. 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
  18. 18. QUESTIONS ? @srchea https://github.com/srchea

×