A sorozat első részében építettünk egy weboldalt. A másodikban egy élő Bitcoin árfolyamfigyelő alkalmazást tettünk a telefonunkra. Most pedig életre keltjük a tartalmat. Sokan szeretnének saját podcastot, de elrettenti őket a drága mikrofon, a vágóprogramok és a lámpaláz. Mi lenne, ha azt mondanám, hogy a Google új eszközeivel bármilyen szövegből készíthetsz egy profi és kétemberes rádióműsort? És mindezt egy saját és egyedi lejátszóban teheted ki az oldaladra.
A mai leckében két Google eszközt házasítunk össze. A NotebookLM lesz a tartalomgyártó, vagyis a hang, a Google AI Studio pedig a fejlesztő, vagyis a lejátszó. A végeredmény egy olyan rendszer, amivel percek alatt gyárthatsz friss tartalmat az oldaladra vagy a közösségi médiába.
Előkészületek
Szükséged lesz a Google-fiókodra, egy szöveges fájlra, ami lehet egy PDF vagy egy Word doksi, amiből a műsor készül, és a már ismert Google AI Studio felületére.
1. lépés: A hanganyag elkészítése a NotebookLM segítségével
Először a hangot kell legyártanunk. Ehhez a Google NotebookLM nevű eszközét használjuk, ami zseniálisan érti a szöveget, és képes róla beszélgetni.


- Nyisd meg a
notebooklm.google.comoldalt. - Kattints a NotebookLM kipróbálása gombra, ezután közvetlenül nyomj az Új jegyzetfüzet létrehozására.
- A bal oldalon töltsd fel a forrásodat. Ez lehet egy PDF dokumentum, egy weboldal linkje, vagy akár egy bemásolt szöveg. Például másold be ennek a cikksorozatnak az első részét.
- Miután feltöltötted, keresd meg a „Hangos áttekintés” (Audio Overview) rész jobb felső sarkában lévő kis szerkesztő ikonra. Itt állíthatod be a podcast adásod részleteit: nyelv, hossz, mire helyezze a fókuszt a beszélgetés. Ha ezzel megvagy kattints a Generálás (Generate) gombra.


A rendszer most egy mélytanuló modell segítségével feldolgozza a szöveget, és generál belőle egy izgalmas és párbeszédes formátumú műsort két mesterséges intelligencia műsorvezetővel. Ez pár percet igénybe vehet. Ha kész, töltsd le az audio fájlt a három pöttyre kattintva a Download opcióval.
2. lépés: A hangfájl előkészítése
Ahhoz, hogy a lejátszónk működjön, a hangfájlnak elérhetőnek kell lennie az interneten. A kódnak tudnia kell, honnan töltse be a zenét.
Ha van saját weboldalad, töltsd fel a médiatárba, és másold ki a fájl linkjét. Ha nincs, használhatsz bármilyen ingyenes fájlmegosztót, ami közvetlen linket ad (direct link). A lényeg, hogy legyen egy olyan linked, ami .mp3 vagy .wav kiterjesztésre végződik.
3. lépés: Az egyedi lejátszó megtervezése
Most jön a fejlesztés a Google AI Studio felületén. Egy sima szürke lejátszó unalmas lenne, ezért mi egy modern lejátszót kérünk a mesterséges intelligenciától.
Másold be az alábbi promptot a Google AI Studio-ba.
„Készíts egy modern és beágyazható Audio Lejátszó komponenst (Audio Player Widget) HTML, CSS és JavaScript nyelven egyetlen fájlban.
Dizájn A téma legyen sötétkék és neon kék (#00f2ff) futurisztikus stílusban. A lejátszó kártya legyen lekerekített és árnyékolt. Tartalmazzon egy Lejátszás és Szünet gombot, egy folyamatjelző sávot (progress bar), és az eltelt időt. Helyezz el egy látványos hanghullám (waveform) animációt, ami mozog, amikor szól a zene.
Működés A lejátszó ezt a hangfájlt játssza le [IDE ILLESZD BE A SAJÁT LINKEDET AZ ELŐZŐ LÉPÉSBŐL]. Legyen reszponzív, tehát mobilon is nézzen ki jól.”
Nyomd meg a Run gombot.


4. lépés: Beillesztés és élesítés
Most már van egy kész kódod. Ezt kétféleképpen használhatod.
- Önálló oldalként: Ugyanúgy, mint az előző részben a Bitcoin appnál, másold ki a kódot, mentsd el
podcast.htmlnéven, és húzd be a Netlify Drop oldalra. Így lesz egy külön oldalad, amit elküldhetsz az ismerőseidnek ezzel a szöveggel „Hallgasd meg az új adást itt”. - Beágyazva a meglévő oldaladba: Ha megvan még a weboldalad kódja az 1. részből (
index.html), akkor nyisd meg Jegyzettömbbel. Keresd meg azt a részt, ahova a lejátszót szeretnéd tenni, és egyszerűen másold be a most kapott kódot a szövegek közé. Mentsd el, és frissítsd az oldalt. A mivagyunk.hu szerkesztőségében ezt a lehetőséget választottuk.

A tartalomgyártás új korszaka
Ezzel a háromrészes sorozattal eljutottál a nulláról oda, hogy képes vagy weboldalt építeni, élő adatokat kezelni és multimédiás tartalmat gyártani. Mindezt teljesen ingyen és a Google eszközeivel. Ez a módszer tökéletes arra, hogy a blogbejegyzéseidet hangoskönyvvé alakítsd, vagy a céges hírleveleket emészthető rádióműsorrá formáld.
Köszönjük, hogy velünk tartottál ebben a mesterkurzus sorozatban. Reméljük, sikerült bizonyítanunk, hogy a fejlesztés ma már nem csak a programozók kiváltsága. Ne felejtsd el elmenteni a cikkeinket, mert ezek a promptok bármikor jól jöhetnek a jövőben.




