Kuinka lisätä äänen HTML5-verkkosivulle

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 sitä

IMG elementti.

Kuinka lisätä äänen HTML5-verkkosivulle

Tarvitset HTML-editoriin, äänitiedostoon (mieluiten MP3-muotoon) ja äänitiedoston muuntimeen.

1. Ensinnäkin tarvitset äänitiedoston. On parasta tallentaa tiedosto MP3-muodossa (

   .mp3), sillä tämä on korkeaa äänenlaatua ja se tukee eniten selaimia (Android 2.3+, Chrome 6+, IE 9+, iOS 3+ ja Safari 5+).

2. Muunna tiedostosi Vorbis-muotoon (

   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.

3. Lataa kaikki äänitiedostot Web-palvelimelle ja kirjoita luettelo hakemistosta, johon olet tallentanut. On suositeltavaa sijoittaa ne alikansioon vain äänitiedostoille, kuten useimmat suunnittelijat tallentavat kuvat

   kuvien hakemistoon.

4. Lisää

   AUDIO elementti HTML-tiedostoosi, johon haluat äänitiedoston ohjauksen näkyvän.

5. Paikka

   LÄHDE elementtejä jokaiselle äänitiedostolle, jonka lataat

   AUDIO elementti:

6. 1. Mikä tahansa HTML: n sisällä

      AUDIO elementtiä käytetään varmuuskopioina selaimille, jotka eivät tue sitä

      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 varatoimitus:

      Selaimesi ei tue audiotoistoa, lataa tiedosto: MP3,

   2. Vorbis, WAV

7. Viimeinen asia mitä sinun tarvitsee tehdä on sulkea AUDIO-elementti:

   1. Kun olet valmis, HTML-koodisi pitäisi näyttää tältä:

   4. Selaimesi ei tue audiotoistoa, lataa tiedosto:

   5. MP3,

   6. vorbis,

   7. WAV

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.