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.

StatusPrototype
CategoryOther
PlatformsHTML5
Rating
Rated 5.0 out of 5 stars
(1 total ratings)
AuthorFodi
Made withConstruct
Code licenseMIT License
Asset licenseCreative Commons Zero v1.0 Universal
Average sessionA few seconds
InputsMouse, Touchscreen

Download

Download NowName your own price

Click download now to get access to the following files:

YouTubeTest-v2.c3p 89 kB

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

(1 edit)

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.

(+1)

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! :-)