HTML5: llä on helppo lisätä ääntä ja musiikkia verkkosivuille elementin kanssa. Itse asiassa kaikkein vaikein tehtävä on luoda useita lähteitä, joiden avulla voit varmistaa, että äänitiedostot toimivat useimmissa selaimissa.
HTML5: n käyttö on se, että voit upottaa ääntä vain muutamalla tagilla. Selaimet sitten toistavat ääntä aivan kuten ne näyttäisivät kuvan, kun käytät IMG- elementtiä.
Kuinka lisätä äänen HTML5-verkkosivulle
Tarvitset HTML-editoriin , äänitiedostoon (mieluiten MP3-muotoon) ja äänitiedoston muuntimeen.
- Ensinnäkin tarvitset äänitiedoston. On parasta tallentaa tiedosto MP3-tiedostona ( .mp3 ), koska se on korkean äänenlaadun ja se tukee eniten selaimia (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ ja Safari 5+).
- Muunna tiedostoasi Vorbis-muodossa ( .ogg ) lisätäksesi Firefox 3.6 ja Opera 10.5+ -tuen. Voit käyttää muunninta, joka löytyy Vorbis.com:sta. Voit myös muuntaa MP3-tiedostosi WAV-tiedostomuotoon ( .wav ) saadaksesi Firefox- ja Opera-tuen. Suosittelen lähettämään tiedostosi kaikkiin kolmeen tyyppiin, vain turvallisuuden vuoksi, mutta eniten mitä tarvitset on MP3 ja toinen tyyppi.
- Lataa kaikki äänitiedostot verkkopalvelimellesi ja kirjoita luettelo hakemistosta, johon olet tallentanut. On hyvä sijoittaa ne aliverkkoon vain äänitiedostoille, kuten useimmat suunnittelijat tallentavat kuvat kuvakansioon.
- Lisää AUDIO- elementti HTML-tiedostoosi, johon haluat äänitiedoston ohjauksen näkyvän. <Äänisäätimet>
- Aseta SOURCE- elementit jokaiseen äänitiedostolle, jonka lataat AUDIO- elementin sisään:
-
- AUDIO- elementin sisällä olevaa HTML-koodia käytetään varmuuskopioina selaimille, jotka eivät tue AUDIO- elementtiä. Joten lisää lisää HTML-koodia. Helpoin tapa on lisätä HTML-tiedostoja, jotta ne voivat ladata tiedoston, mutta voit myös käyttää HTML 4.01-upotusmenetelmiä äänen toistamiseen. Tässä on yksinkertainen varoitus:
Selaimesi ei tue audiotoistoa, lataa tiedosto:
- Viimeinen asia, jonka tarvitset, on sulkea AUDIO- elementti:
- Kun olet valmis, HTML-koodisi pitäisi näyttää tältä: <Äänisäätimet>
Muita vinkkejä
- Varmista, että käytät HTML5-tyyppistä (), jotta HTML-koodi vahvistetaan
- Tarkastele elementtiin käytettävissä olevia määritteitä nähdäksesi mitä muita vaihtoehtoja voit lisätä elementteesi.
- Huomaa, että olemme määrittäneet HTML: n sisällyttämään valvonnan oletusarvoisesti ja automaattisen toiston sammuttamisen. Voit tietenkin muuttaa tätä, mutta muista, että monet ihmiset löytävät äänen, joka alkaa automaattisesti, ja että he eivät voi kontrolloida ärsyttävää parhaimmillaan ja usein jättävät sivun, kun näin tapahtuu.