You are on page 1of 7

Kako "ubaciti" mp3 player u blog ili web stranicu

U nekoliko navrata pisali smo o "ugradnji"/embed-ovanju raznih radio player-a u


blog ili web stranicu. Ovoga puta opisaćemo nešto sasvim drugačije - postavljanje
mp3 muzike...

U dosadašnjim člancima koji su se bavili temama implementiranja muzike u blog ili


web stanicu, objasnili smo reprodukovanje muzike putem link-a sa neke radio stanice - znači
poslužili smo se određenim player-om, te smo mu dodelili link/vezu do željene radio stanice čime u
stvari samo "prenosimo" već aktivan, određeni radio kanal neke radio st(R)anice.

Postoji mnogo načina da se mp3 muzika postavi na Web stranicu i isto tako veliki broj besplatnih
mp3 player-a koje možete pronaći na internet stranicama, a svi oni imaju svoje mane i prednosti.

Nakon dužeg testiranja nekoliko rešenja, odlučili smo se da vam predstavimo jedan kompleksniji
player (na bazi Flash-a), sa stranice musicplayer.sourceforge.net »

Player koji ćemo opisati nije poput većine, npr. posetimo neku web stranicu kliknemo da dugme
EMBED, dodamo link ka jednoj mp3 numeri i na kraju samo kopiramo kod i primenimo ga na svoju
web stranicu.

Ovaj primer biće nijansu komplikovaniji za primenu što će se, videćete na kraju, isplatiti pa
pročitajte ostatak teksta pažljivo.

Počećemo sa konkretnim primerom, Flash player-a za koji smatramo da je bolje rešenje od Windows
Media Player-a (preporuka - pročitaje naše mišljenje i objašnjenje na kraju članka).

Prvo ćemo nabrojati neke od osobina (za vas smo izdvojili one najbitnije) koje krase ovaj player:
prikaz rednog broja pesme
prikaz informacije o autoru muzike
prikaz naslova pesme
prikaz omota albuma
prikaz dužine trajanja pesme
mogućnost automatskog stratovanja player-a
mogućnost automatskog nastavka programa/pesme (to je u stvari jedna veoma bitna
karakteristika, gde slušalac npr. prestaje sa posetom vaše stranice i kasnije kada se na
nju vrati nastavlja sa programom tamo gde je stao - nema potrebe da ispočetka sluša
čitavu playlit-u , neka vrsta simulacije live radio emitovanja)
mogućnost podešavanja providnosti i stapanja player-a sa pozadinom web stranice
podešavanje boje player-a itd.
Veoma bitna karakteristika ovog player-a jeste reprodukovanje mp3 muzike koju ste upload-ovali na
neki server ( veoma jednostavno uputstvo i rešenje za upload i besplatno skladištenje podataka
naćićete OVDE » ) i to putem XSPF playliste koju ćete morati sami "napisati" - nije teško verujte,
samo tako zvuči - sve ćemo objasniti i za sve smo pripremili primere.

Predstoje nam sledeće radnje:

1. kopiranje skripte u HTML/Java Script gadžet našeg Bloga


2. upload fajla/player-a na neki besplatni host servis (koji koristite)
3. upload XSPF playlist-e na host servis

Da "ugradite"/embed-ujete ovaj player u vašu stranicu, prijavite se na vaš Blogspot nalog i pratite
putanju:
Kontrolna tabla » Dizajn » Elementi stranice » Dodaj gadžet... od gadžeta izaberite
HTML/JavaScript »

U prozoru koji ste "otvorili " nalepite/paste-ujte sledeći deo koda...

<object type="application/x-shockwave-flash" width="400" height="170"


data="http://OV DE_UNESITE_V AŠ_LINK_DO_FLASH_player a.swf?
playlist_ur l=http//OV DE_UNESITE_V AŠ_LINK_DO_playliste.xspf&autoplay=1&r epeat=all&autor esume=1">
<par am name="movie"
value="http://OV DE_UNESITE_V AŠ_LINK_DO_FLASH_player a.swf?
playlist_ur l=http://OV DE_UNESITE_V AŠ_LINK_DO_playliste.xspf&autoplay=1&r epeat=all&autor esume=1">
</object>

...zatim klik na opciju Sačuvaj, pa ponovo Sačuvaj, i na kraju Prikaži blog!

Za sada smo uradili samo neznatan deo "posla" budući da se player neće videti jer ga je prvo
potrebno upload-ovati, tj. postaviti na neki server koji pruža besplatnu uslugu file hosting-
a/"čuvanja" fajlova poput nama omiljenog Dopbox servisa. Isto važi i za XSPF playlist-u.
Prvo download-ujte player i playlist-u sa lokacije koju smo za vas pripremili
xspf_player_demo_player.rar download »

Sada fajl playlist-e i fajl player-a postavite tj. upload-ujte na host servis za koji ste se odlučili i
linkove markirane crvenom bojom u prehodnoj skripti zamenite vašim link-ovima do fajla player-a i
playlist-e!

Ukoliko ste sve uradili kako treba vaš player trenutno bi trebao da izgleda ovako...

Kliknite na play dugme i vidite/poslušajte kako player funkcioniše.

NAPOMENA: Molimo vas da ispoštujete pravilo te ne koristite na svojoj stranici i u svojim playlist-
ama link/veze do muzike koju smo postavili jer ista služi isključivo u demo svrhe - zamenite ih link-
ovima do svojih mp3 pesama - HVALA !

Za kraj ostaje nam još da objasnimo XSPF playlist-u. Nju ćemo predstaviti u vidu XML skripte ali kao
što rekosmo nije strašno ne odustajte! Nećemo detaljisati oko stvari koje će uneti zabunu već ćemo
jednostavno predstaviti XSPF playlist-u i segmente koji je čine, te objasniti kako da napravite svoju
- u tu svrhu pripremili smo vam i automatski XSPF playlist generator ako vam bude komplikovano ili
teško da je napravite "peške" tj. ručno.

Evo kako ta playlist-a izgleda:

<?xml ver sion="1.0" encoding="UTF-8"?>


<playlist ver sion="1" xmlns="http://xspf.or g/ns/0/">
<tr ackList>
<tr ack>
<location>http://LINK DO V AŠE PESME.mp3</location>
<title>OV DE RUČNO UKUCAJTE NAZIV PESME</title>
<cr eator >OV DE RUČNO UKUCAJTE IME AUTORA ILI GRUPE</cr eator >
<image>http://OV DE UNESITE LINK DO OMOTA ALBUMA.jpg</image>
<tr ackNum>OV DE UPIŠTE REDNI BROJ PESME NPR. 01</tr ackNum>
<dur ation>OV DE UPIŠITE DUŽINU TRAJANJA NUMERA NPR. 3:00</dur ation>
</tr ack>
</tr ackList>
</playlist>

Deo koda playliste koji smo upravo prestavili paste-ujte u uređivač teksta na vašem računaru npr.
Notepad i sačuvajte dokument kao npr. moja_playlista.xspf
Ovime smo predstavili playlistu - primetili ste sami, sa samo jednom muzičkom numerom. Za
sledeću numeru samo kopirajte ceo deo koda, počev od oznake <track> do oznake </track> i paste-
ujte/nalepite ga ispod oznake </track> prethodne pesme (napravite duplikat dela skripte i tu upišite
podatke vezane za sledeću numeru)... i tako redom za celu playlistu.

Naravno vi ne morate upisivati sve podatke koji se tiču pesme - samo ukoliko želite. Ako npr. ne
želite da se vidi redni broj numere, zatim ime autora i omot albuma slobodno deo skripte koji se
odnosi na pomenute opcije izbiršite - isto vaši za sve ostale atribute vezane za informacije o
numeri... dužina trajanja itd.

Svaki red skripte koji se odnosi na različiti deo informacije pesme označili smo vam različitom
bojom te ih tako možete brisati ukoliko smatrate da su suvišni.

Za kraj dela članka koji se odnosi na playlist-u, ukoliko kako rekosmo ne želite da je radite "ručno"
posetite stranicu koja vam nudi automatsko ispisivanje skripte za listu... emff sourceforge
playlistgenerator OVDE »

Ostaje nam još da objasnimo moguća podešavanja player-a.

U delu koda (gore) koji se odnosi na sam player plavom bojom označili smo parametre koji se odnose
na auto_play (automatsko pokretanje muzike, odmah po učitavanju stranice), zatim automatsko
ponavljanje playlist-e i autoresume - automatski nastavak reprodukovanja. Vrednost "0" nula,
odnosi se na isključenu opciju, a ukoliko neku od pomenutih opcija želite da "uključite", onda upišite
vrednost "1" jedan.

Ukoliko želite "dublje" da uđete u temu dodatnih podešavanja player-a koja se odnose na izgled (npr.
ne želite prikaz albuma čime vam ostaje prazno polje koje se ne uklapa u dizajn) u delu koda koji se
odnosi na player koji je markiran plavom bojom dodajte parametar...

&album=off

Tada bi vaš player trebao da izgleda ovako (kliknite na play dugme da se uverite)...

Još nekoliko verzija ovog player-a...

...a skripta za ovaj primer je sledeća...


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="108" height="17">
<par am name="movie" value="xspf_player .swf?&player _mode=mini" />
<par am name="quality" value="high" />
<par am name="wmode" value="tr anspar ent">
<embed sr c="xspf_player .swf?&player _mode=mini" quality="high" wmode="tr anspar ent"
type="application/x-shockwave-flash" width="108" height="17"></embed>
</object>

Dalje... minijaturni player...

...i skripta...

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="60" height="17">


<par am name="movie" value="xspf_player .swf?&player _mode=mini" />
<par am name="quality" value="high" />
<par am name="wmode" value="tr anspar ent">
<embed sr c="xspf_player .swf?&player _mode=mini" quality="high" wmode="tr anspar ent"
type="application/x-shockwave-flash" width="60" height="17"></embed>
</object>

Na kraju evo i button/dugme player-a...

...sa pratećom skriptom...

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"width="20" height="20">


<par am name="movie" value="xspf_player .swf?&player _mode=mini&skin_mode=on&counter =off&volume_btn=off" />
<par am name="quality" value="high" />
<par am name="wmode" value="tr anspar ent">
<embed sr c="xspf_player .swf?&player _mode=mini&skin_mode=on&counter =off&volume_btn=off" quality="high" wmode="tr anspar ent"
type="application/x-shockwave-flash"width="20" height="20"></embed>
</object>

Ukoliko se desi da neke od player-a u prethodnim primerima iz ovoga članka ne vidite, momoguće je
da host servis koji koristimo trenutno nije u funkciji - pokušajte sa ponovnim učitavajnem stranice
ili se na stranicu vratite kasnije.

Ostali parametri:
Za podešavanje širine i visine player-a, parametri
width="400" height="170"
(width-širina i height-visina, prepravite vrednosti u manje ili veće po želji)

Za podešavanje providnosti player-a koristite/dodajte parametar


&alpha=50
(vrednost 50 je u stvari 50% providnosti, promenite je u željenu).

Za podešavanje "stapanja" player-a sa pozadinom vaše web stranice parametar


&blend=1 ili npr. &blend=2

Za uključenje radio moda player-a parametar


&r adio_mode=1
(ovom funkcijom "naređujemo" player-u da kada stigne do poslednje pesme automatski učita novu
playlist-u - poslednja numera npr. prve playlist-e je u stvari link ka novoj playlist-i)

Za uključenje automatskog shuffle režima parametar


&shuffle=1

Za promenu boje teksta na player-u parametar


&txt_color =FF6600
(primer za narandžastu boju)

Za promenu jačine zvuka kojom će player "startovati" parametar


&volume_level=100
(primer za 100% tj. maksimalnu jačinu zvuka kojom će vaš player otpočeti sa radom)

Za automatsko ponavljanje kompletne playlist-e ili pojedinačne pesme, parametar


&r epeat=all
(ponavljanje kompletne playlist-e)
&r epeat=one
(ponavljanje jedne numere)

Za promenu boje button-a/dugmića player-a, parametar


&button_color =FF6600
(primer za narandžastu boju)

Za promenu pozadinske boje player-a, parametar


&bg_color =FF6600
(primer za narandžastu boju)

Ovim smo naveli najbitnije parametre za podešavanje player-a koji smo opisali u članku i polako
ćemo zaključiti temu.

Za kraj pročitajte još koji red gde se govori o izboru player-a - i o tome je ranije bilo reči ali nije
zgoreg ponoviti.

Nećemo govoriti o detaljima, "tehničnikm" prednostima i osobinama Flash playera ili WMP-a,
jednostavno osvrnućemo se na praktičnu primenu.
Najjednostavnije rešenje i odgovor na pitanje "Zašto Flash ili baš ovaj a ne Windows Media Player"
jeste sledeći (možda će zvučati smešno ali istina je) - jednostavno, veliki broj korisnika svih
operativnih sistema posećuje popularnu stranicu Youtube. Složićete se sa tim. E pa kad je tako zašto
mi ne bi smo to iskoristili? Ako neko posećuje Youtube stranicu znači da već mora imati instaliran
Flash player plug_in (dodatak) na svom računaru - u suprotnom neće moći gledati video snimke. Ako
već ima instalirani pomenuti dodatak lako će prilikom posete vašoj stranici moći da sluša muziku
koja se takođe reprodukuje player-om koji je u osnovi sličan sa pomenutim na Youtube stranici.
Nema potrebe (ukoliko ne koristi Win operativni sistem) da dodatno instalira potrebne dodatke za
Windows Media Player. Ne zaboravite korisnike mobilnih uređaja koji će takođe moći slušati muziku
reprodukovanu sa vaše stranice. Postigli smo kompatibilnost, zatim ne nerviramo poestioce stranice
sa "potrebom" da instaliraju "neki tamo" dodatak da bi uživali u muzici itd. To bi u velikoj meri
uticalo na smanjenje broja poseta.

Toliko za sada. Do sledećeg članka sve najbolje.

(*U ovom članku kor ištena su r ešenja i mater ijali - fajlovi i skr ipte sa str anica http://musicplayer .sour cefor ge.net i
http://www.xspf-player .com)

Објавио modd4fun
Ознаке: Besplatan radio, Besplatna muzika, Besplatne stvari, Flash, free music, Gadžet, HTML, Izgled, mp3, Muzika,
player, playlist, XML, XSPF

Newer Post Home Older Post

Powered by Blogger.