HTML-audi

On monia tapoja toistaa ääntä HTML:ssä.

Ongelmat, ongelmat ja ratkaisut

Äänen toistaminen HTML:ssä ei ole helppoa!

Sinun täytyy tuntea suuri määrä taitoja varmistaaksesi, että äänitiedostosi toistuvat kaikissa selaimissa (Internet Explorer, Chrome, Firefox, Safari, Opera) ja kaikilla laitteilla (PC, Mac, iPad, iPhone).

Tässä luvussa CodeW3C.com kertoo ongelmista ja niiden ratkaisuista.

Käytä lisäohjelmia

Selainlisäohjelma on pieni tietokoneohjelma, joka laajentaa selaimen toiminnallisuutta.

Lisäohjelmilla on monia käyttötarkoituksia: musiikin toisto, karttojen näyttäminen, pankkitilien tarkistaminen, syötteen hallinta jne.

Voit käyttää <object> tai <embed>-tagia lisätäksesi lisäohjelmia HTML-sivulle.

Nämä tagit määrittävät resurssien (yleensä ei HTML-resurssit) konteinereita, ja ne näytetään selaimessa tai ulkoisessa lisäohjelmassa riippuen tyypistä.

Käytä <embed>-elementtiä

<embed>-tagi määrittää ulkoisen (ei HTML) sisällön konteinereita. (Tämä on HTML5-tagi, joka on kelvoton HTML 4:ssä, mutta toimii kaikissa selaimissa).

Seuraava koodinpätkä näyttää MP3-tiedoston, joka on upotettu verkkosivulle:

实例

<embed height="100" width="100" src="song.mp3" />

亲自试一试

Kysymys:

  • <embed>-tagi on kelvoton HTML 4:ssä. Sivusi ei voi läpäistä HTML 4 -validointia.
  • Eri selaimet tukevat eri äänimuotoja.
  • Jos selain ei tue tiedoston muotoa ilman lisäohjelmia, ääntä ei voi toistaa.
  • Jos käyttäjän tietokoneessa ei ole asennettu lisäohjelmia, ääntä ei voi toistaa.
  • Jos tiedosto muutetaan toiseen muotoon, sitä ei edelleenkään voi toistaa kaikissa selaimissa.

Huomautus:Ratkaistaan validointiongelmat käyttämällä <!DOCTYPE html> (HTML5).

Käytä <object>-elementtiä

<object tag>-tagi voi myös määritellä ulkoisen (ei HTML) sisällön konteinereita.

Seuraava koodinpätkä näyttää MP3-tiedoston, joka on upotettu verkkosivulle:

实例

<object height="100" width="100" data="song.mp3"></object>

亲自试一试

Kysymys:

  • Eri selaimet tukevat eri äänimuotoja.
  • Jos selain ei tue tiedoston muotoa ilman lisäohjelmia, ääntä ei voi toistaa.
  • Jos käyttäjän tietokoneessa ei ole asennettu lisäohjelmia, ääntä ei voi toistaa.
  • Jos tiedosto muutetaan toiseen muotoon, sitä ei edelleenkään voi toistaa kaikissa selaimissa.

Käytä HTML5 <audio>-elementtiä

<audio>-elementti on HTML5-elementti, joka on kelvoton HTML 4:ssä, mutta toimii kaikissa selaimissa.

实例

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Selaimesi ei tue tätä äänimuotoa.
</audio>

亲自试一试

Yllä olevassa esimerkissä käytettiin mp3-tiedostoa, joten se toimii Internet Explorerissä, Chromeissa ja Safarissa.

Tämä ääntä varten lisättiin ogg-tyyppinen tiedosto, jotta se toimisi myös Firefoxissa ja Operassa. Jos se epäonnistuu, näytetään virheilmoitus.

Kysymys:

  • <audio>-tagi on kelvoton HTML 4:ssä. Sivusi ei voi läpäistä HTML 4 -validointia.
  • Sinun täytyy muuntaa äänitiedosto toiseen muotoon.
  • <audio>-elementti ei toimi vanhoissa selaimissa.

Huomautus:Ratkaistaan validointiongelmat käyttämällä <!DOCTYPE html> (HTML5).

Paras HTML-ratkaisu

实例

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

亲自试一试

Yllä olevassa esimerkissä käytetään kahta eri äänimuotoa. HTML5 <audio>-elementti yritti toistaa ääntä mp3- tai ogg-muodossa. Jos tämä epäonnistuu, koodi yrittää palata <embed>-elementtiin.

Kysymys:

  • Sinun täytyy muuntaa äänet eri muotoihin.
  • <audio>-elementti ei voi läpäistä HTML 4 ja XHTML -validointia.
  • <embed>-elementti ei voi läpäistä HTML 4 ja XHTML -validointia.
  • <embed>-elementti ei voi palata näyttämään virheilmoituksia.

Huomautus:Ratkaistaan validointiongelmat käyttämällä <!DOCTYPE html> (HTML5).

Mikä on helpoin tapa lisätä ääntä verkkosivustolle

Mikä on helpoin tapa lisätä ääntä verkkosivulle?

Yahoo Media Player on ehdottomasti yksi niistä.

Yahoo Media Playerin käyttö on erilainen tapa. Sinun tarvitsee vain antaa Yhdon tehtäväksi kappaleiden toisto.

Se voi toistaa mp3:t ja monia muita muotoja. Voit lisätä sen sivulle yksinkertaisella lausekkeella ja muuttaa HTML-sivun helposti ammattimaiseksi soittolistaksi.

Yahoo Media Player

实例

<a href="song.mp3">Toista Ääni</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
</script>

亲自试一试

Yahoo Media Playern käyttö on ilmainen. Jos haluat käyttää sitä, sinun täytyy lisätä tämä JavaScript-sivun alaan:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Tämän jälkeen sinun tarvitsee vain liittää MP3-tiedoston linkki HTML-sivullasi, ja JavaScript luo automaattisesti toisto-painikkeen jokaiselle kappaleelle:

<a href="song1.mp3">Toista Kappale 1</a>
<a href="song2.mp3">Toista Kappale 2</a>
...
...
...

Yahoo Media Player tarjoaa käyttäjilleen pienikokoisen toisto-painikkeen, ei täyttä soittimea. Kun painat tätä painiketta, avautuu täydellinen soitin.

请注意，这个播放器始终停靠在窗框底部。只需点击它，就可将其滑出。

使用超链接

如果网页包含指向媒体文件的超链接，大多数浏览器会使用“辅助应用程序”来播放文件。

以下代码片段显示指向mp3文件的链接。如果用户点击该链接，浏览器会启动“辅助应用程序”来播放该文件：

实例

<a href="song.mp3">Play the sound</a>

亲自试一试

内联的声音

当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。

如果您打算在web应用程序中使用内联声音，您需要意识到很多人都觉得内联声音令人烦恼。同时请注意，用户可能已经关闭了浏览器中的内联声音选项。

我们最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是，在用户需要听到录音并点击某个链接时，会打开页面然后播放录音。

HTML4.01多媒体标签

标签 描述
<applet> 不赞成。定义内嵌applet。
<embed> HTML4中不赞成，HTML5中允许。定义内嵌对象。
<object> 定义内嵌对象。
<param> 定义对象的参数。

HTML5多媒体标签

标签 描述
<audio> 标签定义声音，比如音乐或其他音频流。
<embed> 标签定义嵌入的内容，比如插件。