Paano Magdagdag ng Tunog sa isang Web Page ng HTML5

Pinadadali ng HTML5 na magdagdag ng tunog at musika sa iyong mga web page gamit ang elemento. Sa katunayan, ang pinakamahirap na gawin ay lumikha ng maraming mapagkukunan na kailangan mong tiyakin na ang iyong mga sound file ay naglalaro sa pinakamalawak na iba't ibang mga browser.

Ang pakinabang ng paggamit ng HTML5 ay maaari mong i-embed ang tunog sa pamamagitan lamang ng paggamit ng ilang mga tag. Kung gayon, ang mga browser ay nagpapatugtog ng tunog tulad ng pagpapakita ng isang imahe kapag gumagamit ka ng isang elemento ng IMG .

Paano Magdagdag ng Tunog sa isang Web Page ng HTML5

Kakailanganin mo ang isang HTML Editor , isang sound file (mas mabuti sa MP3 format), at isang sound file converter.

  1. Una, kailangan mo ng isang sound file. Pinakamainam na i-record ang file bilang isang MP3 ( .mp3 ) dahil mayroon itong mataas na kalidad ng tunog at sinusuportahan ng karamihan sa mga browser (Android 2.3+, Chrome 6+, IE 9+, iOS 3+, at Safari 5+).
  2. I-convert ang iyong file sa Vorbis na format ( .ogg ) upang idagdag sa Firefox 3.6+ at Opera 10.5+ na suporta. Maaari mong gamitin ang isang converter tulad ng isang natagpuan sa Vorbis.com. Maaari mo ring i-convert ang iyong MP3 sa WAV file format ( .wav ) upang makakuha ng suporta sa Firefox at Opera. Inirerekumenda ko ang pag-post ng iyong file sa lahat ng tatlong uri, para lamang sa seguridad, ngunit ang pinaka kailangan mo ay MP3 at isa pang uri.
  3. Mag-upload ng lahat ng mga file na audio sa iyong web server at gumawa ng isang tala ng direktoryo na iyong iniimbak ng mga ito. Mahusay na ideya na ilagay ang mga ito sa isang sub-directory para lamang sa mga file na audio, tulad ng karamihan sa mga designer na nag-i-save ng mga imahe sa isang direktoryo ng mga imahe .
  4. Idagdag ang elemento ng AUDIO sa iyong HTML file kung saan mo nais na maipakita ang mga kontrol ng sound file.
  5. Maglagay ng mga elementong SOURCE para sa bawat audio file na iyong ina-upload sa loob ng elemento ng AUDIO :
  1. Ang anumang HTML sa loob ng elemento ng AUDIO ay gagamitin bilang isang fallback para sa mga browser na hindi sumusuporta sa elemento ng AUDIO . Kaya magdagdag ng ilang HTML. Ang pinakamadaling paraan ay ang magdagdag ng HTML upang hayaan silang i-download ang file, ngunit maaari mo ring gamitin ang HTML 4.01 na mga pamamaraan ng pag-embed upang i-play ang tunog. Narito ang isang simpleng fallback:

    Hindi sinusuportahan ng iyong browser ang pag-playback ng audio, i-download ang file:

    1. MP3 ,
    2. Vorbis , WAV
  2. Ang huling bagay na kailangan mong gawin ay isara ang iyong elemento ng AUDIO :
  3. Kapag tapos ka na, ang iyong HTML ay dapat magmukhang ganito:
    1. Hindi sinusuportahan ng iyong browser ang audio playback, i-download ang file:

    2. MP3 ,
    3. Vorbis ,
    4. WAV

Mga Karagdagang Tip

  1. Tiyaking gamitin ang HTML5 doctype () upang ma-validate ang iyong HTML
  2. Suriin ang mga katangian na magagamit para sa elemento upang makita kung anong ibang mga opsyon ang maaari mong idagdag sa iyong elemento.
  3. Tandaan na naka-set up kami ng HTML upang isama ang mga kontrol sa pamamagitan ng default at pinatay ang autoplay. Maaari mong, siyempre, baguhin iyon, ngunit tandaan na maraming tao ang nakakakita ng tunog na nagsisimula nang awtomatiko / na hindi nila makontrol na maging nakakainis sa pinakamagaling, at kadalasang iiwan lamang ang pahina kapag nangyari iyon.