HTML: n oppiminen, osa 17: Kuinka lisätä ääntä (kappaleita) HTML: ään

Jotkut sivustot, kuten musiikkisivustot, palveluntarjoajatonline-kappaleiden, verkkokurssien tai muiden on tietysti sisällytettävä äänitiedostot verkkosivuston sisällöksi. Yleensä on olemassa kolme tyyppiä äänitiedostoja, joita voidaan toistaa, nimittäin digitaaliset äänitiedostot, musiikkitiedostot ja teksti puheeksi. Lisäksi voimme lisätä myös verkkosivulle inline-äänen.

Inline-ääni on ääni, joka sisältyyverkkosivu tai osana verkkosivua, jolla ääni toistetaan, kun selain ladataan. Mutta ennen kuin asennat sisäänrakennetun äänen verkkosivustolle, harkitse ensin, eikö sisäisen äänen käyttö häiritse vieraita lukemasta verkkosivuston sisältöä. Asenna sisäinen ääni verkkosivuille, joiden kävijöiden odotetaan kuulevan äänen.

Tässä aineistossa keskustelen siitä, kuinka lisätä kappaleita HTML: ään äänielementtejä käyttämällä. Tarkastellaan lisätietoja seuraavassa selityksessä:

Äänielementti

Audioelementti on uusi HTML5-lähtöelementtijota käytetään äänen, kuten kappaleiden, lisäämiseen toistettavaan HTML-tiedostoon. Ääniosien käyttö ilmaistaan tunnisteparilla <audio> .... </ Audio>. <audio> -tunnisteparien joukossa on lähdeelementti ja tekstiä voidaan lisätä, joka ilmestyy, jos selain ei tue äänielementtiä.

Audioelementissä on myös useita määritteitä, nimittäin:

ominaisuus	arvo	toiminto
autoplay	-	Määrittää, että ääni toistetaan heti, kun sivu on latautunut automaattisesti.
ohjaimet	-	Osoittaa, että ääniohjaimet (jokainen selain)on näyttö audio-ohjaimista, jotka ovat erilaisia - erilaisia) näytetään kuten soitin, joka sisältää yleensä komentoja, kuten toisto / tauko-painikkeen, liukusäätimen, äänenvoimakkuuden ja niin edelleen.
vaimea	-	Käytetään äänen mykistämiseen tai mykistämiseen, mikä tarkoittaa, että ääni toistetaan hiljaisesti alkukirjainten alussa.
silmukka	-	Käytetään toistetun äänen toistoon.
src	Äänitiedoston sijainti-URL	Ilmaisee äänitiedoston tai URL-osoitteen tallennuspaikan, joka osoittaa äänitiedoston sijainnin.
preload	auto, ei mitään, metadata	Osoittaa kuinka tärkeätä ääntä on ladattava, kun verkkosivu ladataan.

Src ja ohjausmääritteet

Tässä on esimerkki koodista, joka käyttää scr- ja control-määritteitä HTML: ssä:

<!DOCTYPE html>
<html>
<head>
<title>Atribut src di elemen audio</title>
</head>
<body>
<audio src="honestly.mp3" controls></audio>
</body>
</html>

Ohjausominaisuuden käyttö tuottaa ääniohjaimet, jotka näyttävät erilaisilta jokaisella selaimella. Suosittelen, että lisäät tämän ominaisuuden. Katso ero alla:

kromi

Firefox

Kirjoitin juuri src-määritteessä honestly.mp3 vain siksi, että äänitiedoston sijainti on yksi-kansio HTML-tiedoston kanssa. Olen selittänyt useita kertoja tiedoston sijainti-URL-osoitteen kirjoittamisesta tähän src-määritteeseen, joista yhden näet materiaalissa kuinka lisätä kuvia HTML-muotoon.

Jos käytät vain src-määrittettä suoraan<audio> -tunnisteessa käytetään vain yhtä äänimuotoa. Samaan aikaan edellisen selityksen perusteella on selvää, että kaikki selaimet eivät tue kaikkia formaatteja.

Joten ääni voidaan silti tukeaEri selaimet käyttävät useampaa kuin yhtä äänimuotoa käyttämällä lähdeelementtejä, jotka on merkitty <lähteen> -tunnisteella. Audioelementtiin liittyvän lähdeelementin sisältämät attribuutit ovat:

ominaisuus	arvo	toiminto
src	Äänitiedoston sijainti-URL	Ilmaisee äänitiedoston tai URL-osoitteen tallennuspaikan, joka osoittaa äänitiedoston sijainnin.
tyyppi	MIME_TYPE	Määritä äänen MIME-tyyppi

Tässä on taulukko MIME-tyypeistä:

Tiedostomuoto	Mediatyyppi
Mp3	ääni / mpeg
wav	ääni / wav
ogg	ääni / ogg

Tässä on esimerkki sen kirjoittamisesta ja käyttämisestä HTML: ssä:

<!DOCTYPE html>
<html>
<head>
<title>Elemen source di HTML</title>
</head>
<body>
<audio controls>
<source src="honestly.mp3" type="audio/mpeg">
<source src="honestly.ogg" type="audio/ogg">
<source src="honestly.wav" type="audio/wav">
Gagal memutar lagu
</audio>
</body>
</html>

Kun HTML-tiedosto suoritetaan, tulokset ovat seuraavat:

Jos yllä oleva HTML-koodi suoritetaan, vainvain yksi ääni ladataan, ei kaikkia kolmea, koska tätä tyyppimääritettä käytetään vain tiedoston MIME-tyypin määrittämiseen, se voi olla kuvia, ääntä, videota ja niin edelleen.

Lisäsin ennen sulkevaa tunnistetta </audio>lause "Fail to play kappale", joka tulee näkyviin, kun käyttämäsi selain ei tue äänielementtiä. Se näyttää selaimelta näin (esimerkiksi käytän Safari 5.7.1 -selainta):

Automaattinen toisto -attribuutti

Kuten aiemmin on selitetty, automaattisen toiston attribuuttia käytetään siten, että ääni toistuu suoraan, kun verkkosivu latautuu loppuun tai siihen voidaan viitata sisäisellä äänellä.

Niille teistä, jotka hallinnoivat musiikkisivustoja, fanisivuja tai muita, tämän ominaisuuden käyttö tuo varmasti ilmapiirin elämään. Tässä on esimerkki HTML: ssä käytettävästä koodista:

<!DOCTYPE html>
<html>
<head>
<title>Atribut Autoplay di elemen audio</title>
</head>
<body>
<audio src="honestly.mp3" autoplay controls></audio>
</body>
</html>

Näyttää yllä olevan koodin selaimessa ajamisen jälkeen:

Jos yllä oleva HTML-koodi suoritetaan, ääni toistuu automaattisesti heti, kun verkkosivu on ladattu.

Silmukkaattribuutti

Tätä ominaisuustoimintoa käytetään kappaleiden toistamiseentoistuvasti. Joten niin kauan kuin kävijät vielä avaavat verkkosivun, kappaletta soitetaan aina uudestaan ja uudestaan (ei vain yhden soiton).

Tässä on esimerkki HTML: ssä käytettävästä koodista:

<!DOCTYPE html>
<html>
<head>
<title>Atribut loop di elemen audio</title>
</head>
<body>
<audio src="honestly.mp3" loop controls></audio>
</body>
</html>

Näyttää yllä olevan koodin selaimessa ajamisen jälkeen: