Dokumentáció

Bevezető Médialejátszó Hálózati lejátszó Vizualizáció Média információ

Bevezető

Korábban már volt szó a FreeMedia szkriptek integrálásáról, mely médialejátszó(ka)t hoz létre egyszerű beágyazással saját weboldalunkba, ahol kedvenc zenéinket, rádióállomásainkat oszthatjuk meg vagy hallgathatjuk saját magunk.

<script src="https://freemedia.hu/js/media.umd.min.js" type="text/javascript"></script>  <script src="https://freemedia.hu/js/visual.min.js" type="text/javascript"></script>

Fontos: a fájlok tartalmazhatnak olyan összetevőket, stílus-formázásokat, melyeket más fájlok felülírhatnak, ezért javasolt a <head></head> utolsó sorába illeszteni, az első <body></body> cimke elé.

<head> <... egyéb fájlok ...> <script src="https://freemedia.hu/js/media.umd.min.js" type="text/javascript"></script> </head>

A fájlok létrehozásánál ügyelve lett arra, hogy egyszerre több lejátszót is létre lehessen hozni ugyanazon az oldalon, különböző médiatartalommal, de ugyanakkor bizonyos funkciókat összekapcsolva.

<head> <script src="https://freemedia.hu/js/media.umd.min.js"></script> </head> <div id="audio-container"></div> <div id="video-container"></div> <script> window.onload = () => { createMediaPlayer({ containerId: "audio-container", mediaType: "audio" }); }; window.onload = () => { createMediaPlayer({ containerId: "video-container", mediaType: "video" }); }; </script> >>> VAGY <<< <div id="radio-1-container"></div> <div id="radio-2-container"></div> <script> window.onload = () => { createStreamingPlayer({ containerId: "radio-1-container", url: "https://freestream.hu", port: 8000, mountpoint: "ebm_radio", platform: 1, showVisual: true, visualType: "spectrum", spectrumStyle: "mirror-outline" // Vizualizáció stílusa -> classic (alapértelmezett), rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, mirror, mirror-inline, mirror-outline }); }; window.onload = () => { createStreamingPlayer({ containerId: "radio-2-container", url: "https://freestream.hu", port: 8340, mountpoint: "ebm", platform: 2, showVisual: true, visualType: "wave", waveStyle: "inline" // Vizualizáció stílusa -> classic (alapértelmezett), rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, inline-prism, outline-prism }); }; </script> <-- Médiatípus (mediaType) megadása a createStreamingPlayer({...}) esetében nem kötelező -->

Mik ezek a funkciók?

Mutual Exclusive Playback: (Kölcsönös exkluzív lejátszás) amikor több médiaelem (pl. <audio> vagy <video>) van egy oldalon, és egyszerre csak egy szólalhat meg, akkor:

amikor egyik elindul, az összes többi automatikusan leáll
ez megelőzi, hogy a felhasználó több hangot halljon egyszerre
használata nem befolyásolja a weboldal sebességét

Hogyan szokás ezt megvalósítani?

Ez a kód garantálja, hogy amikor egy lejátszó elindul (play esemény), minden másik lejátszó (audio vagy video) leáll (pause()).

A fenti kód egy egyszerű példakód, amit a leggyakrabban használnak. A FreeMedia által használt kód összetettebb, mivel más funkciókat is aktivál, illetve leállít:

function stopAllPlayers() { mediaPlayers.forEach(player => { player.mediaElement.pause(); // Leállítja az összes létrhozott lejátszót player.mediaElement.currentTime = 0; // Visszaállítja a lejátszási időt 0 - ra player.pauseButton.style.display = "none"; // Elrejti a Szünet / Leállítás gombot player.playButton.style.display = "block"; // Megjeleníti a lejátszás gombot player.albumArt.classList.remove("spinning"); // Leállítja az album animációt }); }

A funkciót az alábbi kóddal lehet meghívni:

playButton.addEventListener("click", () => { // Kattintás a lejátszó gombra stopAllPlayers(); // Az összes aktív média leállítása mediaElement.play(); // Aktuális lejátszó indítása playButton.style.display = "none"; // Lejátszó gomb elrejtése pauseButton.style.display = "block"; // Szünet / Leállítás gomb megjelenítése albumArt.classList.add("spinning"); // Animáció indítása az albumhoz <... további kódok ...> });

A mediaElement egy globális változó, mely az egész fájl működését befolyásolja, ezért eltávolítása vagy módosítása csak szakértelemmel ajánlott.

Zenelejátszó

A zenelejátszó olyan médialejátszót hoz létre, amely képes lejátszani audió formátumokat, akár lejátszási lista alapján is. Ha ön megelégszik az alapbeállításokkar, akkor elég csak egyetlen információt megadnia a funkciónak, hogy a lejátszót használni tudja.

A mediaType beállításától függetlenül minden esetben lejátszható az audio tartalom. Amennyiben szeretné módosítani az alapértelmezett beállításokat, az alábbi kód részletesen bemutatja:

<head> <script src="https://freemedia.hu/js/media.umd.min.js"></script> </head> <div id="media-container"></div> <script> window.onload = () => { createMediaPlayer({ containerId: "media-container", mediaType: "audio", src: [], showArtwork: true, // Album borító megjelenítése -> true || false showAlbum: false, // Rádióállomás megjelenítése -> true || false showGenre: false // Műfaj megjelenítése -> true || false showVisual: false, // Vizualizáció megjelenítése -> true || false visualType: "wave", // Vizualizáció típusa -> Hullám / Spectrum (wave, spectrum) spectrumStyle: "classic", // Vizualizáció stílusa -> classic, rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, mirror, mirror-inline, mirror-outline waveStyle: "classic", // Vizualizáció stílusa -> classic, rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, inline-prism, outline-prism multiple: true, // Több fájl feltöltése -> true || false volume: .8, // Hangerő -> 0, .1 || 0.1, .2 || 0.2, .3 || 0.3, .4 || 0.4, .5 || 0.5, .6 || 0.6, .7 || 0.7, .8 || 0.8, .9 || 0.9, 1 position: "center", // Vezérlő pozíció -> left || center || right border: true, // SZegély -> true || false borderWidth: 1, // Szegély vastagság -> Pl: 1 = 1 pixel borderColor: "transparent", // Szegély szín -> hexadecimal || rgb || rgba borderRadius: 12, // Szegély kerekítés -> Pl: 12 = 12 pixel buttonBorderRadius: true, // Kerek vezérlő -> true || false buttonType: "play-stop", // Vezérlő típusa -> play-pause || play-stop autoplay: false, // Automatikus lejátszás -> true || false backgroundcolor: "#dfc968e5", // Háttérszín beállítása -> hexadecimal || rgb || rgba >>> Hexadecimális átlátszóság: 0 => 00, 0,1 => 19, 0,2 => 33, 0,3 => 4c, 0,4 => 55, 0,5 => 7f, 0,6 => 99, 0,7 => b2, 0,8 => cc, 0,9 => e5 songtitlecolor: "blue", // Aktuális zeneszám színe genrecolor: "purple", // Műfaj zeneszám színe albumtitlecolor: "#555" // Album borító színe }); }; </script>

A fenti kód minden beállítást tartalmaz, melyhez a felhasználó is hozzáférhet. A beállítások részletesen:

containerId: itt jelenik meg a lejátszó. Ha nincs megadva, automatikusan létrehozza az alkalmazás. Alapértelmezett érték: null (ajánlott megadni egyedi azonosítót)
mediaType: lejátszó típusa. Alapértelmezett érték: audio (beállítható érték(ek): audio / video)
src: lejátszási lista. Az egyetlen érték, ami minden esetben automatikus, ezért üresen kell hagyni. Alapértelmezett érték: [] (üres tömb)
showArtwork: album borító megjelenítése. Alapértelmezett érték: true
showAlbum: album címének megjelenítése. Alapértelmezett érték: false
showGenre: műfaj(ok) megjelenítése. Alapértelmezett érték: false
showVisual: vizualizáció megjelenítése Alapértelmezett érték: false
visualType: vizualizáció típusa (spectrum vagy wave). Alapértelmezett érték: wave
spectrumStyle: a kiválasztott vizualizáció típusához beállítható stílus. Az alábbi stílusok közül választhat: classic, rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, inline-prism, outline-prism, mirror, mirror-inline, mirror-outline. Alapértelmezett érték: classic
waveStyle: a kiválasztott vizualizáció típusához beállítható stílus. Az alábbi stílusok közül választhat: classic, rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, inline-prism, outline-prism. (A mirror, mirror-inline, mirror-outline vizualizáció a wave beállításnál nem alkalmazható!) Alapértelmezett érték: classic
multiple: több fájl kiválasztásának engedélyezése. Alapértelmezett érték: true
volume: hangerő beállítása. Beállításhoz az alábbi formátumokat használhatja: 0 (néma), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5 (50% - os hangerő), .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (teljes hangerő) Alapértelmezett érték: .8
position: vezérlő pozíciója a megjelenítési blokkhoz képest. Alapértelmezett érték: center
border: szegély megjelenítése. Alapértelmezett érték: true
borderWidth: szegély vastagsága pixelben, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: 1 (vagyis 1px)
borderColor: szegély színe, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: currentColor (vagyis a megjelenítési weboldalon beállított alapértelmezett szín)
borderRadius: szegély kerekítés pixelben, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: 12 (vagyis 12px)
buttonBorderRadius: kerek vezérlő gomb. Alapértelmezett érték: true
buttonType: vezérlő gomb típusa. Választható értékek: button-pause, button-stop. A leállítás gombja lehet szüneteltetés és stop ikon. Alapértelmezett érték: button-pause
autoplay: automatikus lejátszás indítása a betöltés után. Ezt a beállítás egyes böngészők biztonsági beállításai felülírhatják. Alapértelmezett érték: false
backgroundcolor: Médialejátszó háttérszíne. Alapértelmezett érték: transparent (vagyis átlátszó)
songtitlecolor: zeneszám színe. Alapértelmezett érték: blue
genrecolor: műfaj színe, ha engedélyezve van a műfaj megjelenítése. Alapértelmezett érték: purple
albumtitlecolor: Album borító nevének színe. Alapértelmezett érték: #555

Mivel a zenelejátszó meghívása ugyanazzal a funkcióval történik, mint a videólejátszóé, a beállítások azonosak, de egyes beállítások csak a videólejátszónál használhatók, mint például az autoSubtitle, uploadSubtitle, illetve uploadDirectory. Ezek a beállítások a felirat betöltését, feltöltését szabályozzák, ezért nem szerepelnek a zenelejátszó részletes beállításai között.

A színekhez az összes megjelenítési forma használható (pl.: rgb, rgba, hsl, hex stb). Hexadecimális átlátszóság a következő lehet: 0 => 00, 0,1 => 19, 0,2 => 33, 0,3 => 4c, 0,4 => 55, 0,5 => 7f, 0,6 => 99, 0,7 => b2, 0,8 => cc, 0,9 => e5.

Például, ha azt szeretné, hogy 50% - osan legyen átlátszó a lejátszó, így is megadhatja a háttérszínét: backgroundcolor: '#dfc9687f'. A '#dfc968' az alapértelmezett háttérszínt, míg '7f' az átlátszóságot adja meg.

Videólejátszó

A videólejátszó olyan médialejátszót hoz létre, amely képes lejátszani audió és videó formátumokat, akár lejátszási lista alapján is. Ha ön megelégszik az alapbeállításokkar, akkor elég csak egyetlen információt megadnia a funkciónak, hogy a lejátszót használni tudja.

Fontos: ahhoz, hogy videófájlokat is le tudjon játszani a mediaType beállítást is meg kell adnia, ellenkező esetben hibaüzenet jelenik meg!

<head> <script src="https://freemedia.hu/js/media.umd.min.js"></script> </head> <div id="media-container"></div> <script> window.onload = () => { createMediaPlayer({ containerId: "media-container", mediaType: "video", src: [], showArtwork: true, // Album borító megjelenítése -> true || false showAlbum: false, // Rádióállomás megjelenítése -> true || false showGenre: false // Műfaj megjelenítése -> true || false showVisual: false, // Vizualizáció megjelenítése -> true || false visualType: "wave", // Vizualizáció típusa -> Hullám / Spectrum (wave, spectrum) spectrumStyle: "classic", // Vizualizáció stílusa -> classic, rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, mirror, mirror-inline, mirror-outline waveStyle: "classic", // Vizualizáció stílusa -> classic, rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, inline-prism, outline-prism multiple: true, // Több fájl feltöltése -> true || false autoSubtitle: false, // Automatikus feliratbetöltés (csak videó) -> true || false uploadSubtitle: false, // Felirat feltöltése saját szerverre (csak videó) -> true || false uploadDirectory: "subtitles/", // Feltöltés útvonala -> Alapértelmezett: subtitles/ volume: .8, // Hangerő -> 0, .1 || 0.1, .2 || 0.2, .3 || 0.3, .4 || 0.4, .5 || 0.5, .6 || 0.6, .7 || 0.7, .8 || 0.8, .9 || 0.9, 1 position: "center", // Vezérlő pozíció -> left || center || right border: true, // SZegély -> true || false borderWidth: 1, // Szegély vastagság -> Pl: 1 = 1 pixel borderColor: "transparent", // Szegély szín -> hexadecimal || rgb || rgba borderRadius: 12, // Szegély kerekítés -> Pl: 12 = 12 pixel buttonBorderRadius: true, // Kerek vezérlő -> true || false buttonType: "play-stop", // Vezérlő típusa -> play-pause || play-stop autoplay: false, // Automatikus lejátszás -> true || false backgroundcolor: "#dfc968e5", // Háttérszín beállítása -> hexadecimal || rgb || rgba >>> Hexadecimális átlátszóság: 0 => 00, 0,1 => 19, 0,2 => 33, 0,3 => 4c, 0,4 => 55, 0,5 => 7f, 0,6 => 99, 0,7 => b2, 0,8 => cc, 0,9 => e5 songtitlecolor: "blue", // Aktuális zeneszám színe genrecolor: "purple", // Műfaj zeneszám színe albumtitlecolor: "#555" // Album borító színe }); }; </script>

A fenti kód minden beállítást tartalmaz, melyhez a felhasználó is hozzáférhet. A beállítások részletesen:

containerId: itt jelenik meg a lejátszó. Ha nincs megadva, automatikusan létrehozza az alkalmazás. Alapértelmezett érték: null (ajánlott megadni egyedi azonosítót)
mediaType: lejátszó típusa. Alapértelmezett érték: audio (beállítható érték(ek): audio / video)
src: lejátszási lista. Az egyetlen érték, ami minden esetben automatikus, ezért üresen kell hagyni. Alapértelmezett érték: [] (üres tömb)
showArtwork: album borító megjelenítése. Alapértelmezett érték: true
showAlbum: album címének megjelenítése. Alapértelmezett érték: false
showGenre: műfaj(ok) megjelenítése. Alapértelmezett érték: false
showVisual: vizualizáció megjelenítése Alapértelmezett érték: false
visualType: vizualizáció típusa (spectrum vagy wave). Alapértelmezett érték: wave
spectrumStyle: a kiválasztott vizualizáció típusához beállítható stílus. Az alábbi stílusok közül választhat: classic, rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, inline-prism, outline-prism, mirror, mirror-inline, mirror-outline. Alapértelmezett érték: classic
waveStyle: a kiválasztott vizualizáció típusához beállítható stílus. Az alábbi stílusok közül választhat: classic, rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, inline-prism, outline-prism. (A mirror, mirror-inline, mirror-outline vizualizáció a wave beállításnál nem alkalmazható!) Alapértelmezett érték: classic
multiple: több fájl kiválasztásának engedélyezése. Alapértelmezett érték: true
autoSubtitle: automatikus feliratbetöltés, ha a felirat neve megegyezik a videófájl nevével és a multiple beállítás engedélyezve van. Alapértelmezett érték: false
uploadSubtitle: felirat feltöltésének engedélyezése saját szerverre a későbbi hozzáférésekhez. Alapértelmezett érték: false
uploadDirectory: feltöltés útvonala ha a uploadSubtitle engedélyezve van. Alapértelmezett mappa: subtitles/
volume: hangerő beállítása. Beállításhoz az alábbi formátumokat használhatja: 0 (néma), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5 (50% - os hangerő), .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (teljes hangerő) Alapértelmezett érték: .8
position: vezérlő pozíciója a megjelenítési blokkhoz képest. Alapértelmezett érték: center
border: szegély megjelenítése. Alapértelmezett érték: true
borderWidth: szegély vastagsága pixelben, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: 1 (vagyis 1px)
borderColor: szegély színe, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: currentColor (vagyis a megjelenítési weboldalon beállított alapértelmezett szín)
borderRadius: szegély kerekítés pixelben, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: 12 (vagyis 12px)
buttonBorderRadius: kerek vezérlő gomb. Alapértelmezett érték: true
buttonType: vezérlő gomb típusa. Választható értékek: button-pause, button-stop. A leállítás gombja lehet szüneteltetés és stop ikon. Alapértelmezett érték: button-pause
autoplay: automatikus lejátszás indítása a betöltés után. Ezt a beállítás egyes böngészők biztonsági beállításai felülírhatják. Alapértelmezett érték: false
backgroundcolor: Médialejátszó háttérszíne. Alapértelmezett érték: transparent (vagyis átlátszó)
songtitlecolor: zeneszám színe. Alapértelmezett érték: blue
genrecolor: műfaj színe, ha engedélyezve van a műfaj megjelenítése. Alapértelmezett érték: purple
albumtitlecolor: Album borító nevének színe. Alapértelmezett érték: #555

Mivel a videólejátszó meghívása ugyanazzal a funkcióval történik, mint a zenelejátszóé, a beállítások azonosak, de egyes beállítások csak a videólejátszónál használhatók, mint például az autoSubtitle, uploadSubtitle, illetve uploadDirectory. Ezek a beállítások a felirat betöltését, feltöltését szabályozzák, ezért szerepelnek csak a videólejátszó részletes beállításai között.

Hálózati lejátszó (Streaming Player)

A Streaming Player olyan médialejátszót hoz létre, amely képes streamelni audio tartalmat SHOUTcast vagy Icecast szerverekről. Az alábbi főbb funkciók találhatók benne:

iTunes API lekérdezés: Az iTunes API-t használja a zeneszámok metaadatainak, például a borítóképének lekérdezésére.
Médialejátszó létrehozása: A kód dinamikusan hoz létre egy médialejátszót HTML-ben, a megadott beállítások alapján. Ezen belül szerepelnek a lejátszás és szünet gombok, borítókép, cím, műfaj és egyéb metadátumok.
Stream URL formázása: A stream URL megfelelő módon van formázva, figyelembe véve, hogy HTTPS-t használ-e, vagy proxyval ellátott URL-t generál. A kód automatikusan felismeri a kapcsolat típusát és annak megfelelően alkalmazza a beállításokat.
Médiaelem kezelés: Az audio, mely tartalmazza a stream URL-t és a lejátszóhoz szükséges attribútumokat, például a hangerőt és az autoplay funkciót. Mivel a lejátszó csak adatfolyamot képes közvetíteni, kizárólag audio elem használható. Ellenkező esetben hibaüzenet jelenik meg és a lejátszót nem hozza létre az alkalmazás.
Számcím és borítókép frissítése: A kód folyamatosan lekérdezi a stream adatokat, és frissíti a számcím és borítókép megjelenítését, ha azok változnak.
Vezérlők és stílusok: A médialejátszóhoz tartozó gombok (lejátszás/szünet) és a stílusok (például gombok kerekítése, háttérszín) testre szabhatóak.
Felhasználóbarát: A kód úgy van kialakítva, hogy tartalmaz alapértelmezett beállításokat, ezért elég önnek csak a csatlakozási adatait megadnia és már használhatja is a lejátszót.

<head> <script src="https://freemedia.hu/js/media.umd.min.js"></script> </head> <div id="ebm-container"></div> <script> window.onload = () => { createStreamingPlayer({ containerId: "ebm-container", mediaType: "audio", url: "https://freestream.hu", port: 8340, mountpoint: "ebm", platform: 2 }); }; </script>

Vizualizáció: A Spectrum Analyzer és a Visual Oscilloscope népszerű vizualizációk, melyeket a legismertebb lejátszók is alkalmaznak vizualizáció megjelenítéséhez. A Streaming Player vizualizációját előre konfigurált stílusok közül választhatja ki.

<head> <script src="https://freemedia.hu/js/media.umd.min.js"></script> </head> <div id="ebm-container"></div> <script> window.onload = () => { createStreamingPlayer({ containerId: "ebm-container", mediaType: "audio", url: "https://freestream.hu", port: 8340, mountpoint: "ebm", platform: 2, showVisual: true, visualType: "spectrum", spectrumStyle: "classic" // classic, rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, inline-prism, outline-prism, mirror, mirror-inline, mirror-outline }); }; </script> >>> VAGY <<< <div id="ebm-container"></div> <script> window.onload = () => { createStreamingPlayer({ containerId: "ebm-container", mediaType: "audio", url: "https://freestream.hu", port: 8340, mountpoint: "ebm", platform: 2, showVisual: true, visualType: "wave", waveStyle: "classic" // classic, rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, inline-prism, outline-prism }); }; </script>

Egy teljes, egyéni beállítással létrehozott lejátszó:

<head> <script src="https://freemedia.hu/js/media.umd.min.js"></script> </head> <div id="ebm-container"></div> <script> window.onload = () => { createStreamingPlayer({ containerId: "ebm-container", // Lejátszó azonosító mediaType: "audio", // Médía típus -> csak audio lehet url: "https://freestream.hu", // Csatlakozási url, vagy IP cim -> az előtag (http:// || https://) megadása minden esetben kötelező port: 8340, // Port mountpoint: "ebm", // Csatlakozási pont -> SHOUTcast esetén a Streampath showPlatform: true, // Rádiószerver típusának megjelenítése -> true | false platform: 2, // Rádiószerver típusa -> SHOUTcast szerver: 1 || sc || shoutcast >>> Icecast szerver: 2 || ic || icecast showArtwork: true, // Album borító megjelenítése -> true || false showTitle: true, // Rádióállomás megjelenítése -> true || false showGenre: false // Műfaj megjelenítése -> true || false showVisual: true, // Vizualizáció megjelenítése -> true || false visualType: "spectrum", // Vizualizáció típusa -> Hullám / Spectrum (wave, spectrum) spectrumStyle: "classic", // Vizualizáció stílusa -> classic, rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, mirror, mirror-inline, mirror-outline waveStyle: "classic", // Vizualizáció stílusa -> classic, rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, inline-prism, outline-prism volume: .8, // Hangerő -> 0, .1 || 0.1, .2 || 0.2, .3 || 0.3, .4 || 0.4, .5 || 0.5, .6 || 0.6, .7 || 0.7, .8 || 0.8, .9 || 0.9, 1 position: "center", // Vezérlő pozíció -> left || center || right border: true, // SZegély -> true || false borderWidth: 1, // Szegély vastagság -> Pl: 1 = 1 pixel borderColor: "transparent", // Szegély szín -> hexadecimal || rgb || rgba borderRadius: 12, // Szegély kerekítés -> Pl: 12 = 12 pixel buttonBorderRadius: true, // Kerek vezérlő -> true || false buttonType: "play-stop", // Vezérlő típusa -> play-pause || play-stop autoplay: false, // Automatikus lejátszás -> true || false interval: 5, // Frissítési idő beállítása backgroundcolor: "#dfc968e5", // Háttérszín beállítása -> hexadecimal || rgb || rgba >>> Hexadecimális átlátszóság: 0 => 00, 0,1 => 19, 0,2 => 33, 0,3 => 4c, 0,4 => 55, 0,5 => 7f, 0,6 => 99, 0,7 => b2, 0,8 => cc, 0,9 => e5 songtitlecolor: "blue", // Aktuális zeneszám színe genrecolor: "purple", // Műfaj zeneszám színe titlecolor: "#555" // Rádióállomás zeneszám színe }); }; </script>

A fenti kód minden beállítást tartalmaz, melyhez a felhasználó is hozzáférhet. A beállítások részletesen:

containerId: itt jelenik meg a lejátszó. Ha nincs megadva, automatikusan létrehozza az alkalmazás. Alapértelmezett érték: null (ajánlott megadni egyedi azonosítót)
mediaType: lejátszó típusa. Alapértelmezett érték: audio (ha módosítja hibaüzenet jelenik meg)
url: csatlakozási pont, ami lehet url vagy IP cim. Az előtag (http:// vagy https://) megadása minden esetben kötelező. Alapértelmezett érték: null
port: portszám a csatlakozáshoz. Alapértelmezett érték: 8000
mountpoint: csatlakozási pont a közvetítéshez. Alapértelmezett érték: null
showPlatform: rádiószerver típusának megjelenítése. Az alábbi értékek közül választhat: true | false. Alapértelmezett érték: true
platform: rádiószerver típusa. Az alábbi értékek közül választhat: SHOUTcast szerver -> 1, sc, shoutcast vagy Icecast szerver -> 2, ic, icecast. Alapértelmezett érték: sc
showArtwork: album borító megjelenítése. Alapértelmezett érték: true
showTitle: állomásnév megjelenítése, amennyiben meg van adva. Ha engedélyezve van (true), de nem lehet lekérdezni a rádiószerverről, >>> ISMERETLEN <<< állomásnév jelenik meg. Alapértelmezett érték: true
showGenre: műfaj(ok) megjelenítése. Alapértelmezett érték: false
showVisual: vizualizáció megjelenítése Alapértelmezett érték: false
visualType: vizualizáció típusa (spectrum vagy wave). Alapértelmezett érték: spectrum
spectrumStyle: a kiválasztott vizualizáció típusához beállítható stílus. Az alábbi stílusok közül választhat: classic, rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, inline-prism, outline-prism, mirror, mirror-inline, mirror-outline. Alapértelmezett érték: classic
waveStyle: a kiválasztott vizualizáció típusához beállítható stílus. Az alábbi stílusok közül választhat: classic, rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, inline-prism, outline-prism. (A mirror, mirror-inline, mirror-outline vizualizáció a wave beállításnál nem alkalmazható!) Alapértelmezett érték: classic
volume: hangerő beállítása. Beállításhoz az alábbi formátumokat használhatja: 0 (néma), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5 (50% - os hangerő), .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (teljes hangerő) Alapértelmezett érték: .8
position: vezérlő pozíciója a megjelenítési blokkhoz képest. Alapértelmezett érték: center
border: szegély megjelenítése. Alapértelmezett érték: true
borderWidth: szegély vastagsága pixelben, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: 1 (vagyis 1px)
borderColor: szegély színe, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: currentColor (vagyis a megjelenítési weboldalon beállított alapértelmezett szín)
borderRadius: szegély kerekítés pixelben, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: 12 (vagyis 12px)
buttonBorderRadius: kerek vezérlő gomb. Alapértelmezett érték: true
buttonType: vezérlő gomb típusa. Választható értékek: button-pause, button-stop. A leállítás gombja lehet szüneteltetés és stop ikon. Alapértelmezett érték: button-pause
autoplay: automatikus lejátszás indítása a betöltés után. Ezt a beállítás egyes böngészők biztonsági beállításai felülírhatják. Alapértelmezett érték: false
interval: frissítési idő beállítása az adatok megjelenítéséhez. Alapértelmezett érték: 5 (másodperc)
backgroundcolor: Médialejátszó háttérszíne. Alapértelmezett érték: transparent (vagyis átlátszó)
songtitlecolor: zeneszám színe. Alapértelmezett érték: blue
genrecolor: műfaj színe, ha engedélyezve van a műfaj megjelenítése. Alapértelmezett érték: purple
titlecolor: rádióállomás színe, ha engedélyezve van a rádióállomás megjelenítése. Ez a beállítás csak akkor érvényes, ha a rádiószerverről sikerül lekérdezni a rádióállomás nevét. Alapértelmezett érték: #555

Vizualizáció

A vizualizáció egy teljes funkcionalitású vizualizációs JavaScript könyvtár HTML5 médialejátszókhoz. Célja, hogy látványos és testreszabható audióvizualizációkat (spectrum, hullámforma, VU-meter) biztosítson, különböző stílusokkal. Az alábbiakban részletesen bemutatom a funkcióit, működését, és testreszabási lehetőségeit.

A fájl több fő funkcióval dolgozik egymástól elkülönítve. A funkciók egyidejű használata ugyanazon az oldalon nem ajánlott.

1. createVisual({...})

Egy teljes vizualizációs rendszer, amely kétféle típusú megjelenítést támogat:

visualType: spectrum – frekvenciaspektrum (oszlopok)
visualType: wave – hullámforma (oscilloszkóp)

További paraméterek:

containerId: ahol a vizualizáció megjelenik
mediaType: médiaelem típusa (audio / video)
mediaId: médiaelem azonosító (id)
url: média útvonal
volume: hangerő (0 - 1-ig -> pl.: 0.8)
border: szegély engedélyezése (true | false)
borderWidth: szegély vastagsága (pixel)
borderColor: szegély színe ()alapértelmezett: currentColor
borderRadius: szegély kerekítés (pixel)
backgroundcolor: háttérszín (alapértelmezet: transparent -> átlátszó)
visualStyle / waveStyle: megjelenítési stílus (pl. "classic", "rainbow", "pulse", stb.)

Szükséges (kötelező) paraméterek:

containerId: ahol a vizualizáció megjelenik
mediaType: médiaelem típusa (audio / video)
url: média útvonal
visualStyle / waveStyle: megjelenítési stílus (pl. "classic", "rainbow", "pulse", stb.)

Az alábbi példák a Spectrum Analyser és Waveform vizualizációt mutatják be, meglévő lejátszó(k)hoz.

<head> <script src="https://freemedia.hu/js/visual.umd.min.js"></script> </head> <div id="spectrum-container"></div> <audio id="mySpectrum" controls src=""></audio> <script> window.onload = () => { createVisual({ containerId: "spectrum-container", mediaType: "audio", mediaId: "mySpectrum", url: "https://freestream.hu:8000/ebm_radio", volume: 1, visualType: "spectrum", visualStyle: "mirror-outline" }); }; </script>

Részletes beállítási lehetőségek:

<head> <script src="https://freemedia.hu/js/visual.umd.min.js"></script> </head> <div id="wave-container"></div> <audio id="myWave" controls src=""></audio> <script> window.onload = () => { createVisual({ containerId: "wave-container", mediaType: "audio", mediaId: "myWave", url: "https://freestream.hu:8340/darksynth", volume: 1, visualType: "wave", waveStyle: "inline" }; </script>

containerId: itt jelenik meg a vizualizáció. Ha nincs megadva, automatikusan létrehozza az alkalmazás. Alapértelmezett érték: null (ajánlott megadni egyedi azonosítót)
mediaType: lejátszó típusa. Alapértelmezett érték: audio (beállítható érték(ek): audio | video)
mediaId: lejátszó azonosítója. A vizualizáció a megadott azonosítójú lejátszó hangmintályát jeleníti meg. Alapértelmezett érték: audio
url: zeneszám vagy streaming útvonala. A vizualizáció használatához kötelező megadni. Alapértelmezett érték: null
volume: hangerő beállítása. Beállításhoz az alábbi formátumokat használhatja: 0 (néma), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5 (50% - os hangerő), .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (teljes hangerő) Alapértelmezett érték: 1
visualType: vizualizáció típusa. Alapértelmezett érték: spectum (beállítható érték(ek): spectrum / wave)
visualStyle: vizualizáció stílusa a beállított vizualizációtípusa alapján. Alapértelmezett stílus: classic (beállítható stílus(ok): classic, rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, inline-prism, outline-prism, mirror, mirror-inline, mirror-outline)
waveStyle: vizualizáció stílusa a beállított vizualizációtípusa alapján. Alapértelmezett stílus: classic (beállítható stílus(ok): classic, rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, inline-prism, outline-prism. (A mirror, mirror-inline, mirror-outline vizualizáció a wave beállításnál nem alkalmazható!)
border: szegély megjelenítése. Alapértelmezett érték: true (beállítható érték(ek): true | false)
borderWidth: szegély vastagsága. Alapértelmezett érték: 1 (vagyis 1px)
borderColor: szegély színe, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: currentColor (vagyis a megjelenítési weboldalon beállított alapértelmezett szín)
borderRadius: szegély kerekítés pixelben, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: 12 (vagyis 12px)
backgroundcolor: Vizualizáció háttérszíne. Alapértelmezett háttérszín: transparent (vagyis átlátszó)

2. createSpectrum({...})

Külön hívható, ha csak a spektrumvizualizációra van szükség. Nagyrészt ugyanazt a spektrumrajzoló logikát tartalmazza, mint a createVisual. Ennél a vizualizációnál visualType beállítást nem kell megadni, mivel csak egyfajta vizualizációt tartalmaz.

<head> <script src="https://freemedia.hu/js/visual.umd.min.js"></script> </head> <div id="spectrum-container-2"></div> <audio id="mySpectrum-2" controls src=""></audio> <script> window.onload = () => { createVisual({ containerId: "spectrum-container-2", mediaType: "audio", mediaId: "mySpectrum-2", url: "https://freestream.hu:8340/synthandwave", volume: 1, visualStyle: "mirror-outline" }); }; </script>

containerId: itt jelenik meg a vizualizáció. Ha nincs megadva, automatikusan létrehozza az alkalmazás. Alapértelmezett érték: null (ajánlott megadni egyedi azonosítót)
mediaType: lejátszó típusa. Alapértelmezett érték: audio (beállítható érték(ek): audio | video)
mediaId: lejátszó azonosítója. A vizualizáció a megadott azonosítójú lejátszó hangmintályát jeleníti meg. Alapértelmezett érték: audio
url: zeneszám vagy streaming útvonala. A vizualizáció használatához kötelező megadni. Alapértelmezett érték: null
volume: hangerő beállítása. Beállításhoz az alábbi formátumokat használhatja: 0 (néma), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5 (50% - os hangerő), .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (teljes hangerő) Alapértelmezett érték: 1
visualStyle: vizualizáció stílusa a beállított vizualizációtípusa alapján. Alapértelmezett stílus: classic (beállítható stílus(ok): classic, rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, inline-prism, outline-prism, mirror, mirror-inline, mirror-outline)
border: szegély megjelenítése. Alapértelmezett érték: true (beállítható érték(ek): true | false)
borderWidth: szegély vastagsága. Alapértelmezett érték: 1 (vagyis 1px)
borderColor: szegély színe, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: currentColor (vagyis a megjelenítési weboldalon beállított alapértelmezett szín)
borderRadius: szegély kerekítés pixelben, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: 12 (vagyis 12px)
backgroundcolor: Vizualizáció háttérszíne. Alapértelmezett háttérszín: transparent (vagyis átlátszó)

3. createWave({...})

Külön funkció a hullámforma megjelenítésére (oscilloscope stílusban). Működése hasonló a createSpectrum-hoz, csak más megjelenítési technikát használ. Ennél a vizualizációnál visualType beállítást nem kell megadni, mivel csak egyfajta vizualizációt tartalmaz.

<head> <script src="https://freemedia.hu/js/visual.umd.min.js"></script> </head> <div id="wave-container-2"></div> <audio id="myWave-2" controls src=""></audio> <script> window.onload = () => { createVisual({ containerId: "wave-container-2", mediaType: "audio", mediaId: "myWave-2", url: "https://freestream.hu:8340/soundtrack", volume: 1, visualStyle: "outline" }); }; </script>

containerId: itt jelenik meg a vizualizáció. Ha nincs megadva, automatikusan létrehozza az alkalmazás. Alapértelmezett érték: null (ajánlott megadni egyedi azonosítót)
mediaType: lejátszó típusa. Alapértelmezett érték: audio (beállítható érték(ek): audio | video)
mediaId: lejátszó azonosítója. A vizualizáció a megadott azonosítójú lejátszó hangmintályát jeleníti meg. Alapértelmezett érték: audio
url: zeneszám vagy streaming útvonala. A vizualizáció használatához kötelező megadni. Alapértelmezett érték: null
volume: hangerő beállítása. Beállításhoz az alábbi formátumokat használhatja: 0 (néma), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5 (50% - os hangerő), .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (teljes hangerő) Alapértelmezett érték: 1
visualStyle: vizualizáció stílusa a beállított vizualizációtípusa alapján. Alapértelmezett stílus: classic (beállítható stílus(ok): classic, rainbow, gradient, pulse, fire, darkRainbow, timeBased, water, soft, lamp, inline, outline, inline-prism, outline-prism. (A mirror, mirror-inline, mirror-outline vizualizáció a wave beállításnál nem alkalmazható!)
border: szegély megjelenítése. Alapértelmezett érték: true (beállítható érték(ek): true | false)
borderWidth: szegély vastagsága. Alapértelmezett érték: 1 (vagyis 1px)
borderColor: szegély színe, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: currentColor (vagyis a megjelenítési weboldalon beállított alapértelmezett szín)
borderRadius: szegély kerekítés pixelben, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: 12 (vagyis 12px)
backgroundcolor: Vizualizáció háttérszíne. Alapértelmezett háttérszín: transparent (vagyis átlátszó)

4. createVU({...})

Egy hagyományos VU-méter (volume unit) vizualizáció DOM-alapú elemekkel (div), nem canvas-al. Két csatornát kezel (bal és jobb).

<head> <script src="https://freemedia.hu/js/visual.umd.min.js"></script> </head> <div id="vu-container"></div> <audio id="myVu" controls src=""></audio> <script> window.onload = () => { createVU({ containerId: "vu-container", mediaId: "myVu", width: 800, height: 10, style: "retro", url: "https://freestream.hu:8340/hardstyle", vertical: false }); }; </script>

containerId: itt jelenik meg a vizualizáció. Ha nincs megadva, automatikusan létrehozza az alkalmazás. Alapértelmezett érték: null (ajánlott megadni egyedi azonosítót)
mediaType: lejátszó típusa. Alapértelmezett érték: audio (beállítható érték(ek): audio | video)
leftColor: bal oldali sáv színe. Alapértelmezett érték: #4caf50 (Automatikusan alkalmaz színt, elrendezést és animációt a stílus alapján)
rightColor: jobb oldali sáv színe. Alapértelmezett érték: #2196f3 (Automatikusan alkalmaz színt, elrendezést és animációt a stílus alapján)
backgroundcolor: Vizualizáció háttérszíne. Alapértelmezett háttérszín: transparent (vagyis átlátszó)
style: megjelenítési stílus. Alapértelmezett stílus: classic (választható stílusok: classic, modern, minimal, neon, gradient, striped, striped-left, striped-right, line, retro, retro-light, retro-dark)
width: animáció hossza a konténer hosszához viszonyítva. Alapértelmezett érték: 200 (pixel)
height: animáció vastagsáda (szélessége). Alapértelmezett érték: 20 (pixel)
volume: hangerő beállítása. Beállításhoz az alábbi formátumokat használhatja: 0 (néma), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5 (50% - os hangerő), .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (teljes hangerő) Alapértelmezett érték: 1
borderRadius: szegély kerekítés pixelben, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: 12 (vagyis 12px)
url: zeneszám vagy streaming útvonala. A vizualizáció használatához kötelező megadni. Alapértelmezett érték: null
vertical: vertikális megjelenítés. Ha engedélyezve van (true), akkor a VU Meter függőlegesen jelenik meg. Alapértelmezett érték: false

5. createCanvasVU({...})

Inkább a Spectrum Analyzer - hez hasonlítható VU-méter (volume unit) vizualizáció canvas elemmel. Két csatornát kezel (bal és jobb), melyek ledes formában jelennek meg.

<head> <script src="https://freemedia.hu/js/visual.umd.min.js"></script> </head> <div id="canvas-container"></div> <audio id="myCanvas" controls src=""></audio> <script> window.onload = () => { createVU({ containerId: "canvas-container", mediaId: "myCanvas", width: 600, height: 140, style: "striped", url: "http://tormentedradio.stream:8070" // MPEGRadio }); }; </script>

containerId: itt jelenik meg a vizualizáció. Ha nincs megadva, automatikusan létrehozza az alkalmazás. Alapértelmezett érték: null (ajánlott megadni egyedi azonosítót)
mediaType: lejátszó típusa. Alapértelmezett érték: audio (beállítható érték(ek): audio | video)
colorLeft: bal oldali sáv színe. Alapértelmezett érték: #4caf50 (Automatikusan alkalmaz színt, elrendezést és animációt a stílus alapján)
colorRight: jobb oldali sáv színe. Alapértelmezett érték: #2196f3 (Automatikusan alkalmaz színt, elrendezést és animációt a stílus alapján)
backgroundcolor: vizualizáció háttérszíne. Alapértelmezett háttérszín: transparent (vagyis átlátszó)
style: megjelenítési stílus. Alapértelmezett stílus: classic (választható stílusok: classic, gradient (lineáris színátmenet), striped (csíkos sávok), led (lépcsőzetes LED hatás))
width: animáció hossza a konténer hosszához viszonyítva. Alapértelmezett érték: 600 (pixel) -> Maximálisan megadható érték: 600 (pixel)
height: animáció vastagsáda (szélessége). Alapértelmezett érték: 140 (pixel) -> Maximálisan megadható érték: 140 (pixel)
volume: hangerő beállítása. Beállításhoz az alábbi formátumokat használhatja: 0 (néma), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5 (50% - os hangerő), .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (teljes hangerő) Alapértelmezett érték: 1
borderRadius: szegély kerekítés pixelben, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: 12 (vagyis 12px)
url: zeneszám vagy streaming útvonala. A vizualizáció használatához kötelező megadni. Alapértelmezett érték: null

Média információk

Ez a JavaScript fájl lehetővé teszi különböző rádió streaming szerverek adatainak lekérdezését és megjelenítését valós időben. A fájl célja, hogy egyszerűen integrálható legyen weboldalakba, és egy helyen kezelje a rádió szerverek legfontosabb adatait.

A fájlon keresztül minden olyan adat elérhető és megjeleníthető saját weboldalon, melyek információkat közölnek a rádiószerverről, az éppen aktuális zeneszámról vagy a műfajról, illetve album borítóról, ha az közzé van téve.

1. currentSong({...})

A funkció képes meghatározni és megjeleníteni az éppen sugárzott zeneszám címét a rádiószerver adatai alapján.

Az alábbi kód olyan beállítást használ, mellyel az aktuális zeneszámot lehet lekérdezni speciális beállításokat alkalmazva, mellyel a létrehozott lejátszó meg van jelenítve egy hozzáadott egyedi azonosítóval és a mediaElement: true bállítással. A stílus classic, a mediaElement engedélyezve, a frissítési idő 5 másodperc. A hibátlan lekérdezéshez minden csatlakozási pont, illetve az url előtag (http vagy https) megadása szükséges.

<head> <script src="https://freemedia.hu/js/media-info.umd.min.js"></script> </head> <div id="songtitle"></div> <audio id="mysongtitle" controls src=""></audio> <script> window.onload = () => { currentSong({ containerId: "songtitle", mediaId: "mysongtitle", mediaElement: true, // ha létre van hozva a lejátszó false beállítás esetén elrejti azt position: "left", style: "classic", // classic | gradient | three-gradient | shadow | outline | glow | rainbow | metallic | glass | flicker | flicker-glow | pulse | glitch | shine | burning url: "http://74.91.125.187", // AmpedOut port: 8136, mountpoint: "stream" }); }; </script>

containerId: itt jelenik meg a zeneszám címe. Ha nincs megadva, automatikusan létrehozza az alkalmazás. Alapértelmezett érték: null (ajánlott megadni egyedi azonosítót)
mediaId: lejátszó azonosítója. A megadott azonosítójú lejátszó szerver adatait jeleníti meg. Alapértelmezett érték: audio
mediaElement: a rádiószerver adatait lejátszó nélkül is le lehet kérdezni. Ez a beállítás azt szabályozza. Amennyibe a lejátszó létre van hozva egyedi azonosítóval, de a mediaElement: false, a lejátszó szintén nem fog látszani. A hozzáadott lejátszó a megadott streaminget fogja sugározni. Alapértelmezett érték: false (beállítható érték(ek): true | false)

FONTOS: ha szeretné elkerülni a hibákat, használja az alapértelmezett beállítást, lejátszó nélkül. Ha mindenképpen ragaszkodik a lejátszáshoz ne felejtse el megadni a lejátszáshoz szükséges azonosítót és a mediaElement: true beállítást megadni! Ügyeljen arra, hogy a mediaElement beállítása összhangban van a létrehozott lejátszóval és a megadott azonosítóval. Amennyiben nem hozott létre lejátszót, de a mediaElement: true, nem fog megjelenni a lekérdezett adat, helyette a waitText (várakozási szöveg) fog látszani!

titleTag: elem típusa a konténeren belül, ahol a rádióállomás neve megjelenik. Alapértelmezett érték: h3 (beállítható érték(ek): minden olyan elem, ami szöveges tartalom megjelenítésére alkalmas. (Például: h1, h2, h3, h4, h5, h6, p, span, div))
titleColor: szövegszín beállítása. Alapértelmezett szín: HEX -> #4caf50 | RGB -> rgb(76, 175, 80) | HSV -> hsv(122°, 57%, 69%) | HSL -> hsl(122°, 39%, 49%)
backgroundColor: a szövegdoboz háttérszíne. Alapértelmezett érték: transparent (átlátszó)
startGradient: színátmenet beállítás a gradient stílushoz. Alapértelmezett érték: #74fc7a
centerGradient: színátmenet beállítás a three-gradient stílushoz. Alapértelmezett érték: #0a540d
endGradient: színátmenet beállítás a gradient stílushoz. Alapértelmezett érték: #4caf50
style: megjelenítési stílus beállítása. Alapértelmezett érték: classic (választható stílusok: classic | gradient | three-gradient | shadow | outline | glow | rainbow | metallic | glass | flicker | flicker-glow | pulse | glitch | shine | burning)
position: szöveg pozíciója a konténerhez képest. Alapértelmezett érték: left (beállítható érték(ek): left | center | right)
waitText: várakozási szöveg, amig a zeneszám címe megjelenik. Alapértelmezett szöveg: Betöltés...
volume: hangerő beállítása. Alapértelmezett érték: 1 (beállítható érték(ek): 0 (néma), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5 (50% - os hangerő), .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (teljes hangerő))
opacity: átlátszóság beállítása. A beállítás módosítása nagyban befolyásolhatja a nem animált stílus beállításokat. Alapértelmezett érték: 1 (beállítható érték(ek): 0 (átlátszó), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5, .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (nem átlátszó))
showBorder: szegély megjelenítése a zeneszám körül. Ha engedélyezi egy automatikus belső térköz jelenik meg a szegély és a szöveg között. Alapértelmezett érték: false (beállítható érték(ek): true | false)
borderWidth: szegély vastagsága. Alapértelmezett érték: 1 (vagyis 1px)
borderColor: szegély színe, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: #3dad41
borderRadius: szegély kerekítés pixelben, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: 4 (vagyis 4px)
platform: rádiószerver típusa. Alapértelmezett érték: 1 (vagyis SHOUTcast) (beállítható érték(ek): SHOUTcast -> 1, sc, shoutcast | Icecast -> 2, ic, icecast)
url: zeneszám vagy streaming útvonala. Alapértelmezett érték: null
port: csatlakozási portszám. Alapértelmezett érték: 8000
mountpoint: csatlakozási pont. Ezt az adatot a SHOUTcast rádiószerver esetében is meg kell megadni, aminek a megnevezése streampath (sp). A rádiószerver adatai csak így kérhetők le. Alapértelmezett érték: null
interval: frissítési idő másodpercben. Alapértelmezett idő: 15

2. serverType({...})

Meghatározza a rádiószerver típusát az adott URL alapján. Automatikusan felismeri, hogy az Icecast vagy SHOUTcast szerverrel van-e dolga.

Az alábbi kód a rádiószerver típusát jeleníti meg, olyan speciális beállításokat alkalmazva, mellyel a létrehozott lejátszó is el van rejtve, ezáltal hiába van megadva a lejátszó azonosítója. A stílus rainbow, a mediaElement letiltva, a frissítési idő 5 másodperc, a pozíció center, vagyis középen jelenik meg. A hibátlan lekérdezéshez minden csatlakozási pont, illetve az url előtag (http vagy https) megadása szükséges.

<head> <script src="https://freemedia.hu/js/media-info.umd.min.js"></script> </head> <div id="servertype"></div> <audio id="myservertype" controls src=""></audio> <script> window.onload = () => { serverType({ containerId: "servertype", mediaId: "myservertype", mediaElement: false, // ha létre van hozva a lejátszó false beállítás esetén elrejti azt position: "center", style: "rainbow", // classic | gradient | three-gradient | shadow | outline | glow | rainbow | metallic | glass | flicker | flicker-glow | pulse | glitch | shine | burning italic: true, platform: 2, url: "https://freestream.hu", // EBM Radio port: 8340, mountpoint: "ebm" }); }; </script>

containerId: itt jelenik meg a rádiószerver típusa. Ha nincs megadva, automatikusan létrehozza az alkalmazás. Alapértelmezett érték: null (ajánlott megadni egyedi azonosítót)
mediaId: lejátszó azonosítója. A megadott azonosítójú lejátszó szerver adatait jeleníti meg. Alapértelmezett érték: audio
mediaElement: a rádiószerver adatait lejátszó nélkül is le lehet kérdezni. Ez a beállítás azt szabályozza. Amennyibe a lejátszó létre van hozva egyedi azonosítóval, de a mediaElement: false, a lejátszó szintén nem fog látszani. A hozzáadott lejátszó a megadott streaminget fogja sugározni. Alapértelmezett érték: false (beállítható érték(ek): true | false)

titleTag: elem típusa a konténeren belül, ahol a rádiószerver típusa megjelenik. Alapértelmezett érték: h3 (beállítható érték(ek): minden olyan elem, ami szöveges tartalom megjelenítésére alkalmas. (Például: h1, h2, h3, h4, h5, h6, p, span, div))
titleColor: szövegszín beállítása. Alapértelmezett szín: HEX -> #4caf50 | RGB -> rgb(76, 175, 80) | HSV -> hsv(122°, 57%, 69%) | HSL -> hsl(122°, 39%, 49%)
backgroundColor: a szövegdoboz háttérszíne. Alapértelmezett érték: transparent (átlátszó)
startGradient: színátmenet beállítás a gradient stílushoz. Alapértelmezett érték: #74fc7a
centerGradient: színátmenet beállítás a three-gradient stílushoz. Alapértelmezett érték: #0a540d
endGradient: színátmenet beállítás a gradient stílushoz. Alapértelmezett érték: #4caf50
style: megjelenítési stílus beállítása. Alapértelmezett érték: classic (választható stílusok: classic | gradient | three-gradient | shadow | outline | glow | rainbow | metallic | glass | flicker | flicker-glow | pulse | glitch | shine | burning)
position: szöveg pozíciója a konténerhez képest. Alapértelmezett érték: left (beállítható érték(ek): left | center | right)
waitText: várakozási szöveg, amig a rádiószerver típusa megjelenik. Alapértelmezett szöveg: Betöltés...
volume: hangerő beállítása. Alapértelmezett érték: 1 (beállítható érték(ek): 0 (néma), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5 (50% - os hangerő), .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (teljes hangerő))
opacity: átlátszóság beállítása. A beállítás módosítása nagyban befolyásolhatja a nem animált stílus beállításokat. Alapértelmezett érték: 1 (beállítható érték(ek): 0 (átlátszó), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5, .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (nem átlátszó))
italic: dőltbetűs szöveg engedélyezése. A beállítás nem minden funkciónál alkalmazható. Alapértelmezett érték: false (beállítható érték(ek): true | false
showBorder: szegély megjelenítése a zeneszám körül. Ha engedélyezi egy automatikus belső térköz jelenik meg a szegély és a szöveg között. Alapértelmezett érték: false (beállítható érték(ek): true | false)
borderWidth: szegély vastagsága. Alapértelmezett érték: 1 (vagyis 1px)
borderColor: szegély színe, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: #3dad41
borderRadius: szegély kerekítés pixelben, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: 4 (vagyis 4px)
platform: rádiószerver típusa. Alapértelmezett érték: 1 (vagyis SHOUTcast) (beállítható érték(ek): SHOUTcast -> 1, sc, shoutcast | Icecast -> 2, ic, icecast)
url: zeneszám vagy streaming útvonala. Alapértelmezett érték: null
port: csatlakozási portszám. Alapértelmezett érték: 8000
mountpoint: csatlakozási pont. Ezt az adatot a SHOUTcast rádiószerver esetében is meg kell megadni, aminek a megnevezése streampath (sp). A rádiószerver adatai csak így kérhetők le. Alapértelmezett érték: null
interval: frissítési idő másodpercben. Alapértelmezett idő: 15

3. radioName({...})

A funkció képes meghatározni és megjeleníteni a rádióállomás nevét a rádiószerver adatai alapján.

Az alábbi kód egy alapértelmezett beállítást használ, mellyel a rádióállomás nevét lehet lekérdezni olyan speciális beállításokat alkalmazva, mellyel nincs létrehozva lejátszó, ezáltal nem szükséges megadni lejátszó azonosítót. A stílus glow, a mediaElement letiltva, a frissítési idő 5 másodperc, a pozíció right, vagyis jobb oldalt jelenik meg. A hibátlan lekérdezéshez minden csatlakozási pont, illetve az url előtag (http vagy https) megadása szükséges.

<head> <script src="https://freemedia.hu/js/media-info.umd.min.js"></script> </head> <div id="radioname"></div> <script> window.onload = () => { radioName({ containerId: "radioname", mediaElement: false, // ha létre van hozva a lejátszó false beállítás esetén elrejti azt position: "right", style: "glow", // classic | gradient | three-gradient | shadow | outline | glow | rainbow | metallic | glass | flicker | flicker-glow | pulse | glitch | shine | burning platform: 1, url: "http://www.ebm-radio.org", port: 7000, mountpoint: "hq" }); }; </script>

containerId: itt jelenik meg a rádióállomás neve. Ha nincs megadva, automatikusan létrehozza az alkalmazás. Alapértelmezett érték: null (ajánlott megadni egyedi azonosítót)
mediaId: lejátszó azonosítója. A megadott azonosítójú lejátszó szerver adatait jeleníti meg. Alapértelmezett érték: audio
mediaElement: a rádiószerver adatait lejátszó nélkül is le lehet kérdezni. Ez a beállítás azt szabályozza. Amennyibe a lejátszó létre van hozva egyedi azonosítóval, de a mediaElement: false, a lejátszó szintén nem fog látszani. A hozzáadott lejátszó a megadott streaminget fogja sugározni. Alapértelmezett érték: false (beállítható érték(ek): true | false)

titleTag: elem típusa a konténeren belül, ahol a rádióállomás neve megjelenik. Alapértelmezett érték: h3 (beállítható érték(ek): minden olyan elem, ami szöveges tartalom megjelenítésére alkalmas. (Például: h1, h2, h3, h4, h5, h6, p, span, div))
titleColor: szövegszín beállítása. Alapértelmezett szín: HEX -> #4caf50 | RGB -> rgb(76, 175, 80) | HSV -> hsv(122°, 57%, 69%) | HSL -> hsl(122°, 39%, 49%)
backgroundColor: a szövegdoboz háttérszíne. Alapértelmezett érték: transparent (átlátszó)
startGradient: színátmenet beállítás a gradient stílushoz. Alapértelmezett érték: #74fc7a
centerGradient: színátmenet beállítás a three-gradient stílushoz. Alapértelmezett érték: #0a540d
endGradient: színátmenet beállítás a gradient stílushoz. Alapértelmezett érték: #4caf50
style: megjelenítési stílus beállítása. Alapértelmezett érték: classic (választható stílusok: classic | gradient | three-gradient | shadow | outline | glow | rainbow | metallic | glass | flicker | flicker-glow | pulse | glitch | shine | burning)
position: szöveg pozíciója a konténerhez képest. Alapértelmezett érték: left (beállítható érték(ek): left | center | right)
waitText: várakozási szöveg, amig a rádióállomás neve megjelenik. Alapértelmezett szöveg: Betöltés...
volume: hangerő beállítása. Alapértelmezett érték: 1 (beállítható érték(ek): 0 (néma), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5 (50% - os hangerő), .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (teljes hangerő))
opacity: átlátszóság beállítása. A beállítás módosítása nagyban befolyásolhatja a nem animált stílus beállításokat. Alapértelmezett érték: 1 (beállítható érték(ek): 0 (átlátszó), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5, .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (nem átlátszó))
italic: dőltbetűs szöveg engedélyezése. A beállítás nem minden funkciónál alkalmazható. Alapértelmezett érték: false (beállítható érték(ek): true | false
showBorder: szegély megjelenítése a zeneszám körül. Ha engedélyezi egy automatikus belső térköz jelenik meg a szegély és a szöveg között. Alapértelmezett érték: false (beállítható érték(ek): true | false)
borderWidth: szegély vastagsága. Alapértelmezett érték: 1 (vagyis 1px)
borderColor: szegély színe, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: #3dad41
borderRadius: szegély kerekítés pixelben, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: 4 (vagyis 4px)
platform: rádiószerver típusa. Alapértelmezett érték: 1 (vagyis SHOUTcast) (beállítható érték(ek): SHOUTcast -> 1, sc, shoutcast | Icecast -> 2, ic, icecast)
url: zeneszám vagy streaming útvonala. Alapértelmezett érték: null
port: csatlakozási portszám. Alapértelmezett érték: 8000
mountpoint: csatlakozási pont. Ezt az adatot a SHOUTcast rádiószerver esetében is meg kell megadni, aminek a megnevezése streampath (sp). A rádiószerver adatai csak így kérhetők le. Alapértelmezett érték: null
interval: frissítési idő másodpercben. Alapértelmezett idő: 15

4. genre({...})

A funkció képes meghatározni és megjeleníteni a rádióállomás műfajait a rádiószerver adatai alapján.

Az alábbi kód egy teljesen alapértelmezett beállítást használ, mellyel a rádióállomás műfajait lehet lekérdezni. A beállítással meg van adva a létrehozott lejászó azonosítója, de a mediaElement alapbeállítását használva el van rejtve a lejátszó. A stílus metalic, a mediaElement alapbeállítás, a frissítési idő 5 másodperc, a pozíció center, vagyis középen jelenik meg. A hibátlan lekérdezéshez minden csatlakozási pont, illetve az url előtag (http vagy https) megadása szükséges.

<head> <script src="https://freemedia.hu/js/media-info.umd.min.js"></script> </head> <div id="genre"></div> <audio id="mygenre" controls src=""></audio> <script> window.onload = () => { genre({ containerId: "genre", mediaId: "mygenre", position: "center", style: "metallic", // classic | gradient | three-gradient | shadow | outline | glow | rainbow | metallic | glass | flicker | flicker-glow | pulse | glitch | shine | burning platform: 1, url: "https://freestream.hu", port: 8340, mountpoint: "darksynth" }); }; </script>

containerId: itt jelenik meg a rádióállomás műfajai. Ha nincs megadva, automatikusan létrehozza az alkalmazás. Alapértelmezett érték: null (ajánlott megadni egyedi azonosítót)
mediaId: lejátszó azonosítója. A megadott azonosítójú lejátszó szerver adatait jeleníti meg. Alapértelmezett érték: audio
mediaElement: a rádiószerver adatait lejátszó nélkül is le lehet kérdezni. Ez a beállítás azt szabályozza. Amennyibe a lejátszó létre van hozva egyedi azonosítóval, de a mediaElement: false, a lejátszó szintén nem fog látszani. A hozzáadott lejátszó a megadott streaminget fogja sugározni. Alapértelmezett érték: false (beállítható érték(ek): true | false)

titleTag: elem típusa a konténeren belül, ahol a rádióállomás neve megjelenik. Alapértelmezett érték: h3 (beállítható érték(ek): minden olyan elem, ami szöveges tartalom megjelenítésére alkalmas. (Például: h1, h2, h3, h4, h5, h6, p, span, div))
titleColor: szövegszín beállítása. Alapértelmezett szín: HEX -> #4caf50 | RGB -> rgb(76, 175, 80) | HSV -> hsv(122°, 57%, 69%) | HSL -> hsl(122°, 39%, 49%)
backgroundColor: a szövegdoboz háttérszíne. Alapértelmezett érték: transparent (átlátszó)
startGradient: színátmenet beállítás a gradient stílushoz. Alapértelmezett érték: #74fc7a
centerGradient: színátmenet beállítás a three-gradient stílushoz. Alapértelmezett érték: #0a540d
endGradient: színátmenet beállítás a gradient stílushoz. Alapértelmezett érték: #4caf50
style: megjelenítési stílus beállítása. Alapértelmezett érték: classic (választható stílusok: classic | gradient | three-gradient | shadow | outline | glow | rainbow | metallic | glass | flicker | flicker-glow | pulse | glitch | shine | burning)
position: szöveg pozíciója a konténerhez képest. Alapértelmezett érték: left (beállítható érték(ek): left | center | right)
waitText: várakozási szöveg, amig a rádióállomás neve megjelenik. Alapértelmezett szöveg: Betöltés...
volume: hangerő beállítása. Alapértelmezett érték: 1 (beállítható érték(ek): 0 (néma), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5 (50% - os hangerő), .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (teljes hangerő))
opacity: átlátszóság beállítása. A beállítás módosítása nagyban befolyásolhatja a nem animált stílus beállításokat. Alapértelmezett érték: 1 (beállítható érték(ek): 0 (átlátszó), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5, .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (nem átlátszó))
italic: dőltbetűs szöveg engedélyezése. A beállítás nem minden funkciónál alkalmazható. Alapértelmezett érték: false (beállítható érték(ek): true | false
showBorder: szegély megjelenítése a zeneszám körül. Ha engedélyezi egy automatikus belső térköz jelenik meg a szegély és a szöveg között. Alapértelmezett érték: false (beállítható érték(ek): true | false)
borderWidth: szegély vastagsága. Alapértelmezett érték: 1 (vagyis 1px)
borderColor: szegély színe, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: #3dad41
borderRadius: szegély kerekítés pixelben, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: 4 (vagyis 4px)
platform: rádiószerver típusa. Alapértelmezett érték: 1 (vagyis SHOUTcast) (beállítható érték(ek): SHOUTcast -> 1, sc, shoutcast | Icecast -> 2, ic, icecast)
url: zeneszám vagy streaming útvonala. Alapértelmezett érték: null
port: csatlakozási portszám. Alapértelmezett érték: 8000
mountpoint: csatlakozási pont. Ezt az adatot a SHOUTcast rádiószerver esetében is meg kell megadni, aminek a megnevezése streampath (sp). A rádiószerver adatai csak így kérhetők le. Alapértelmezett érték: null
interval: frissítési idő másodpercben. Alapértelmezett idő: 15

5. albumArt({...})

A funkció képes meghatározni és megjeleníteni a zeneszám album borítóját a rádiószerver adatai alapján.

Az alábbi kód egy alapértelmezett beállítást használ, mellyel az aktuális zeneszám album borítóját lehet lekérdezni. A mediaElement engedélyezve, a frissítési idő 5 másodperc, animáció engedélyezve, a pozíció center, vagyis középen jelenik meg. A hibátlan lekérdezéshez minden csatlakozási pont, illetve az url előtag (http vagy https) megadása szükséges.

<head> <script src="https://freemedia.hu/js/media-info.umd.min.js"></script> </head> <div class="row"> <div class="col-sm-6" id="albumart"></div> <div class="col-sm-6" id="albumart2"></div> </div> <audio id="myalbumart" controls src=""></audio> <script> window.onload = () => { albumArt({ containerId: "albumart", mediaId: "myalbumart", mediaElement: true, animation: true, position: "center", width: 120, height: 120, platform: 2, url: "https://freestream.hu", port: 8340, mountpoint: "hardstyle" }); albumArt({ containerId: "albumart2", animation: true, position: "center", width: 120, height: 120, platform: 1, url: "https://freestream.hu", port: 8000, mountpoint: "ebm_radio" }); }; </script>

containerId: itt jelenik meg a rádióállomás műfajai. Ha nincs megadva, automatikusan létrehozza az alkalmazás. Alapértelmezett érték: null (ajánlott megadni egyedi azonosítót)
mediaId: lejátszó azonosítója. A megadott azonosítójú lejátszó szerver adatait jeleníti meg. Alapértelmezett érték: audio
mediaElement: a rádiószerver adatait lejátszó nélkül is le lehet kérdezni. Ez a beállítás azt szabályozza. Amennyibe a lejátszó létre van hozva egyedi azonosítóval, de a mediaElement: false, a lejátszó szintén nem fog látszani. A hozzáadott lejátszó a megadott streaminget fogja sugározni. Alapértelmezett érték: false (beállítható érték(ek): true | false)

animation: animáció engedélyezése az albumborítóhoz. Alapértelmezett érték: false (beállítható érték(ek): true | false)
titleTag: elem típusa a konténeren belül, ahol a rádióállomás neve megjelenik. Alapértelmezett érték: h3 (beállítható érték(ek): minden olyan elem, ami szöveges tartalom megjelenítésére alkalmas. (Például: h1, h2, h3, h4, h5, h6, p, span, div))
titleColor: szövegszín beállítása. Alapértelmezett szín: HEX -> #4caf50 | RGB -> rgb(76, 175, 80) | HSV -> hsv(122°, 57%, 69%) | HSL -> hsl(122°, 39%, 49%)
backgroundColor: a szövegdoboz háttérszíne. Alapértelmezett érték: transparent (átlátszó)
startGradient: színátmenet beállítás a gradient stílushoz. Alapértelmezett érték: #74fc7a
centerGradient: színátmenet beállítás a three-gradient stílushoz. Alapértelmezett érték: #0a540d
endGradient: színátmenet beállítás a gradient stílushoz. Alapértelmezett érték: #4caf50
position: szöveg pozíciója a konténerhez képest. Alapértelmezett érték: left (beállítható érték(ek): left | center | right)
waitText: várakozási szöveg, amig a rádióállomás neve megjelenik. Alapértelmezett szöveg: Betöltés...
volume: hangerő beállítása. Alapértelmezett érték: 1 (beállítható érték(ek): 0 (néma), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5 (50% - os hangerő), .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (teljes hangerő))
opacity: átlátszóság beállítása. A beállítás módosítása nagyban befolyásolhatja a nem animált stílus beállításokat. Alapértelmezett érték: 1 (beállítható érték(ek): 0 (átlátszó), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5, .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (nem átlátszó))
italic: dőltbetűs szöveg engedélyezése. A beállítás nem minden funkciónál alkalmazható. Alapértelmezett érték: false (beállítható érték(ek): true | false
showBorder: szegély megjelenítése a zeneszám körül. Ha engedélyezi egy automatikus belső térköz jelenik meg a szegély és a szöveg között. Alapértelmezett érték: false (beállítható érték(ek): true | false)
borderWidth: szegély vastagsága. Alapértelmezett érték: 1 (vagyis 1px)
borderColor: szegély színe, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: #3dad41
borderRadius: szegély kerekítés pixelben, ha engedélyezve van a szegély megjelenítése. Alapértelmezett érték: 4 (vagyis 4px)
platform: rádiószerver típusa. Alapértelmezett érték: 1 (vagyis SHOUTcast) (beállítható érték(ek): SHOUTcast -> 1, sc, shoutcast | Icecast -> 2, ic, icecast)
url: zeneszám vagy streaming útvonala. Alapértelmezett érték: null
port: csatlakozási portszám. Alapértelmezett érték: 8000
mountpoint: csatlakozási pont. Ezt az adatot a SHOUTcast rádiószerver esetében is meg kell megadni, aminek a megnevezése streampath (sp). A rádiószerver adatai csak így kérhetők le. Alapértelmezett érték: null
interval: frissítési idő másodpercben. Alapértelmezett idő: 15

6. mediaInfo({...})

A funkció képes meghatározni és megjeleníteni az összes adatot a rádióállomásról a rádiószerver adatai alapján.

Az alábbi kód egy alapértelmezett beállítást használ, mellyel az elérhető adatokat lehet lekérdezni a rádiószerverről. A mediaElement engedélyezve, a frissítési idő 5 másodperc, animáció engedélyezve, a pozíció center, vagyis középen jelenik meg. A hibátlan lekérdezéshez minden csatlakozási pont, illetve az url előtag (http vagy https) megadása szükséges.

<head> <script src="https://freemedia.hu/js/media-info.umd.min.js"></script> </head> <div class="col-12" id="media-info"></div> <div class="col-12" id="media-info2"></div> <audio id="mymedia-info" controls src=""></audio> <script> window.onload = () => { mediaInfo({ containerId: "media-info", mediaId: "mymedia-info", mediaElement: true, animation: true, position: "center", platform: 2, url: "http://stream.syntheticfm.com", // Synthetic FM - The radio for the Synth lovers port: 8040, mountpoint: "live" }); mediaInfo({ containerId: "media-info2", animation: true, position: "center", platform: 2, url: "http://radio.dawnshadow.se", // Downshadow Radio port: 8000, mountpoint: "stream" }); }; </script>

containerId: itt jelenik meg a rádióállomás műfajai. Ha nincs megadva, automatikusan létrehozza az alkalmazás. Alapértelmezett érték: null (ajánlott megadni egyedi azonosítót)
mediaId: lejátszó azonosítója. A megadott azonosítójú lejátszó szerver adatait jeleníti meg. Alapértelmezett érték: audio
mediaElement: a rádiószerver adatait lejátszó nélkül is le lehet kérdezni. Ez a beállítás azt szabályozza. Amennyibe a lejátszó létre van hozva egyedi azonosítóval, de a mediaElement: false, a lejátszó szintén nem fog látszani. A hozzáadott lejátszó a megadott streaminget fogja sugározni. Alapértelmezett érték: false (beállítható érték(ek): true | false)

animation: animáció engedélyezése az albumborítóhoz. Alapértelmezett érték: false (beállítható érték(ek): true | false)
showPlatform: engedélyezi / letiltja a rádiószerver megjelenítését. Alapértelmezett érték: true (beállítható érték(ek): true | false)
showArtwork: engedélyezi / letiltja az album borító megjelenítését. Alapértelmezett érték: true (beállítható érték(ek): true | false)
showTitle: engedélyezi / letiltja a rádió nevének megjelenítését. Alapértelmezett érték: true (beállítható érték(ek): true | false)
showGenre: engedélyezi / letiltja a műfaj(ok) megjelenítését. Alapértelmezett érték: true (beállítható érték(ek): true | false)
showUsers: engedélyezi / letiltja a rádiószerver felhasználóinak megjelenítését. Alapértelmezett érték: true (beállítható érték(ek): true | false)
width: albumborító szélessége. Alapértelmezett érték: 60 (pixel)
height: albumborító magassága. Alapértelmezett érték: 60 (pixel)
showBorder: konténer szegély engedélyezése. Ha engedélyezi egy automatikus belső térköz jelenik meg a szegély és a szöveg között. Alapértelmezett érték: true (beállítható érték(ek): true | false)
borderWidth: szegély vastagsága pixelben. Alapértelmezett érték: 1
borderColor: a szegély színe. Alapértelmezett érték: #3dad41
borderRadius: konténer szegélyének a kerekítése pixelben. Alapértelmezett érték: 12
artworkRadius: albumborító szegélyének a kerekítése az unit beállítás szerinti mértékegységgel. Alapértelmezett érték: 50
unit: albumborító szegélyének a kerkítéshez használt mértékegysége. Alapértelmezett érték: % (beállítható érték(ek): % | px. Ha más egységet ad meg az alapértelmezett % - ot fogja használni.)
titleTag: elem típusa a konténeren belül, ahol a rádióállomás neve megjelenik. Alapértelmezett érték: h3 (beállítható érték(ek): minden olyan elem, ami szöveges tartalom megjelenítésére alkalmas. (Például: h1, h2, h3, h4, h5, h6, p, span, div))
color: a megjelenített szerveradatok színe. Alapértelmezett érték: #555
genreColor: a műfaj egyedileg megadható színe. Alapértelmezett érték: #800080
titleColor: rádióállomás nevének színbeállítása. Alapértelmezett szín: HEX -> #4caf50 | RGB -> rgb(76, 175, 80) | HSV -> hsv(122°, 57%, 69%) | HSL -> hsl(122°, 39%, 49%)
backgroundColor: a szövegdoboz háttérszíne. Alapértelmezett érték: transparent (átlátszó)
position: szöveg pozíciója a konténerhez képest. Alapértelmezett érték: left (beállítható érték(ek): left | center | right)
waitText: várakozási szöveg, amig a rádióállomás neve megjelenik. Alapértelmezett szöveg: Betöltés...
volume: hangerő beállítása. Alapértelmezett érték: 1 (beállítható érték(ek): 0 (néma), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5 (50% - os hangerő), .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (teljes hangerő))
opacity: átlátszóság beállítása. A beállítás módosítása nagyban befolyásolhatja a nem animált stílus beállításokat. Alapértelmezett érték: 1 (beállítható érték(ek): 0 (átlátszó), .1 -> 0.1, .2 -> 0.2, .3 -> 0.3, .4 -> 0.4, .5 -> 0.5, .6 -> 0.6, .7 -> 0.7, .8 -> 0.8, .9 -> 0.9, 1 (nem átlátszó))
platform: rádiószerver típusa. Alapértelmezett érték: 1 (vagyis SHOUTcast) (beállítható érték(ek): SHOUTcast -> 1, sc, shoutcast | Icecast -> 2, ic, icecast)
url: zeneszám vagy streaming útvonala. Alapértelmezett érték: null
port: csatlakozási portszám. Alapértelmezett érték: 8000
mountpoint: csatlakozási pont. Ezt az adatot a SHOUTcast rádiószerver esetében is meg kell megadni, aminek a megnevezése streampath (sp). A rádiószerver adatai csak így kérhetők le. Alapértelmezett érték: null
interval: frissítési idő másodpercben. Alapértelmezett idő: 15