Izvor: Baguje.com, 18.Feb.2013, 08:13 (ažurirano 02.Apr.2020.)
Stari dobri kasetofon – HTML5 audio plejer
Audio player
Susret drevnih i savremenih tehnologija – HTML5 audio plejer sa 3D dugmadima
Danas mnogi mladi ljudi jedva da nešto znaju o audio kasetama i kasetofonima. Oni su rođeni u digitalnoj eri CD-ova, DVD-ova, USB-ova i sličnih medija za slušanje muzike.
Stariji se sećaju koliko je ta tehnologija bila nesavršena i nezgodna za upotrebu. Audio trake su se često mrsile pa su morali da ih razmrsuju i po nekad čak ručno da namotavaju pomoću olovke. Osim toga, sa prolaskom vremena bi zvučni zapis na njima gubio kvalitet, dok na kraju ne bi postale skroz neupotrebljive. To je zbog prirode magnetne trake jer svaki veštački magnet posle nekog vremena izgubi osobine magneta i opet postane obično gvožđe. Tako je bilo i sa slojem gvozdene prašine kojim je plastična traka bila premazana.
Ipak, uprkos svim tim nedostacima, skoro svi su imali velike kolekcije muzike na kasetama. Naročito je bilo popularno snimanje muzike sa radio stanica pomoću uređaja koji su se zvali radio-kasetofoni. Radio-kasetofon nije imao nikave opcije za miksovanje i obradu zvučnog zapisa tako da su kolekcije bile zbrda-zdola nahvatane omiljene pesme od kojih većina nije bila čak ni snimljena u celosti jer je teško precizno pogoditi trenutak kad će na radiju pustiti našu omiljenu muziku i stisnuti dugme za snimanje. A tek prekidanje pesama reklamama…
Pronalazak audio kasete se dogodio pre 50 godina, ali nisam primetio da iko slavi taj jubilej. :)
“Godine 1962. kompanija Filips je izumela audio kasetu koja služi za čuvanje muzike a zvanično je predstavljena u Evropi u avgustu 1963. (na Berlinskom radio šou festivalu) a u Sjedinjenim Državama (firma “Norelco”) u novembru 1964. pod tržišnim nazivom ‘kompaktna kaseta’ (Compact Cassette).” - Compact Cassette – Wikipedia
Iskoristili smo taj jubilej kao zgodnu prilku da vam pokažemo primer upotrebe HTML5 i CSS3 kodiranja u svrhu reprodukcije audio sadržaja na vebu. Predstavljamo vam audio plejer koji imitira stari kasetofon. To je samo jedan zabavni eksperiment koj može biti poučan onima koji žele dublje da se upoznanju sa tajnama HTML5, CSS3 i Java script kodiranja. To nije baš savršena imitacija pravog kasetofona i programeri će verovatno naći dosta bagova. Zato ovo i pišemo za sajt BAGUJE. :)
Ko želi da prouči kako je sve to napravljeno, izvorne fajlove može da preuzme OVDE a plejer možete da pogledate i isprobate OVDE.
Pesme koje se nalaze na traci su četiri legendarne pesme iz 60-tih i 70-tih godina prošlog veka tj. iz vremena pojavljivanja audio kasete.
Zvučni efekti kasetofona su preuzeti sa sajta Freesound.org - ovde
Za opciju “volume control” je upotrebljen izvanredan KnobKnob jQuery plugin koji je napravio Martin Angelov.
Ikonički font upotrebljen za kontrolnu dugmad plejera je “Font Awesome” koji je pruzet ovde a onda je prilagođen potrebama ovog plejera pomoću fantastične on lajn aplikacije Fontello . Naglašavamo da je ovo samo eksperiment. Iako se ova demonstracija bavi tehnološkom praistorijom, ovaj demo radi samo na najnovijim pretraživačima, tako da ako koristite neke praistorijske pretraživače poput internet eksplorera 6 , 7 ili 8 teško da ćete uživati u ovom malom putovanju u prošlost.
DODATO 19.02.2013
Pošto su se neki žalili, evo da navedem odakle su uzeti besplatni izvorni skriptovi ovog plejera na osnovu kojih je napravljen ovaj naš:
http://tympanus.net/Development/CassettePlayer/
Post "Stari dobri kasetofon – HTML5 audio plejer" je objavio SkyBlue za sajt Baguje.COM, dana 18. 02. 2013.
Kategorije: CSS, Dizajn, HTML, JavaScript, jQuery, Kodiranje, Templates, Web dizajn | Tagovi: css3, HTML5, jquery
.jpg)
