How we coded a Czech Spotify for Czech Radio

From 2019 to 2025, we spent nearly 4,000 hours coding the frontend for mujRozhlas, the web audio portal hosting Czech Radio's shows and podcasts. Both the website and the mobile app stream live broadcasts from every station. Listeners can rewind through broadcasts or look up recordings of any show. The biggest challenge was the live player, with its many specific features.

In 2019, Czech Radio put out a tender for a frontend vendor for its new project. mujRozhlas was conceived as an ambitious website combining live broadcasting with a database of shows, built to serve listeners of every genre and generation.

Thanks in part to our earlier work with Czech Radio on the iRozhlas.cz portal, we knew what we were getting into. We first won the public tender for phase 1 (development) of the project, and went on to succeed in the following phases too, so we still provide support and help out with planned new features.

The tender, and every brief that followed, was well set up, with realistically defined goals. Jirka Špaček, Czech Radio's project manager, definitely deserves credit for that — he knows his way around technology and, right from the start, connected all the parties working on the project. Thanks to that, we operated as one team.

Czech Radio had already outlined, in the tender brief, which technologies it wanted the site built on. That's what we used as our starting point when choosing frontend technologies. We knew, for example, that the site would be built on PHP and the Drupal CMS. To make implementation easier, we built the entire component library in the Twig templating language. We also used modern technologies like React and Redux throughout the project.

The most demanding part to develop was the player. Michal Matuška calls it Spotify, but unlike the popular app, it can also play live broadcasts. Developing it took 2,000 hours, and today live broadcasts make up 50% of all visits to the mujRozhlas site.

We built the player on React, which was the best fit given the interactivity requirements. On the technical side, we had to fine-tune the player so it would work across every browser on desktop, but especially on mobile devices, where we had to overcome a lot of performance challenges. We had to keep a close eye on both functionality and design.

The requirement was for the player to respond quickly, visually adapt as users browsed the site, and for the audio to keep playing continuously in the background. That lets users listen without interruption, even while browsing any show's page or looking for what to play next. Within the player, they can also scroll back through history, switch between shows, or build a queue.

While a live broadcast plays, there's another process running in the background — automatic live transcription. We didn't build the machine audio-analysis engine itself, but we did have to integrate an API that transcribes speech in sync with the broadcast and returns the text to the page in real time. Users can search the text for keywords to help find their way around.

There's one interesting quirk with the transcription — sometimes the text gets ahead of the host. That's because the broadcast on the site is delayed by about 7 seconds, while the transcription software only needs 5-7 seconds. So the transcript can occasionally appear before the audio itself does.

So Czech Radio could update the app on its own going forward, we built a large component library, which the client can now draw on when building new pages or categories. For example, when we were wrapping up phase 1 of the project, the Kids page wasn't live yet. Thanks to the component library, though, Czech Radio's own developers were able to put it together themselves — they just used the existing components for adding a new show, playback, and sorting into categories.

Another distinctive feature on the site is the broadcast schedule, which keeps updating in real time. Listeners can look back through past broadcasts or ahead at the schedule for the next few days, with the current show highlighted, along with a timeline. Clicking on any show expands to show its details.

We address accessibility on every website we build. Czech Radio, though, required special attention in this regard. We worked with consultant Radek Pavlíček, who analyzed whether the site was properly machine-readable, so that blind users could access the audio too and operate it.

The site had a lot of specific requirements — for instance, heavy emphasis was placed on being able to use the site with just a keyboard, which was a real puzzle in some places.