Ako môžete vidieť na obrázku, tento prehrávač je úplne miniatúrny a nezabere toľko miesta ako tie, ktoré si sem poniektorý užívatelia popridávali. Viem, že je to možno trošku náročnejšie na vloženie, ale tak skúsme si to prebrať pekne od začiatku.

Tento mini prehrávač som umiestnil na jeden z mojich webov - www.snipi.sk - takže bude stále dostupný a preto aj vkladanie do blog.sk nie je až tak problematické, ako by sa možno pre niekoho zdalo.

Základný MP3 prehrávač je vytvorený vo FLASH-i, ale to myslím rozoberať netreba. Samotný prehrávač vyzerá nejako takto. Obsahuje informáciu o tom, v akej pozícii pieseň je a koľko minút má celkovo. Kým sa pieseň načítava, tak zobrazuje priebežne informáciu o tom, koľko minút sa už "stiahlo".

To, čo môžete vidieť v úvode stránky je ilustračný obrázok vloženého prehrávača spolu s nejakým popisom, ktorý sme si tam vložili, aby sme vedeli, o akú pieseň ide. Samozrejme, že sme neskôr celú funkcionalitu rozšírili, no to až keď sa nám podarí vloženie prvého malého prehrávača.

Základný HTML kód prehrávača je nasledovný:
<embed src="http://www.refresh.sk/mp3_player.swf?mp3file=http://www.refresh.sk/mf/RBUM.mp3&Player_PlayLabel=PLAY" width="100" height="19" type="application/x-shockwave-flash" loop="false" hspace="5" vspace="5" id="mp3player"></embed>

Vysvetlime si, kde sa čo nachádza:
Rozdelil som HTML kód tak, aby sme farebne vedeli rozlíšiť, kde je čo. Ako prvé sa volá URL, kde sa prehrávač nachádza. Potom tam ide otáznik (?), ktorý určuje parametre pre súbor. Ako parameter sa posiela informácia mp3file ktorá slúži na presné určenie súboru, ktorý sa má spúšťať (to jest tá daná MP3-ka). Po vložení tohto kódu do stránky by sa Vám mal načítať prehrávač, ktorý sa odvoláva na pesničku od Righteous Brothers - Unchained Melody.

Pekný - upravený - prehrávač so štýlmi
Aby Váš prehrávač vyzeral pekne - ako na prvom obrázku - je potrebné ho do niečoho "obliecť". Ako oblečenie by sme mu mohli dať nejaký ten objekt, ktorý by sme si mohli nazvať napríklad "player". Pre tento objekt by sme si teda mohli nadefinovať to, aby všetko čo sa v ňom bude nachádzať bolo vycentrované.

<style>
      #player {
             text-align: center;
      }
</style>

To nám však nespraví ani nadpis a dokonca ani informácie o pesničke, ktorá čaká v prehrávači. Takže si pridajme ešte jeden kontajner, ktorým to celé obalíme - napr. moj-prehravac. Tu je HTML:

<div id="moj-prehravac"> <span class="title">Môj prehrávač</span> <div id="player"> ... HTML PREHRAVACA ... </div> </div>

Ako ste si mohli všimnúť, pribol nám nadpis (<span class="title">Môj prehrávač</span>) no momentálne ešte nemá žiadne CSS, ktoré by definovalo ako má nadpis vyzerať. Rovnako tak nemá nič zadefinované ani moj-prehravac. Okrem toho ste si možno všimli, že tam nemáme zatiaľ ani autora pesničky (artist) a ani názov (songtitle). Tak si pozrime kompletný HTML kód.

<div id="moj-prehravac"> <span class="title">Môj prehrávač</span> <div id="player"> ... HTML PREHRAVACA ... </div> <span id="songArtist"> artist </span> <span id="songTitle"> title </span> </div>

Máme jednoduchý blok s prehrávačom a aj informáciami o pesničke, no nemáme to zatiaľ nijako upravené, tak si pozrime CSS, ktoré by tomu všetkému mohlo dať nejaký pekný vzhľad.

#player { margin-bottom: 5px; text-align: center; } #moj-prehravac { padding: 5px; border: 2px solid #d3d3d3; background-color: #f3f3f3; font-size: 10px; } #moj-prehravac .title { display: block; margin-bottom: 6px; font-weight: bold; color: #000; text-align: center; border-bottom: 1px solid #000; } #songArtist,#songTitle { display: block; width: 100%; text-align: center; } #songTitle { font-weight: bold; color: #3d3d3d; margin-bottom: 5px; }

Vysvetlime si toto CSS:
V prvom rade sme prikázali objektu moj-prehravac aby mal orámovanie o hrúbke 2 pixelov, tmavej sivej farby. Aby mal vnútorné odsadenie 5 pixelov a farbu pozadia mal jemne sivú. Veľkosť fontu by mala byť 10 pixelov. Ďalej sme určovali , že nadpis má byť v strede, hrubým písmom a má mať spodný rám o hrúbke 1 pixelu. Nadpis aj rám majú byť čierne. Predposledné je dvojité určenie, resp. zadefinovanie spoločných atribútov pre songArtist a songTitle. Oba objekty majú byť blokmi o šírke 100%, majú byť zarovnané na stred a majú mať odsadenie zhora 5 pixelov. Ako posledné je dodefinovanie songTitle, pričom songTitle bude mať aj spodné odsadenie 5 pixelov a navyše bude hrubým písmom.

Zhrnutie a možnosť použitia

Aby vedeli toto všetko pridať do stránok aj laici, tak tu je HTML kód, ktorý si môžete ľubovolne skopírovať a vložiť do Vášho blog-u cez možnosť "Rozšírenia".

<style> #moj-prehravac { padding: 5px; border: 2px solid #d3d3d3; background-color: #f3f3f3; font-size: 10px; } #moj-prehravac .title { font-weight: bold; display: block; color: #000; text-align: center; border-bottom: 1px solid #000; } #songArtist,#songTitle { display: block; width: 100%; text-align: center; } #songTitle { font-weight: bold; color: #3d3d3d; margin-bottom: 5px; } #player { margin: 5px; text-align: center; } #moj-prehravac .info { border-top: 1px solid #000; padding: 3px; text-align: right; font-size: 10px; } #moj-prehravac a,#moj-prehravac a:link { color: #3e3e3e; } #moj-prehravac a:hover { color: #000; } </style> <div id="moj-prehravac"> <span class="title">Môj prehrávač</span> <div id="player"> <embed src="http://www.refresh.sk/mp3_player.swf?mp3file=URLKMP3&Player_PlayLabel=HRAJ!" width="100" height="19" type="application/x-shockwave-flash" loop="false" hspace="5" vspace="5" id="mp3player"></embed> <span id="songArtist"> INTERPRET </span> <span id="songTitle"> SKLADBA </span> </div> <div class="info"><a href="http://vylepsenia.blog.pravda.sk/detail-maly-mp3-prehravac-na-blog.sk-.html" title="Vylepšenia pre blog.sk" target="_blank">vlepšenia pre blog</a> </div> </div>

Nezabudnite!!!
Treba zmeniť URLKMP3 = adresu k mp3 súboru, INTERPRET - Interpret pesničky, SKLADBA - názov pesničky.

Výsledkom Vášho snaženia a skopírovania vyššie uvedeného HTML je takýto jednoduchý prehrávač.

Veľa šťastia :o))) a hlavne veľa dobrých pesničiek ;)