Construct 3 + YouTube embed beat sync experiment
I wanted to see if it's possible to do stuff inside a Construct 3 game in sync with the beat of song playing inside a YouTube embed.
How this works:
First of all we need need to grab some audio from YouTube and make a beatmap for it that look like this:
0.441179 0.870748 1.30032 1.72989 2.15946
...et cetera. Essentially a TXT file that contains timestamps of the beats. If you're lazy like me, you can use yt-dlp to download a video and convert it to WAV, then you might want to buy Crypt of the NecroDancer on Steam, install the Windows version and find beattracker.exe inside the data\essentia folder and pass it the WAV file to get a pretty decent beatmap (depending on the song of course).
The project loads the YouTube IFrame API and the pre-prepared beat map, starts playing the video and constantly monitors the playhead's position to check for nearby beats. That's about it. Oh and you can seek too.
You can grab the project source file, license is MIT.
Status | Prototype |
Category | Other |
Platforms | HTML5 |
Rating | Rated 5.0 out of 5 stars (1 total ratings) |
Author | Fodi |
Made with | Construct |
Code license | MIT License |
Asset license | Creative Commons Zero v1.0 Universal |
Average session | A few seconds |
Inputs | Mouse, Touchscreen |
Download
Click download now to get access to the following files:
Comments
Log in with itch.io to leave a comment.
Nice experiment, I thought to try it with YouTube as well, but so far I did it only with audio files on mobile. Would you be able to get more data from YouTube audio?
This is what I made:
https://biim-games.itch.io/galassia-audio-player
I’m pretty sure that grabbing only the audio stream from a YouTube video (especially without a subscription) is a bit of a grey area at least (or it might break ToS, not sure). YT-DLP does it, NewPipe on Android does it (it allows video/audio downloads, playing with locked screen, etc), but I’m not aware of a solution that does it in a browser with purely client side JS. Then again, if you’re making an Android app, there’s probably a way to hack together a Cordova plugin that grabs the audio stream and passes the URL to the JS runtime. NewPipe is open source, so you can probably check out how it does it.
I see, then I will just pass it. I thought that since I can embed the videos in C3, at that point I can just use the analyzer somehow form the video. I wouldn't be bother to do complicated and risky things, I have already enough project to follow :D
Thank you for the detailed reply! :-)