Last updated:

Designing a Fullscreen Subtitles System for SoundCloud to embed my Audio Fiction Podcast Translation

Hi everyone,

Have you ever felt the need to subtitle and translate your podcast ? So do I!

I run a french audio fiction called Alien 2347,  and I was in need to bring subtitles and translation to my listener. To do the thing even better, I wanted it to be fullscreen, for better readability and to avoid distraction. More I wanted a simple colored vignette system to tell the listener who is speaking (one color per character).

I realized this by coding for the Soundcloud Player API. I detailed how I did this in this french article Sous-Titrage et Traduction de l’Épisode 1, Click if you want to see a demo!

You can also just check this prototype I made, though the final version available above is way more polished, as it has a language switcher, it doesn’t work with embedded transcripts, and has cross-platform friendly icons etc…

See the Pen
SoundCloud Widget API – Subtitles and Interactive Transcripts (Fullscreen)
by X-Raym (@X-Raym)
on CodePen.

The hardest part wasn’t really designing the system, though it had some challenges, but to actually find an effective workflow to do my text sync and do the translation. Of course, it involves REAPER, as it is main audio software, and it allows to write some convenient scripts to speed up the process.

You can now enjoy the first episode of my fiction with english subtitles! And I’ll be very glad if you do. 😛

I may at some point pack this as a premium WordPress plugin if it get some attention, just like my YouTube Transcript plugin.

Anyway, thanks for listening!