Video + Audio Conversion Tool [Showcase]

Arcade Show & Tell
1

:clapper_board::musical_note: Video + Audio Converter for MakeCode Arcade

Hey everyone!

I’ve built a browser-based tool that converts videos AND audio into MakeCode Arcade format. Drop in a video clip, and get ready-to-paste code with both the frames and polyphonic audio!

Great for:

  1. Recording your own audio and getting it into MakeCode Arcade
  2. Creating your own video cutscenes
  3. Record your own videos and audio and get them into MakeCode Arcade!
  4. Using video clips with their real audio

Not great for:

  1. Projects intended to be flashed on a device like a Meowbit as the files will be too big.

:link: Try it here: LINK

:laptop: Demo Project:

arcade-Video-and-Audio-Converter
arcade-Video-and-Audio-Converter512×424 58.5 KB

What it does

Video → MakeCode Frames

  • Converts to MakeCode’s 16-color palette

  • Three dithering modes (Floyd-Steinberg works great!)

  • Handles aspect ratio conversion (16:9 YouTube → 4:3 Arcade)

  • Configurable FPS and dimensions

Audio → Polyphonic Sound

  • Uses spectrogram analysis with 20 frequency bands

  • Outputs code using queuePlayInstructions()

  • Actually sounds like the original audio (not just beeps!)

  • Works with video audio tracks OR standalone MP3/WAV files

Flexible Workflow

  • Video + Audio: Full conversion with synchronized playback code

  • Audio-only from video: Skip the frames, just get the audio

  • Export as WAV: Extract audio clips from videos

  • Direct audio upload: Convert MP3/WAV/OGG files directly

Quick Demo

  1. Open the tool

  2. Drag & drop a short video clip (under 10 seconds works best)

  3. Adjust settings if needed

  4. Click Convert

  5. Copy the code into MakeCode (under the Javascript editor)!

Tips

  • Keep clips short — 5-10 seconds is the sweet spot for memory and processing

  • Floyd-Steinberg dithering gives the best results for most videos

  • Increase gain if your audio sounds too quiet in MakeCode

Credits

The audio spectrogram approach was inspired by HomeAssistantTycoon’s Audio-to-MakeCode-Arcade project, forked from @UnsignedArduino . I wrapped it into a browser-based tool with video support and a bunch of extra features.

Feedback Welcome!

This is my first release, so let me know if you run into any issues or have ideas for improvements. Would love to see what you create with it!

The source code is on GitHub: HERE

Happy converting! :video_game:

15 Likes
Chatting Area! Have fun!
2

This is a great compilation of tools!! :smiley:

7 Likes
4

WOW, instant bookmark! I can’t believe this! Now I can finally make off brand YT on makecode!!

5 Likes
5

You would not believe how long I’ve been waiting for this.

3 Likes
6

This is awesome. Of course it glitches my workspace with the big code for longer videos, but i gotta say:

IMG_0530
IMG_0530600×450 54.1 KB

3 Likes
7

wach this! https://arcade.makecode.com/S28941-84717-25861-22807

5 Likes
8

this is sick!!!

4 Likes
9

That’s awesome! Now you’ve got an array of the frames into the editor, you could always do something like: record the ball bounce, cut the ball out from each of the frames by tidying them up or resizing them, and then have it as a sprite-kind over the top of your game. Maybe a giant tennis ball comes crashing through Makecode arcade’s pixel town?

Have a play around with some of the features like this one when you convert your video, and the other dithering tools there too:

image

4 Likes
10

Enable dithering:

image

Results much good-er :stuck_out_tongue:

7 Likes
11
2 Likes
12

you should add ostromoukhov dithering

2 Likes
13

Question for the mods, How Many Seconds/Frames Are Yall Willing to do or what’s The Limit?

2 Likes
14

W Tool, Thank you for making this. It will really help advance my projects.

2 Likes
15

I Had A Idea And It Was Not Good, We Are! By Hiroshi Kitadani

2 Likes
16

If you’re looking to flash something onto a device such as a Meowbit, then you’re probably looking at just 13 frames, for about 1.3 seconds of video.

If it’s a web-browser based project intended for use on PC: go nuts :smiling_face:

1 Like
17

Nice! For practical uses of the audio tool, I recommend clear speech in a quiet room.

Perhaps record yourself saying things like, “Level One: Start!” And use that audio clip.

1 Like
18

Thanks, pal!

I’ve made a hub page for all the tools/extensions I’ve made so far, and I’ll add to this as new ones come out

Link: HERE

3 Likes
19

Nah, Tried Putting Goku Turning Super Saiyan for the First Time and it took up too much mod time/they didnt want to do that much. I talking about the fourm as well

1 Like
20

I’ve added that too now :slight_smile:

Oh, and it also handles images now as well :slight_smile:

1 Like
21

I Have A Request, can you make it so you can imput a custome Palette for the Images or Videos? Maybe like “Most Common 16 colors” In each frame? Dont gotta put it but it’d look so cool