Jak jsme kódovali „české Spotify“ pro Český Rozhlas

Od roku 2019 jsme téměř 4 000 hodin kodóvali frontend pro webový audioportál mujRozhlas, na kterém jsou k dispozici pořady a podcasty Českého rozhlasu. Na webu i v mobilní aplikaci běží živé vysílání všech stanic. Ve vysílání se posluchači mohou vracet v čase nebo vyhledat záznamy všech pořadů. Největším oříškem byl pak živý přehrávač s mnoha specifickými funkcemi.

V roce 2019 bylo vypsáno výběrové řízení na dodavatele frontendu pro nový projekt Českého Rozhlasu. mujRozhlas vznikal jako ambiciózní web s živým vysíláním i databází pořadů, který poslouží posluchačům všech žánrů i generací.

I díky předchozí spolupráci s Českým Rozhlasem na portálu iRozhlas.cz jsme předem věděli, do čeho jdeme. Nejprve jsme vyhráli veřejnou zakázku na 1. (vývojovou) fázi projektu. Následně jsme uspěli i v dalších fázích, takže poskytujeme servis a pomáháme s plánovanými novinkami.

„Výběrové řízení i každé zadání bylo dobře nastaveno a cíle byly realisticky definované. Tomu určitě přispěl projekťák Rozhlasu Jirka Špaček, který se v technologiích vyzná a hned v úvodu vzájemně propojil všechny strany, které na projektu spolupracovaly. Fungovali jsme díky tomu jako tým.”

Michal Matuška,
team-leader projektu za SUPERKODERS

Rozhlas už v zadání veřejné zakázky předestřel technologie, na kterých chce web stavět. Od toho jsme se odpíchli při volbě technologií pro frontend. Věděli jsme například, že web bude stavěný na PHP a CMS Drupal. Abychom usnadnili implementační část, celou knihovnu komponent jsme chystali na templatovacím jazyku Twig. V projektu jsme dále používali moderní technologie React a Redux.

React Twig PHP CMS Drupal Redux

Vývojově nejnáročnější částí byl přehrávač. Michal Matuška mu říká Spotify, ale oproti populární aplikaci umí navíc i přehrávání živého vysílání. Jeho vývoj zabral 2 000 hodin a dnes tvoří živé vysílání 50 % všech návštěv webu mujRozhlas.

Přehrávač jsme postavili na Reactu, který byl vzhledem k požadavkům na interaktivitu nejvhodnější. Přehrávač jsme museli po technické stránce vyladit tak, aby fungoval na desktopu ve všech prohlížečích, ale hlavně na mobilních zařízeních, kdy jsme museli překonat mnoho výkonnostních výzev. Pohlídat jsme si museli funkčnost i design.

Požadavkem bylo, aby přehrávač reagoval rychle, vizuálně se přizpůsoboval při procházení webu a audio neustále hrálo na pozadí. Uživatel díky tomu může nerušeně poslouchat, i když si prohlíží stránku kteréhokoliv pořadu nebo hledá, co dalšího si pustí. V rámci přehrávače se může také posouvat do historie, přepínat mezi pořady nebo vytvořit frontu.

Při přehrávání živého vysílání na pozadí běží ještě jeden program – automatická transkripce živého vysílání. Samotnou strojovou analýzu audia jsme neprogramovali, ale museli jsme se napojit na api, které synchronně s vysíláním přepisuje hovor a v reálném čase vrací text na stránku. V textu lze pro lepší orientaci vyhledávat klíčové výrazy.

S přepisem textu se pojí jedna zajímavost – někdy text předběhne moderátora. Je to tím, že vysílání na webu je zpožděné přibližně o 7 vteřin, ale software k přepisu textu potřebuje jen 5–7 vteřin. Někdy se tak přepis zobrazí dřív, než se přenese zvuk.

Aby si Rozhlas mohl do budoucna aktualizovat aplikaci svépomocí, vytvořili jsme velkou knihovnu komponent, ze které teď klient může vycházet při tvorbě nových stránek nebo kategorií. Když jsme například dodělávali 1. fázi projektu, ještě nebyla v provozu stránka Pro děti Externí odkaz . Díky knihovně komponent si ji však programátoři Rozhlasu mohli jednoduše poskládat sami. Jen využili existující komponenty pro přidání nového pořadu, přehrávání nebo třídění do kategorií.

Jedním z dalších specifických prvků na webu je program vysílání Externí odkaz , který se v čase neustále aktualizuje. Posluchači mohou nahlédnout do historie i plánu vysílání na nejbližší dny, přičemž aktuální pořad vidí zvýrazněný i s časovou osou. Když na kterýkoliv pořad kliknou, rozbalí se podrobnosti.

Přístupnost řešíme u každého webu. Český Rozhlas ale vyžadoval v tomto ohledu speciální péči. Spolupracovali jsme s konzultantem Radkem Pavlíčkem Externí odkaz , který analyzoval, jestli je web dobře strojově čitelný, aby se k audiu dostali i nevidomí a mohli ho ovládat.

Web měl mnoho specifik – například byl kladen velký důraz na použití webu jen pomocí klávesnice, což byl na některých místech oříšek.

„Největším benefitem a důkazem dobré spolupráce pro mě je to, že spolupráce běží pořád dál. Stále pracujeme na vylepšování přehrávače a chystáme nové funkce.”

Michal Matuška,
team-leader projektu za SUPERKODERS