HtmlDdrPlayer

DEMO: https://guzmazow.github.io/

How to play?

• Use arrow keys
• Connect using serial port (button at the right corner of the website navigation bar) and continuously receive integer value that indicates pressed keys
  • 16 bit array (Uint8array) aka usinged int: | index | 15 | 14 | 13 | 12 | 11 | 10 | 9 .. 0 | |:-----:|:--:|:----:|:----:|:-----:|:-----:|:------:|:------------:| | key | UP | DOWN | LEFT | RIGHT | START | SELECT | N/A | | value | 1 | 2 | 4 | 8 | 16 | 32 | 64 .. 32768 |
• As of 2023-04-16 this works on mobile

Goal of this project

• Create a web vesion of DDR/ITG game

Main properties of this project

• Serverless
• Fast loading
• Media (songs, videos) stored on 3rd party servers
  • keeping media on youtube servers seams a lot more legal
• Play the standard simfile (.SM) format to leverage existing song base

Used stuff (acknowledgements, honorable mentions)

• OutFox arrows, glow, judgement images - https://github.com/TeamRizu/OutFox

• Stepmania default fallback mine image/sound - https://github.com/stepmania/stepmania

• JS Simfile parser from some old video (cannot find the link anymore)

  • Seems like Trumpet63-stream also rewrote it to typescript https://github.com/Trumpet63-stream/SimParser
    • For peace of mind I link his licence as well http://creativecommons.org/licenses/by/4.0/
    • As required by licence I mention that there is almost no original code left.

• Project includes simfiles from specific simfile pad packs:

  • Ace Of Arrows - http://aceofarrows.weebly.com/
  • chewi's simfiles - https://zenius-i-vanisher.com/v5.2/viewsimfilecategory.php?categoryid=842
  • Fraxtil - https://fra.xtil.net/simfiles/
  • Otaku's Dream Mix - https://www.otakusdream.com/news/?page_id=1320
  • Sudziosis - https://zenius-i-vanisher.com/v5.2/viewthread.php?threadid=5434
  • Valex's Magical 4-Arrow Adventure - https://search.stepmaniaonline.net/packs/Valex%27s+Magical+4-Arrow+Adventure
  • Vocaloid Project Pad Pack - https://search.stepmaniaonline.net/packs/Vocaloid+Project+Pad+Pack
  • Other - various other singles are included in seperate folder

• As of this writing almost all (2 songs from dailymotion) music/videos are stored in youtube

  • Missing songs were uploaded unlisted to my channel
  • Videos are played using https://www.npmjs.com/package/ngx-y2-player
    • Which in turn utilizes https://developers.google.com/youtube/iframe_api_reference

• WIP Audio segmentation, classification for simfile generation

  • tensorflow.js aka yamnet audio classication for mobile
  • peaks.js - BBC licence, strange licence, remove later
  • pulse.js stolen and rewriten to typescript
  • @mediapipe/tasks-audio - remove package as tensorflow is better

• WIP Serial on mobile

  • Tried https://github.com/google/web-serial-polyfill, partially working, ~~stolen~~copied locally and fixed