Jak jsme kódovali „české Spotify“ pro Český Rozhlas
březen 2023
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.
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 Twig PHP CMS Drupal 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.
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. 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.
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, 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
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.
Cookies na tomto webu slouží k personalizaci obsahu a reklam, poskytování funkcí sociálních médií a analýze provozu. Kromě toho sdílíme informace o vašem používání webových stránek s našimi partnery v sociálních médiích, reklamě a webové analytice, kteří je mohou kombinovat s dalšími informacemi, které jste jim poskytli nebo které shromáždili z vašeho používání jejich služeb.
Jednotlivé souhlasy
Nezbytné, aby stránky fungovaly
Nezbytné soubory cookie pomáhají učinit web použitelným povolením základních funkcí, jako je navigace na stránce a přístup do zabezpečených oblastí webu. Bez těchto cookies nemůže web správně fungovat.
Předvolby, abyste si mohli ukládat vaše nastavení
Předvolené soubory cookie umožňují webové stránce zapamatovat si informace, které mění způsob, jakým se web chová nebo vypadá, například preferovaný jazyk nebo oblast, ve které se nacházíte.
Analytika, abychom mohli stránky zlepšovat
Analytické cookies pomáhají majitelům webových stránek porozumět tomu, jak návštěvníci interagují s webovými stránkami, a to anonymním shromažďováním a hlášením informací.
Marketing, aby se vám nezobrazovala reklama, která vás nezajímá
Marketingové cookies se používají ke sledování návštěvníků napříč webovými stránkami. Záměrem je zobrazovat reklamy, které jsou pro jednotlivého uživatele relevantní a poutavé, a tím cennější pro vydavatele a inzerenty třetích stran.