Přejít k obsahu Přejít k hlavnímu menu

SUPERKODERS

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

6 let spolupráce

4k hodin odpracovaného času

300k uživatelů měsíčně

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.

Ukázka webu MůjRozhlas

Navštívit MůjRozhlas Externí odkaz

Výběrovým řízením
k příjemné spolupráci

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

Stavěli jsme
na technologiích,
které spolu fungují

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 React Twig Twig PHP PHP CMS Drupal CMS Drupal Redux Redux

„České Spotify“
pro mujRozhlas

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.

Ukázka přehrávače

Přepis vysílání

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.

Vyvinuli jsme komponenty
k opakovanému využití

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í.

Ukázka Storybooku

Živý program
pořadů

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.

Ukázka programu

Důraz na přístupnost
pro handicapované uživatele

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

Co říká klient?

„mujRozhlas musí odpovídat moderním standardům. SUPERKODERS dělají frontend správně, dynamicky, rychle a spolehlivě. Vybrat vhodné technologie je jejich práce a tu plní skvěle.”

Jiří Špaček,
projektový manažer Českého Rozhlasu

Co je MůjRozhlas

Podcasty, rozhovory, audioknihy, pohádky, sport, rozhlasové hry nebo historické nahrávky. Audioportál Českého rozhlasu se vším, co chcete slyšet.

Navštívit MůjRozhlas Externí odkaz

Rádi pomůžeme i vám!

Vyvineme pro vás e‑shop, web či aplikaci, nebo se jen nezávazně potkáme a pobavíme o možnostech spolupráce. V každém případě se nám ozvěte.

Tomáš Hejč | CEO +420 603 273 833 tomas.hejc@superkoders.com

Tomáš Hejč