schwwaaa

Posted on Jun 5

Building a No-Server M3U Playlist Builder for DIY Broadcasts

#webdev #opensource #tooling #javascript

We built Drop Zone Ops, a client-side M3U playlist builder for DIY broadcasters who need to assemble playlists for VLC and OBS without running a server, installing an app, or editing playlist files by hand.

Repo: https://github.com/schwwaaa/drop-zone-ops
Live builder: https://schwwaaa.github.io/drop-zone-ops/

The project started from a very practical problem: .m3u playlists are simple, but building them manually gets annoying fast.

Once you start mixing local videos, remote URLs, bumpers, interstitials, commercial breaks, and longer programming blocks, a plain text playlist becomes easy to break and hard for collaborators to understand.

Drop Zone Ops turns that workflow into a small browser-based tool.

What it does

The basic workflow is:

Open the app in a browser.
Set a local base path if you are using local media.
Drop files, browse for local files, or paste remote URLs.
Reorder the playlist visually.
Tag items as content, commercial, bumper, or interstitial.
Import from CSV or JSON if needed.
Export a clean .m3u playlist.
Load it into VLC or OBS's VLC source.

The goal is not to replace OBS or become a full scheduling platform. It is meant to sit before OBS and make the preparation layer less fragile.

Local files and remote URLs

A key feature is the local base path.

If you are preparing local media, you can set a root folder path like:

/Users/yourname/Videos/content/

or on Windows:

C:\Users\yourname\Videos\content\

When local files are added, Drop Zone Ops can prefix them with that path when exporting the playlist.

Remote URLs are handled differently. HTTP and HTTPS links pass through untouched, which makes it possible to mix local media with hosted clips from places like S3, Dropbox, or another remote source.

That mixed local/remote workflow was one of the reasons I wanted the tool to exist.

Tags make the playlist easier to operate

For broadcast use, playlist items usually have roles:

content — main programming
commercial — ad spots
bumper — station IDs, intros, outros, return-from-break clips
interstitial — transitions or filler material

Drop Zone Ops lets each item carry a tag. That makes the playlist easier to scan, sort, and reason about before export.

This is small, but useful. The playlist stops being just “a list of files” and starts behaving more like a broadcast block.

CSV and JSON import

Sometimes the playlist already exists somewhere else: a spreadsheet, a planning doc, or a generated data file.

Drop Zone Ops supports CSV and JSON imports.

Example CSV:

path,name,duration,tag,group
/Users/yourname/Videos/episode-01.mp4,Episode 01,22:30,content,block-1
https://your-bucket.s3.amazonaws.com/ad.mp4,Soda Ad,0:30,commercial,ad-break-1

Example JSON:

[
  {
    "path": "/Users/yourname/Videos/episode-01.mp4",
    "name": "Episode 01",
    "duration": "22:30",
    "tag": "content",
    "group": "block-1"
  }
]

That makes the tool useful both as a manual editor and as the final step after another planning process.

Commercial injection

The larger feature is the Commercial Injection panel.

Instead of manually placing every ad, bumper, and break, you can define a commercial library and a set of rules. The injector reads the current playlist, applies the rules, previews the merged result, and updates the playlist before export.

The selection modes are intentionally simple:

random picks ads randomly from the library
sequential cycles through the library in order
specific uses exact clips from the template

This is useful for a small broadcast operation that does not need a full traffic system, but does need repeatable breaks.

For example: after every two content items, insert one or two ads and a return bumper.

The exported playlist

The final output is still just an .m3u file.

#EXTM3U
#EXTINF:1350 group-title="block-1" tvg-type="content",Episode 01
/Users/yourname/Videos/episode-01.mp4
#EXTINF:30 group-title="ad-break-1" tvg-type="commercial",Soda Ad
https://your-bucket.s3.amazonaws.com/ad.mp4
#EXTINF:8 group-title="ad-break-1" tvg-type="bumper",And We're Back
/Users/yourname/Videos/back-bumper.mp4

The point is that the user does not need to hand-maintain this format. They can work visually, then export the playlist when it is ready.

Why I kept it client-side

For this project, a no-server browser app made sense.

It keeps the workflow portable. You can open the file, build the playlist, export the result, and hand it to OBS or VLC. No backend. No login. No install step.

That also makes the tool easier to share with collaborators who just need to assemble a block and export the file.

It is not a full broadcast database or multi-user scheduler, and that is fine. It solves one specific problem: making M3U playlist creation less painful for DIY broadcast workflows.