Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Site Elements
Webdesign

Gumawa ng isang Customized HTML5 Audio na Player

by
Difficulty:IntermediateLength:LongLanguages:

Tagalog (Wikang Tagalog) translation by Robert Alexander (you can also view the original English article)

Sa pagtuturo na ito aking ipapakikilala sa iyo ang HTML5 audio at ipapakita sa iyo kung paano mo maaaring gumawa ng iyong sariling player.

Kung gusto mo ng mabilis na paraan, tingnan ang hinanda na na HTML5 Audio Player na ito ay magagamit mula sa Envato Market. Pinapayagan ka nitong gumawa ng mga playlist mula sa iba't ibang mga mapagkukunan, at may malaking hanay ng mga pagpipilian sa pag-customize.

HTML5 Audio Player with Playlist
HTML5 Audio Player sa Playlist

Maaari ka ring makahanap ng maraming mga eksperto sa HTML5 sa Envato Studio upang tulungan ka.


Panimula

Hanggang ngayon ang pagpapatupad ng audio sa isang proyektong web ay isang nakakapagod na proseso na umaasa nang malaki sa mga plugin ng 3rd party tulad ng Flash. Simula ng kilalang di-pagtanggap ng iPhone ng plugin at ang balita na hindi na sinusuportahan ng Adobe ang Flash para sa mobile, maraming mga developer ang naghahanap sa iba pang mga paraan upang isama ang audio sa kanilang mga proyekto. Dito na papasok ang HTML5 audio upang malutas ang problema.

Kahit na ang HTML5 ay nagbibigay ng isang pamantayan para sa pagpapatugtog ng mga file na audio sa web, ito pa rin ay nasa pag-uumpisa at may mahabang proseso pa rin na kailangan gawin bago ito ay maaaring makapagbigay ng lahat ng bagay na ang iba pang mga plugin tulad ng Flash na audio ay kayang ibigay. Gayunpaman, para sa karamihan ng mga pangangailangan, ito ay higit pa sa sapat.


Simpleng Html5 Audio

Ang pinakasimpleng paraan upang ipatupad ang audio sa isang web na page gamit ang HTML5 ay ang paggamit ng bagong audio na tag. Idagdag ito sa iyong HTML5 na dokumento gamit ang sumusunod na code:

Kung titingnan mo ang code na nasa itaas makikita mo na ipinahayag ko ang tag na <audio> at tinukoy ang katangian ng mga kontrol, upang makita namin ang mga default na kontrol para sa player.

Nakalagay sa <audio> ay mayroon kaming dalawang tag na 'src'. Ang isa ay tumutukoy sa isang MP3 na track at ang iba ay tumutukoy sa OGG na format. Ang OGG na format ay bukod tanging ginagamit upang pahintulutan ang musika na tumugtog sa Firefox dahil sa mga isyu ng paglilisensya. Ang Firefox ay hindi sumusuporta sa MP3 nang hindi gumagamit ng isang plugin. Isang hanay ng teksto Ang iyong browser ay hindi sumusuporta sa audio na elemento. Pinapaalam sa mga gumagamit ng hindi suportadong mga browser kung ano ang nangyayari.


Ang default HTML5 audio player

Mga Html5 Audio Tag na Katangian

Maliban sa pagsuporta sa mga katangian ng global na HTML5,  ang tag ay sumusuporta rin sa isang hanay ng mga katangiang natatangi sa sarili nito.

  • autoplay - Ito ay maaaring itakda na "totoo" o iwanang blanko "" upang tukuyin kung ang track ba ay dapat otomatikong tumugtog sa sandaling magload ang page.
  • mga kontrol - Gaya ng nakikita sa halimbawa sa itaas, tinutukoy nito kung ang mga nakalagay na kontrol tulad ng 'play, pause' atbp ay dapat bang ipakita.
  • loop - Ito ay maaaring itakda sa "loop" at tumutukoy kung ang track ay dapat bang tugtugin muli sa sandaling ito ay tapos na.
  • preload - Maaaring itakda ito sa "auto" (na naglalarawan kung dapat mag-load ang file sa sandaling mag-load ang page), "metadata" (na naglalarawan kung ang metadata lamang, ang titulo ng track atbp ay dapat i-load), "none" (na nagdidikta na ang browser ay hindi dapat i-load ang file kapag naglo-load ang page).
  • src - Maaari rin itong makita sa halimbawa sa itaas at tumutukoy sa url ng musika na dapat na itugtog ng audio na tag.

Pagpihit nito hanggang sa Eleven

Sa mga huling ilang hakbang tiningnan natin ang pinakasimpleng anyo ng HTML5 audio. Kapag sinimulan nating gamitin ang audio na tag na may kasamang javascript maaari nating simulang lumikha ng ilang mga talagang kawili-wili at kapaki-pakinabang na audio na player. Tingnan natin kung ano ang magagawa ng jQuery para sa atin. Pagkatapos nating maitakda ang dokumento na handa sa jQuery, maaari nating lumikha ng isang bagong audio na variable upang humawak sa ating file na audio na kasing simple ng mga ito:

Ito ay talagang ganyan ka simple! Pagkatapos, kapag gusto nating magsagawa ng isang aksyon sa audio maaari nating simulan ito sa pamamagitan ng paggamit ng variable na 'myaudio'. Narito ang isang listahan ng mga aksyon na maaari nating gawin sa variable.  Tandaan ang mga ito, gagamitin natin ang ilan sa mga ito mamaya sa pagtuturo kapag gagawa tayo ng ating audio na player.

Kung gusto mong tawagin ang isang function sa sandaling natapos na ang pagpapatugtog ng audio maaari mong gamitin ang 'myaudio.addEventListener (' natapos ', myfunc)' - Tatawagin nito ang 'myfunc ()' sa sandaling matapos na ang audio.


Paglikha ng HTML5 Audio Player: Markup

Ngayon na mayroon ka ng kaunting background sa HTML5 na audio at naunawaan na ang mga pangunahing alituntunin oras na para ilagay ang mga ito sa pagsasanay at lumikha ng na-customize na HTML5 audio player. Aking lalaktawan ang disenyo na yugto dahil ito ay labas na sa saklaw ng pagtuturo na ito, ngunit maaari mong i-download ang kasamang source code at mag-browse sa PSD upang makakuha ng ilang ideya kung paano ito ipagsasama.

Ang nasa pinakataas ng dokumento ay binubuo ng HTML5 na doctype. Ang Yahoos CSS Reset, ang Google web font 'Lobster' para sa pamagat. Pagkatapos ay mayroon tayong pinakabagong jQuery at ang custom na JavaScript file na js.js. At sa huli mayroon tayong html5slider.js na nagpapahintulot sa Firefox na ipakita ang HTML5 input range type , na gagamitin natin para sa audio na scrubber.

Matapos ang h1 na pamagat lumikha ako ng isang div na may isang class ng "container" at "gradient". Gumawa ako ng isang hiwalay na class ng gradient dahil ito ay muling gagamitin sa ibang mga elemento. Sa loob ng ".container" Nagdagdag ako ng isang larawan (na kung saan ay magiging balat ng album), pagkatapos ay ang tatlong mga anchor na tag na gaganap bilang mga kontrol para sa player. Sa pagitan ng mga ito makikita mo ang scrubber / HTML5 range input na field.


Paglikha ng HTML5 Audio Player: Mga Estilo

Sa halip na pumunta sa bawat aspekto ng CSS, ibibigay ko sa iyo ang isang pangkalahatang-ideya at tandaan ang anumang mga partikular na bahagi na maaaring gusto mong bigyan ng pansin.

Sa code sa ibaba nilikha ko ang gradient para sa player na nabuo gamit ang CSS gradient editor na ito. Nilikha ko ang player na ".container" na may ilang mga transition na CSS3.

Mapapansin mo na ginamit ko rin ang CSS3 box sizing na katangian na nakatakda na 'border-box'. Pinapayagan nito ang 10px na padding sa paligid ng container upang maisama sa loob ng lapad na aking itinakda, sa kasong ito 427px. Kung hindi ko ginamit ito ang padding ay idaragdag sa 427px na gagawing mas malaki ang container kaysa sa talagang gusto ko. Ito ay nagiging pangkaraniwang kasanayan sa mga panahong na ito upang ilapat ang * {box-sizing: border-box;} na kung saan talagang nakakagawa ng isang mas likas na paraan ng pag-e-estilo.

Nagdagdag din ako ng ilang mga transisyon ng CSS3 sa ".coverlarge" upang pahintulutan ang ilang magagandang transisyon sa tuwing nagbukas ang player sa unang pagkakataon. Ang CSS ay maaaring magmukhang medyo  malabis sa una, ngunit marami sa mga ito ay tinukoy na prefix ng browser upang matiyak na ang audio na player ay magmukha at gumana ng pareho sa iba't ibang mga browser.


Paano dapat ang hitsura ng audio na player sa yugtong ito

Kapag nakumpleto na ang container para sa player, oras na upang lumikha ng mga aktwal na kontrol. Ang karamihan sa mga pindutan ay nilikha gamit ang CSS sprites

Sa kasamaang palad ang IE ay hindi pa sumusuporta sa HTML5 range input kaya nagpasya ako na hindi ipakita ang audio na scrubber sa mga gumagamit ng IE. Kung ikaw ay nasa isang posisyon na kung saan iyan ay hindi katanggap-tanggap, maaari mong gamitin ang jQuery UI slider sa katulad na paraan na aking ginamit. Gayunpaman, napili ko na itago lamang ang scrubber, input {display:none\9!important;} Ito ay karaniwang nagtatago sa input mula sa mga gumagamit ng ie (tingnan ang thread na ito sa Stack Overflow para sa karagdagang impormasyon sa \9).

Ang problema sa HTML5 na range slider ay ilan lamang sa mga browser na sumusuporta sa custom na estilo para dito; karamihan mga webkit browser (Chrome at Safari). Opera at Firefox ay magpapakita lamang ng isang karaniwang na range slider, sa kasamaang palad. Kung kailangan mo ng custom na pag-e-estilo sa lahat ng mga browser maaari mong gamitin ang jQuery UI na slider tulad ng nabanggit kanina. Maaari mong makita ang custom na pag-e-estilo para sa mga webkit na browser sa  input::-webkit-slider-thumb attribute.


Paglikha ng HTML5 Audio Player: jQuery

Kapag ang pag-e-estilo at ang markup ay tapos na oras na upang ang player ay maisabuhay. Maaari nating gawin ito gamit ang javascript framework jQuery. Kapag ang jQuery na dokumento na handa na ay ipinahayag, lilikha tayo ng ilang mga variable sa loob kung saan maaari nating ilagay ang ating mga jQuery na object.

Sa "song" na variable sa itaas, makikita nyo na nagdeklara kami ng dalawang mga track. Ang OGG na format para sa Firefox at MP3 para sa iba pang mga browser. Pagkatapos ay lumikha ako ng isang kondisyonal na IF na statement ng sa gayon ay masuri natin kung ang browser ay maaaring tumtugtog ng MP3 o hindi. Kung kaya nito, maaari nating gawin ang "song" na variable ng mapagkukunan ang MP3 track - kung hindi man ay ipapatugtog nito ang  'OGG' na format.

Ang susunod na mga bagay na ating gagawin ay click na mga function na magpapahintulot sa atin na magpatugtog at magpatigil ng musika. Ginamit ko ang audio actionplay play() upang simulan ang audio, pagkatapos ay gamitin ang jQuery method replaceWith na kung saan ay pinapalitan ang pindutan ng pagpapatugtog ng pindutan ng pagpapatigil.

Idinagdag ko rin ang "coverLarge" at "containerLarge" na mga class sa "container" at "cover". Dahil idinagdag ko ang mga transisyon ng CSS3 sa mga ito kanina sa CSS  ito ay magdaragdag ng isang magandang transisyon sa tuwing magsisimula nang tumtugtog ang audio. Ang "pause" na function ay gumagana sa katulad na paraan, ngunit walang mga transisyon. Kapag na-click ito, pinapalitan nito ang pindutan ng pagpapatigil ng "play" na pindutan.

Ang mute at naka-mute na mga pindutan ay gumagana katulad ng mga pindutan ng pagpapatugtog at pagpapatigil, ngunit tumatawag sa mga kaugnay na aksyon at pinapalitan ang mga pindutan ng mga naaangkop na alternatibo.

Kapag ang gumagamit ay nag-click  sa "close" na pindutan tinatawag natin ang jQuery na alisin ang mga "containerLarge" at "coverLarge" na mga class. Itatago nito ang cover at isasara ang player. Ating ipapatigil ang player sa pamamagitan ng pagtawag sa pause() na aksyon at i-reset ang audio currentTime na maging katumbas ng 0. Tinatakda nito ang track pabalik sa simula.

Oras na upang lumipat sa audio na scrubber na binigyan ng isang id na "seek". Ang unang function ay upang payagan tayo upang ilipat ang scrubber sa anumang bahagi ng audio. Ginagawa ito sa pamamagitan ng pagpuna ng pagbabago tuwing may gumagalaw sa scrubber. Pagkatapos ay itatakda natin ang song.currentTime upang tumugma sa bahagi ng kanta kung saan nalipat ang scrubber. Itatakda din natin ang max na katangian upang maipakita ang haba ng kanta.

Ang huling bahagi ng jQuery ay upang gawin ang "#seek" scrubber na lumipat sa kahabaan ng audio. Ginagawa natin ito sa pamamagitan ng pagdaragdag ng isang event listener rito at sa tuwing ang audio time ay nag-uupdate tatawagin natin ang function. Nagtakda ako ng isang variable ng "curtime" upang makuha ang kasalukuyang songtime. Pagkatapos ay update ko ang halaga ng scrubber upang maipakita ang kasalukuyang posisyon ng oras ng audio.

At ito na iyon! Isang HTML5 audio player na maaari mong ipatupad sa iyong site o app.


Konklusyon

Tulad ng nabanggit kanina, ang HTML5 na audio ay nasa pag-uumpisa pa lamang at mayroon pa ring puwang para sa mga pagpapabuti. Sa ngayon ang audio ay dinisenyo para sa pagpapatugtog ng musika at samakatuwid ay laging mag-stream ng audio mula sa server na magreresulta sa ilang mga browser na magkaroon ng mga isyu sa pag-playback. Ito ay hindi talaga isang problema, ngunit nangangahulugan lamang na minsan ay magsisimula itong tumutugotg bago pa man ang audio ay ganap na na na-download.

Ito ay maaaring potensyal na maging isang isyu kung nais mong gamitin ang HTML5 audio para sa mga bagay tulad ng mga sound effect sa mga laro, o mga app na matindi sa audio. Sa kadahilanang ito ang aming mga kaibigan sa Google ay naisipang gumawa ng isang paraan upang mapabuti ang mga kahinaan ng audio na tag. Ang Google ay gumawa at nagpasa ng panukala sa W3C para sa "Web Audio API". Ito ay nagpapatunay na mas malakas kaysa sa nakalagay na na HTML5 na audio,  gayunpaman ang problema ngayon ay sa yugtong ito (maaari mo bang hulaan ?!) Gumagana lamang ito sa Chrome.

Maaari mong basahin ang mga karagdagan tungkol sa [] at tingnan ang ilang mga halimbawa sa Google cowd o tingnan ang web audio na spesipikasyon.

Umaasa ako na natuwa kang matuto tungkol sa HTML5 na audio at kung paano ka makakalikha ng iyong sariling mga player. Kasama sa aking player ay ang mga pangunahing kontrol, ngunit wala pipigil sa inyo sa pagdaragdag ng higit pang mga tampok tulad ng kontrol ng volume at kahit na ang pagdaragdag ng iyong sariling mga pasadyang mga animasyon. Sa kaunting pag-iisip at pag-e-eksperimento maaari ka talagang lumikha ng ilang mahusay na mga audio na player. I-download ang source code at ako ay umaasa na makita kung ano ang iyong nagawa!

At kung gusto mong makakita ng higit pang mga pagpipilian para sa paggawa na mga audio na player at iba pang media sa HTML5, tingnan ang Envato Market.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.