Hoe om klank by 'n HTML5-webbladsy te voeg

HTML5 maak dit maklik om klank en musiek op jou webblaaie by die element te voeg. Trouens, die moeilikste ding om te doen, is om die veelvoudige bronne te skep wat jy nodig het om seker te maak dat jou klanklêers op die wydste verskeidenheid blaaiers speel.

Die voordeel van die gebruik van HTML5 is dat jy klank kan insluit net deur 'n paar tags te gebruik. Die blaaiers speel dan die klank net soos wat hulle 'n beeld sou vertoon wanneer jy 'n IMG- element gebruik.

Hoe om klank by 'n HTML5-webbladsy te voeg

Jy benodig 'n HTML-redakteur , 'n klanklêer (verkieslik in MP3-formaat) en 'n klank-lêer-omskakelaar.

  1. Eerstens het jy 'n klanklêer nodig. Dit is die beste om die lêer op te neem as 'n MP3 ( .mp3 ) aangesien dit hoë klankgehalte het en word ondersteun deur die meeste blaaiers (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ en Safari 5+).
  2. Skakel jou lêer na Vorbis-formaat ( .ogg ) om in Firefox 3.6+ en Opera 10.5+ ondersteuning by te voeg. U kan 'n omskakelaar soos een op Vorbis.com gebruik. Jy kan ook jou MP3 omskep in 'n WAV-lêerformaat ( .wav ) om Firefox en Opera-ondersteuning te kry. Ek beveel aan dat jy jou lêer in al drie soorte plaas, net vir sekuriteit, maar die meeste wat jy nodig het is MP3 en een ander soort.
  3. Laai al die klanklêers op na u webbediener en maak 'n nota van die gids waarin u dit gestoor het. Dit is 'n goeie idee om dit in 'n subgids te plaas net vir klanklêers, soos die meeste ontwerpers beelde in 'n prente- gids stoor.
  4. Voeg die AUDIO element by jou HTML-lêer waar jy wil hê dat die klank lêer kontroles vertoon word.
  5. Plaas SOURCE- elemente vir elke klanklêer wat jy in die AUDIO- element oplaai:
  1. Enige HTML in die AUDIO- element sal gebruik word as 'n terugval vir blaaiers wat nie die AUDIO- element ondersteun nie. Voeg dus 'n paar HTML by. Die maklikste manier is om HTML toe te voeg om die lêer te laai, maar jy kan ook HTML 4.01-inbeddingmetodes gebruik om die klank te speel. Hier is 'n eenvoudige terugval:

    Jou blaaier ondersteun nie klankweergawe nie, laai die lêer af:

    1. MP3
    2. Vorbis , WAV
  2. Die laaste ding wat jy moet doen is om jou AUDIO- element te sluit:
  3. Wanneer u klaar is, moet u HTML soos volg lyk:
    1. Jou blaaier ondersteun nie oudio-speel nie, laai die lêer af:

    2. MP3
    3. Vorbis
    4. WAV a>

Bykomende wenke

  1. Maak seker dat u die HTML5 doctype () gebruik sodat u HTML sal valideer
  2. Hersien die eienskappe wat beskikbaar is vir die element om te sien watter ander opsies jy by jou element kan voeg.
  3. Let daarop dat ons die HTML opstel om die kontrole by verstek in te sluit en die outomatiese afspeel af te skakel. U kan dit natuurlik verander, maar onthou dat baie mense klank vind wat outomaties begin / dat hulle nie kan beheer dat dit op sy beste is nie, en sal dikwels die bladsy verlaat wanneer dit gebeur.