Integráció

A FreeMedia egy több fájlból álló online médiaeszköz, melyek egymástól elkülönítve is használhatók. Előnye, hogy nem igényel semmilyen külső könyvtárat, ezért önmagában is használható. A stílusok a JavaScript fájlba vannak ágyazva, melyek igény szerint személyre szabhatók.

Illessze az alábbi javascript kódok egyikét, a weboldal <head></head> részébe.

Ügyeljen arra, hogy a FreeMedia szkriptek közül egyszerre csak egy használható egyazon oldalon. Több szkript egyidejű használata összeomláshoz vezethet.

<!-- Médialejátszó --> <script src="https://freemedia.hu/js/media.umd.min.js" type="text/javascript"></script>
  1. Médialejátszó

    2. A zenelejá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. 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.

    <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" }); }; </script>

    Alapértelmezés szerint a szkript csak audio formátumokat képes lejátszani. Amennyibe szabályozni szeretné egy következő beállítást is meg kell adnia:

    <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" }); }; </script> >>> VAGY <<< <div id="media-container"></div> <script src="https://freemedia.hu/js/media.umd.min.js"></script> <script> window.onload = () => { createMediaPlayer({ containerId: "media-container", mediaType: "video" }); }; </script>

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, a dokumentáció részletesen bemutatja.

Illessze az alábbi javascript kódok egyikét, a weboldal <head></head> részébe.

Ügyeljen arra, hogy a FreeMedia szkriptek közül egyszerre csak egy használható egyazon oldalon. Több szkript egyidejű használata összeomláshoz vezethet.

<!-- Médialejátszó --> <script src="https://freemedia.hu/js/media.umd.min.js" type="text/javascript"></script> <!-- Vizualizáció --> <script src="https://freemedia.hu/js/visual.umd.min.js" type="text/javascript"></script>
  1. 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.
    2. <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>

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.

Az oldal tetején található vizualizáció a visual.umd.min.js fájlt, azon belül a createVU({...}) függvényt használja a vizualizáció megjelenítéséhez, mely a már beágyazott médialejátszóhoz használható és csak a lejátszás elindítása után jelenik meg.

Beágyazás

<-- Vizualizáció beágyazása --> <head> <script src="https://freemedia.hu/js/visual.umd.min.js"></script> </head> <-- Tároló (konténer) létrehozása a vizualizáció megjelenítéséhez --> <div id="media-container"></div> <-- Médialejátszó (zenei útvonal nélkül) --> <audio id="myAudio" controls src=""></audio> <-- Vizualizáció betöltése --> <script> window.onload = () => { // Megvárja míg az oldal teljesen betöltődik createVU({ // Beállítások inicializálása mediaId: "myAudio", // Lejátszó azonosítója containerId: "media-container", // Konténer azonosítója width: 800, // Vizualizáció hossza (pixel) height: 10, // Vizualizáció magassága (pixel) style: "retro", // Vizualizáció stílusa vertical: false, // Vertikális megjelenítés (kikapcsolva) url: "https://freestream.hu:8000/ebm_radio" // Zeneszám / Stream útvonala }); }; </script>