Klippr

Create a music video from a Beatport or Traxsource track URL

Visit Website
March 29, 2019 Time for Klippr to grow up

After 2 years and 2,200 videos I decided it's finally time for Klippr to become a fully-fledged web-app. As you can imagine, I have a fairly extensive list of extra features I've thought of over the last 2 years.

I'll be turning Klippr into a structured web application with user accounts, more video features, supporting more providers and allowing custom uploads. It will still all be free to begin with, as I figure out what value my users are getting out of Klippr.

Currently deciding whether to build it out as a Node/Express app, run the whole thing on Firebase (they have all the moving parts required - auth, database, functions, hosting) or whether I should go back to the old familiar Ruby on Rails.

Comment

March 27, 2019 Breakdown of stats and costs
  • Videos created = 2,200+
  • Beatport = 27%
  • Traxsource = 73%
  • Average video size = 2.8MB
  • S3 bucket size = 6.4GB
  • S3 storage cost = 5ยข per month
  • Webtask cost = $0 (free plan)
  • Mailgun emails cost = $0 (free plan)

Total monthly running cost = $0.05

Comment

January 6, 2019 2,000 videos!

After 2 years of operating silently and (mostly) seamlessly, Klippr produced it's 2,000th video!

Comment

December 28, 2017 Launch!

I launched this quietly, almost privately, to a bunch of my music producer and record label friends. I assumed the Webtask function would crumble on first use or the videos would come out corrupted or the user would never receive the emails and be left wondering where their video was.

Fortunately none of these things happened. A handful of folks tried it and have used it regularly ever since!

Everything works well. It's not performant. It's not scalable as-is. It's nothing more than a single-feature web app but it solved my problem and a few other folks are benefitting from it too. ๐ŸŽ‰

Comment

December 24, 2017 Simplest web app ever

I built a single page site using Carrd.co with a 2-field form asking for the user's email address and the track URL.

The form sends both pieces to the Webtask function. The function grabs the asset URLs from the track URL, downloads them, runs the FFMPEG command and uploads the resulting video to AWS S3.

Then it sends an email to the user with a link to download the video. Easy peasy!

Comment

December 23, 2017 Simplest MVP ever.

I looked at Serverless, Firebase Functions, Google Cloud Whatever, Digital Ocean Droplets and all the rest but finally decided to run this single, simple function on Webtask.io. It's a free service, within limits, and best of all for me - I could create and edit the code right in their web editor.

You get a simple URL to hit to run the function. I wrapped my function in a barebones Express app so I could easily respond to POST requests with the Beatport or Traxsource track URL as a parameter.

Comment

December 22, 2017 The joy of XML

Neither Beatport nor Traxsource have a public API but the assets I need exist on their web pages for each music track. I just had to write a function to load the page, grab the links to the assets, download those assets and feed them into FFMPEG.

Some of it was easy, some of it was XML (read, horribly difficult).

At first I wasn't caching any of these assets so multiple requests for videos of the same track required whole separate trips to the web page and runs of the FFMPEG command but I'm working on caching the assets so further requests for the same video are returned instantly. Besides, my hits to their pages through Klippr were tiny in comparison to their overall traffic so I wasn't concerned about that.

Next challenge was where to run this almighty function.

Comment

December 20, 2017 Start as simple as possible.

Now I had my FFMPEG command that will turn an image and audio clip into a shareable MP4 video I wanted to enable others to use it.

I originally planned to build a web app that would allow visitors to upload their own image, or create one with built-in backgrounds and text-editing tools, and add their audio, possibly with some basic editing controls for length, fades, etc.

Dozens of tests and demos in CodePen later I decided this was too much for a first version. I thought about it laterally and realized tat these assets already exist on URLs on the web - in the individual track pages of music retail sites like Beatport and Traxsource.

Next job was to write code to grab these assets and feed them into my custom FFMPEG command.

Comment

December 10, 2017 Everything is a function

After wrestling with image editors, trimming audio clips and squishing the two together in a video editor I decided to try to create a single FFMPEG command that would do the whole process for me. After a lot of head-scratching and Stack Overflow'ing I finally had a long-ass FFMPEG command that would take in a PNG image and a WAV audio clip and spit out an MP4 video. Huzzah!

Comment

December 1, 2017 Scratching my own itch

As a music producer and record label owner I was always opening a bunch of image, audio and video editing tools to create simple 60-second videos to share on social media. I wanted something much simpler.

Comment

About

As a music producer and record label owner I was always opening a bunch of image, audio and video editing tools to create simple 60-second videos to share on social media. I wanted something much simpler.