Kaip pridėti garso įrašą į HTML5 tinklalapį

HTML5 leidžia lengvai pridėti garsą ir muziką į savo tinklalapius su elementu. Tiesą sakant, pats sunkiausias dalykas yra sukurti keletą šaltinių, kurių reikia norint įsitikinti, kad jūsų garso failai rodomi daugelyje įvairių naršyklių.

HTML5 naudojimo privalumas yra tai, kad galite įterpti garso įrašą tik naudodami kelis žymas. Tada naršyklės paleidžia garsą taip, kaip rodytų vaizdą, kai naudojate IMG elementą.

Kaip pridėti garso įrašą į HTML5 tinklalapį

Jums reikės HTML redaktoriaus , garso failo (pageidautina MP3 formatu) ir garso failų keitiklio.

  1. Pirma, jums reikia garso failo. Geriausia įrašyti failą kaip MP3 ( .mp3 ), nes jis turi aukštą garso kokybę ir palaiko daugumą naršyklių ("Android 2.3+", "Chrome 6+", "IE 9+", "iOS 3+" ir "Safari 5+").
  2. Konvertuokite failą į "Vorbis" formatą ( .ogg ), kad galėtumėte pridėti "Firefox 3.6+" ir "Opera 10.5+" palaikymą. Galite naudoti tokį konverterį kaip rasti Vorbis.com. Jūs taip pat galite konvertuoti savo MP3 į WAV failo formatą ( .wav ), norėdami gauti "Firefox" ir "Opera" palaikymą. Rekomenduoju paskelbti failą visais trijų tipų, tik saugumo sumetimais, bet jums labiausiai reikia MP3 ir dar vieno tipo.
  3. Įkelkite visus garso failus į savo žiniatinklio serverį ir užsirašykite katalogą, kuriame juos išsaugojote. Geriausia įdėti juos į sub-katalogą tik garso failams, pavyzdžiui, dauguma dizainerių išsaugo paveikslėlius kataloge vaizdų .
  4. Pridėti AUDIO elementą į savo HTML failą, kuriame norite parodyti garso failų valdiklius.
  5. Įrašykite SOURCE elementus kiekvienam garso failui, kurį įkeliate į AUDIO elementą:
  1. Bet koks HTML elementas, esantis AUDIO elemento dalyje, bus naudojamas kaip atsarginė naršyklė, kuri nepalaiko AUDIO elemento. Taigi pridėkite tam tikrą HTML. Lengviausias būdas yra pridėti HTML, kad galėtumėte atsisiųsti failą, bet taip pat galite naudoti HTML 4.01 įterpimo metodus, kad atkurtumėte garsą. Čia yra paprastas atsarginis:

    Jūsų naršyklė nepalaiko garso atkūrimo, atsisiųskite failą:

    1. MP3
    2. Vorbis , WAV
  2. Paskutinis dalykas, kurį reikia padaryti, yra uždaryti AUDIO elementą:
  3. Kai baigsite, jūsų HTML turėtų atrodyti taip:
    1. Jūsų naršyklė nepalaiko garso atkūrimo, atsisiųskite failą:

    2. MP3
    3. Vorbis
    4. WAV

Papildomi patarimai

  1. Būtinai naudokite HTML5 doctype (), kad jūsų HTML būtų patvirtintas
  2. Peržiūrėkite elemento turimus atributus, kad pamatytumėte, kokias kitas parinktis galite pridėti prie savo elemento.
  3. Atkreipkite dėmesį, kad mes nustatėme HTML, norėdami įtraukti valdiklius pagal numatytuosius nustatymus ir išjungti automatinį grojimą. Žinoma, jūs galite tai pakeisti, bet nepamirškite, kad daugelis žmonių randa garsą, kuris prasideda automatiškai / kad jis negali kontroliuoti, kad jis būtų netinkamas geriausiu atveju, ir dažnai tiesiog palieka puslapį, kai tai įvyksta.