MLB Montage Maker

Turn Baseballs into Beat-Balls! Create dynamic MLB montages synced to music using AI! Because let's be honest, sometimes baseball games need a little... oomph.

Comment

Inspiration: Beat-Syncing Reels & Baseball

So, I'm that person who spends way too long making Instagram Reels, trying to get those video cuts perfectly in sync with the music. It's a black hole of time-tweaking timestamps, frame-by-frame... Seriously, there HAD to be a better way to unleash my inner montage maestro without losing my sanity.

Then came the idea of baseball. Baseball games have exciting moments. What if those moments could be set to music? And what if an AI could help make it fast?

That's how MLB Montage Maker started! The goal was to make it easy for anyone to create cool baseball videos with music, even without video editing skills.

What It Does: Baseball + Beats = 🔥 Montages!

MLB Montage Maker is your super-easy website for turning baseball games into music-powered highlight reels. A baseball game and a song are chosen. Then, the website makes a video that matches the music.

Here's how it works:

  1. Pick a Game: Click a game from a list. Easy!
  2. Pick Music: Upload a song or choose one from the website.
  3. Tap the Beat (If You Want): Click along to the music on the screen. This helps the video match the music even better.
  4. Make Montage!: Click a button, and the computer does the rest. It uses Gemini AI to find key moments and ffmpeg to make the video.

If you like baseball, music, or cool videos, MLB Montage Maker is for you! It makes it possible to create awesome baseball videos with music in just a few minutes.

How It Was Built: Vanilla JS + AI Wizardry

MLB Montage Maker is a website designed to be easy to use but with Ol' Reliable technology behind it.

Website Part (What You See):

Kept it classic with vanilla JavaScript, HTML, and CSS. No fancy frameworks needed for this party! Kept it lean and mean for speed. Big shoutout to these frontend heroes:

  • hls.js: Makes those MLB game videos stream smooth as butter.
  • wavesurfer.js: That cool waveform thingy for marking beats? Yeah, that's wavesurfer.
  • canvas-confetti: Because who doesn't love digital confetti when your montage is done? 🎉

Backend Brains (What You Don't See):

The website uses Google VPS(Virtual Private Server) to make the videos:

  • Google Cloud: Provides fast computers on the internet.
  • Google Gemini AI: The AI brain! Gemini watches the baseball game and figures out the awesome bits to use in your montage.
  • FFmpeg: The video editing ninja. FFmpeg chops, slices, dices, and glues the video and audio together. It's the real MVP of video processing.
  • multer: Helps with uploading music to the website.

The website sends requests to this server. It uses Gemini AI and ffmpeg to create the montage video!

Challenges: FFmpeg, AI Prompts, and Cloud Computers

Making MLB Montage Maker had some tricky parts:

  • FFmpeg Tool: The video tool (FFmpeg) is very powerful, but hard to use if you are not familiar with it. Making it cut and sync videos correctly was difficult. Instructions were read, many approaches were tested, but the Gemini AI was BY FAR the most helpful.

  • Gemini Prompt: Turns out, AIs aren't mind-readers (yet). Getting Gemini to consistently pick out the right baseball highlights for a montage? Needed some serious prompt-whispering. It needed to be taught what to look for. Lots of tweaking prompts, testing different AI "instructions," and making sure the AI wasn't just highlighting squirrels in the stands. :P

  • Cloud Computers: Google Cloud is awesome, but setting up the backend server and making sure everything played nicely together took some time. Instructions were consulted, online help was sought, and effort was put into fixing problems.

  • Hackathon Time Crunch: Had to make tough choices on features to keep it real. The most important things had to be prioritized to make it work. I focused on making the core features work first, with extra features saved for later.

Things That Were Done Well! 🎉

Despite of the time crunch, the project achieved some great things:

  • Full Website: Built the whole thing, frontend to backend, AI to video processing, from zero to hero in hackathon time.
  • AI Beat-Sync: Gemini AI + beat syncing actually WORKS! AI-powered, music-synced baseball montages are now a thing!
  • Beat Editor Bliss: Made a beat editor that's (hopefully) not rage-inducing. You can actually tap beats and make it your own!
  • Usable Online: The website is accessible online for anyone to create their own videos!
  • Valuable Learning: Learned a TON about full-stack dev, AI, video stuff, and cloud wrangling. Basically, leveled up my dev skills big time.

What's Next? Montages for EVERYONE!

MLB Montage Maker is just the beginning. There are plans to make it even better:

  • Smarter AI: Make Gemini even smarter at picking highlights. Think AI video analysis on steroids!
  • More Customization Goodies: Transitions, effects, beat-sync intensity sliders, text overlays – let's give users ALL the knobs and dials.
  • More Sports: Baseball is cool, but let's montage ALL the sports! Basketball, soccer, hockey... Montage-ify the world!
  • Speed Boost & Scale Up: Make it faster, stronger, handle more users, more montages, MORE EVERYTHING!
  • Montage Community? Imagine sharing your epic baseball beat-downs with the world? Maybe a montage-sharing social thing? Hmm...

Basically, the plan is to turn MLB Montage Maker into THE go-to platform for ridiculously awesome, beat-synced sports montages. Stay tuned!

Share this project:

Updates