HTML Audio

May maraming paraan para magpalabas ng tunog sa HTML.

Problema, problema, at mga solusyon

Hindi madaling magpalabas ng audio sa HTML!

Kailangan mong masarap ang maraming pamamaraan upang matiyak na ang iyong audio file ay mababawas sa lahat ng browser (Internet Explorer, Chrome, Firefox, Safari, Opera) at lahat ng hardware (PC, Mac, iPad, iPhone).

Sa kaniyang kabanata, ang CodeW3C.com ay nagbigay ng pag-iisahin ng problema at mga solusyon.

Gamitin ang plugin

Ang browser plugin ay isang maliit na kompyuter na programa na nagpapalawak ng mga standar na pag-andar ng browser.

May maraming gamit ng plugin: pag-play ng musika, pag-display ng mapa, pag-verify ng account ng bangko, at iba pa.

Maaaring gamitin ang <object> o <embed> tag upang idagdag ang plugin sa HTML pahina.

Ang mga tag na ito ay nag-definir bilang container ng resource (kalimitan ay hindi HTML resource), at ay magiging epektibo ng browser o ng panlabas na plugin, batay sa uri nito.

Gamitin ang <embed> elemento

Ang <embed> tag ay nag-definir bilang container ng panlabas na (hindi HTML) nilalaman. (Ito ay isang HTML5 tag, hindi magiging epektibo sa HTML4, ngunit magiging epektibo sa lahat ng browser).

Ang mga code snippet sa itaas ay makakapakita ng MP3 file na nakapaloob sa web page:

实例

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

亲自试一试

Problema:

  • Ang <embed> tag ay hindi magiging epektibo sa HTML 4. Ang pahina ay hindi mapapasa sa HTML 4 na pagtsewa.
  • Iba't ibang browser ang nagmamahalaga ng suporta sa format ng audio.
  • Kung hindi suporta ng browser ang format ng file, hindi makakaplayer ang audio kung walang plugin.
  • Kung ang kompyuter ng user ay hindi may nakaseta na plugin, hindi makakaplayer ang audio.
  • Kung ikaw ay mag-convert ang file sa iba't ibang format, hindi pa rin makakaplayer sa lahat ng browser.

Komento:Gamitin ang <!DOCTYPE html> (HTML5) upang malutas ang problema ng validation.

Gamitin ang <object> elemento

Ang <object tag> tag ay maaaring idedefinir bilang container ng panlabas na (hindi HTML) nilalaman.

Ang mga code snippet sa itaas ay makakapakita ng MP3 file na nakapaloob sa web page:

实例

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

亲自试一试

Problema:

  • Iba't ibang browser ang nagmamahalaga ng suporta sa format ng audio.
  • Kung hindi suporta ng browser ang format ng file, hindi makakaplayer ang audio kung walang plugin.
  • Kung ang kompyuter ng user ay hindi may nakaseta na plugin, hindi makakaplayer ang audio.
  • Kung ikaw ay mag-convert ang file sa iba't ibang format, hindi pa rin makakaplayer sa lahat ng browser.

Gamitin ang HTML5 <audio> elemento

Ang <audio> elemento ay isang HTML5 elemento, hindi magiging epektibo sa HTML 4, ngunit magiging epektibo sa lahat ng browser.

实例

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Hindi suportado ng iyong browser ang ganitong format ng audio.
</audio>

亲自试一试

Ang halimbawa sa itaas ay gumagamit ng isang mp3 file, kaya ito ay magiging epektibo sa Internet Explorer, Chrome at Safari.

Upang gumana ang audio sa Firefox at Opera, idinagdag ang isang ogg type na file. Kung magkasala, ipapakita ang mensahe ng error.

Problema:

  • Ang <audio> tag ay hindi magiging epektibo sa HTML 4. Ang iyong pahina ay hindi mapapasa sa HTML 4 na pagtsewa.
  • Kailangan mong i-convert ang audio file sa iba't ibang format.
  • Ang <audio> elemento ay hindi gumagana sa lumang mga browser.

Komento:Gamitin ang <!DOCTYPE html> (HTML5) upang malutas ang problema ng validation.

Pinakamahusay na solusyon sa HTML

实例

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

亲自试一试

Ang mga halimbawa sa itaas ay gumagamit ng dalawang magkakaibang format ng awto. Ang elemento ng HTML5 <audio> ay susubukang mag-play ng awto gamit ang mp3 o ogg. Kung bigo, ang code ay magbabackup sa pagsubok gamit ang elemento ng <embed>.

Problema:

  • Kailangan mong baguhin ang format ng iyong awto.
  • Ang elemento ng <audio> ay hindi makakapasa ang HTML 4 at XHTML validation.
  • Ang elemento ng <embed> ay hindi makakapasa ang HTML 4 at XHTML validation.
  • Ang elemento ng <embed> ay hindi makakabawi upang ipakita ang mensahe ng error.

Komento:Gamitin ang <!DOCTYPE html> (HTML5) upang malutas ang problema ng validation.

Ang pinakasimpleng paraan para magdagdag ng awto sa website

Ano ang pinakasimpleng paraan para magdagdag ng awto sa webpage?

Ang media player ng Yahoo ay kabilang sa pinaka-mahusay.

Ang paggamit ng Yahoo Media Player ay isa pang paraan. Hindi mo kailangan kung anong gagawin, dahil ang Yahoo ang magiging responsable sa pag-play ng awitin.

Ito ay maaaring mag-play ng mp3 at isang serye ng iba pang format. Sa pamamagitan ng isang simpleng code, maaari mong idagdag ito sa iyong webpage, at madali na ito ay magiging propesyonal na playlist ng HTML.

Yahoo Media Player

实例

<a href="song.mp3">Play Sound</a>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

亲自试一试

Ang paggamit ng Yahoo Player ay libre. Kapag gusto mong gamitin ito, kailangan mong ipasok ang ganitong JavaScript sa ibaba ng iyong webpage:

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

Pagkatapos, magkakaroon ka lamang ng kailangang maglink ng MP3 file sa iyong HTML, ang JavaScript ay magiging awtomatikong gumawa ng play button para sa bawat awitin:

<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>
...
...
...

Yahoo Media Player ay nagbibigay sa iyong mga user ng isang maliit na play button, hindi ng buong player. Gayunpaman, kapag iyong i-click ang button, magiging parusa ang buong player.

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

使用超链接

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

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

实例

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

亲自试一试

内联的声音

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

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

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

HTML 4.01 多媒体标签

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

HTML 5 多媒体标签

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