HTML Audio

ມີຫຼາຍວິທີທີ່ຈະສະແດງສຽງໃນ HTML.

ບັນຫາ, ບັນຫາ, ແລະການແກ້ໄຂ.

ບໍ່ງົບງົງທີ່ຈະສະແດງສຽງໃນ HTML!

ທ່ານຕ້ອງຮູ້ຫຼາຍກິດຈະກຳເພື່ອຮັບປະກັນວ່າບັນທຶກສຽງຂອງທ່ານຈະສາມາດສະແດງໄດ້ໃນທຸກບັນຍາການຄົ້ນຫາ (Internet Explorer, Chrome, Firefox, Safari, Opera) ແລະທຸກອຸປະກອນ (PC, Mac, iPad, iPhone).

ໃນປີສະຖານະນີນີ້ CodeW3C.com ຍັງບັນທຶກບັນຫາແລະການແກ້ໄຂບັນຫາ.

使用插件

浏览器插件是一种扩展浏览器标准功能的小型计算机程序。

插件有很多用途：播放音乐、显示地图、验证银行账号，控制输入等等。

ທ່ານສາມາດໃຊ້ <object> ຫຼື <embed> ປະກອບ ເພື່ອເພີ່ມຊຸບຊົນໃນເວັບໄຊ HTML.

ປະກອບນີ້ກໍ່ສາມາດກໍານົດການເປັນຄິດຕະມານຂອງຂໍ້ມູນ (ບໍ່ແມ່ນ HTML) ອີງຕາມຮູບແບບ. ບັນຊີບັນນາທິການຈະສະແດງຂໍ້ມູນອີງຕາມຮູບແບບ, ແລະ/ຫຼື ຈະສະແດງໂດຍຊຸບຊົນພາຍນອກ.

ນຳໃຊ້ <embed> ປະກອບ

ປະກອບ <embed> ກໍ່ສາມາດກໍານົດການເປັນຄິດຕະມານຂອງຂໍ້ມູນພາຍນອກ (ບໍ່ແມ່ນ HTML). (ນັ້ນເປັນປະກອບ HTML5, ບໍ່ມີຜົນໃນ HTML 4, ແຕ່ມີຜົນໃນບັນຊີບັນນາທິການທັງໝົດ).

ກິດຈະກຳທີ່ກ່າວກ່າວນີ້ສາມາດສະແດງຮູບມີສຽງ MP3 ທີ່ວາງໃນເວັບໄຊ.

实例

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

亲自试一试

ຄຳຖາມ:

  • ປະກອບ <embed> ບໍ່ມີຜົນໃນ HTML 4. ທີ່ເວັບໄຊຂອງທ່ານບໍ່ສາມາດກວດກາຜົນຢ່າງດີສຳລັບ HTML 4.
  • ບັນຊີບັນນາທິການທັງໝົດມີການສະໜັບສະໜູນຮູບມີສຽງທີ່ຕ່າງກັນ.
  • ຖ້າບັນຊີບັນນາທິການບໍ່ສາມາດສະໜັບສະໜູນຮູບມີສຽງນີ້, ແລະບໍ່ມີຊຸບຊົນ, ຈະບໍ່ສາມາດສະແດງຮູບມີສຽງ.
  • ຖ້າຄອມພິວເຕີ້ຂອງຜູ້ນຳໃຊ້ບໍ່ມີການຕິດຕັ້ງຊຸບຊົນ, ຈະບໍ່ສາມາດສະແດງຮູບມີສຽງ.
  • ຖ້າທ່ານໄດ້ປ່ຽນຮູບມີສຽງໄປຮູບຮູບອື່ນ, ຍັງບໍ່ສາມາດສະແດງຮູບມີສຽງໃນບັນຊີບັນນາທິການທັງໝົດ.

ຄວາມເຫັນ:ການແກ້ໄຂ <!DOCTYPE html> (HTML5) ທີ່ພົບບັນຫາການກວດສອບ.

ນຳໃຊ້ <object> ປະກອບ

ປະກອບ <object tag> ກໍ່ສາມາດກໍານົດການເປັນຄິດຕະມານຂອງຂໍ້ມູນພາຍນອກ (ບໍ່ແມ່ນ HTML).

ກິດຈະກຳທີ່ກ່າວກ່າວນີ້ສາມາດສະແດງຮູບມີສຽງ MP3 ທີ່ວາງໃນເວັບໄຊ.

实例

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

亲自试一试

ຄຳຖາມ:

  • ບັນຊີບັນນາທິການທັງໝົດມີການສະໜັບສະໜູນຮູບມີສຽງທີ່ຕ່າງກັນ.
  • ຖ້າບັນຊີບັນນາທິການບໍ່ສາມາດສະໜັບສະໜູນຮູບມີສຽງນີ້, ແລະບໍ່ມີຊຸບຊົນ, ຈະບໍ່ສາມາດສະແດງຮູບມີສຽງ.
  • ຖ້າຄອມພິວເຕີ້ຂອງຜູ້ນຳໃຊ້ບໍ່ມີການຕິດຕັ້ງຊຸບຊົນ, ຈະບໍ່ສາມາດສະແດງຮູບມີສຽງ.
  • ຖ້າທ່ານໄດ້ປ່ຽນຮູບມີສຽງໄປຮູບຮູບອື່ນ, ຍັງບໍ່ສາມາດສະແດງຮູບມີສຽງໃນບັນຊີບັນນາທິການທັງໝົດ.

ນຳໃຊ້ <audio> HTML5

ປະກອບ <audio> ແມ່ນປະກອບ HTML5, ບໍ່ມີຜົນໃນ HTML 4, ແຕ່ມີຜົນໃນບັນຊີບັນນາທິການທັງໝົດ.

实例

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
ບັນຊີບັນນາທິການຂອງທ່ານບໍ່ສາມາດສະໜັບສະໜູນຮູບມີສຽງນີ້.
</audio>

亲自试一试

ຕົວຢ່າງທີ່ກ່າວກ່າວນີ້ໃຊ້ຮູບມີສຽງ mp3, ຍ້ອນນັ້ນມັນຈະມີຜົນໃນ Internet Explorer, Chrome ແລະ Safari.

ເພື່ອໃຫ້ຮູບມີສຽງນີ້ມີຜົນໃນ Firefox ແລະ Opera, ໄດ້ເພີ່ມເອກະສານຮູບມີສຽງຮູບຮູບ ogg. ຖ້າບໍ່ປະສົບ, ຈະສະແດງຂໍ້ບັນຫາຄວາມຜິດພາດ.

ຄຳຖາມ:

  • ປະກອບ <audio> ບໍ່ມີຜົນໃນ HTML 4. ທີ່ເວັບໄຊຂອງທ່ານບໍ່ສາມາດກວດກາຜົນຢ່າງດີສຳລັບ HTML 4.
  • ທ່ານຕ້ອງໄດ້ປ່ຽນຮູບມີສຽງເປັນຮູບຮູບອື່ນ.
  • ປະກອບ <audio> ບໍ່ມີຜົນໃນບັນຊີບັນນາທິການເກົ່າ.

ຄວາມເຫັນ:ການແກ້ໄຂ <!DOCTYPE html> (HTML5) ທີ່ພົບບັນຫາການກວດສອບ.

ຄວາມຈະເປັນທີ່ດີທີ່ສຸດຂອງ 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>

亲自试一试

ຕົວຢ່າງທີ່ນຳໃຊ້ສອງຮູບແບບສຽງໄວ້ຫຼັງການ. HTML5 <audio> ສະແດງສຽງໄວ້ຫຼັງການ mp3 ຫຼື ogg. ຖ້າບໍ່ສາມາດສະແດງ, ລະບົບຈະຕິດຕາມມາສະແດງສິ່ງ <embed>.

ຄຳຖາມ:

  • ທ່ານຕ້ອງແປງຮູບແບບສຽງໄວ້ຫຼັງການບໍ່ມີ.
  • ສິ່ງ <audio> ບໍ່ສາມາດກວດສອບ HTML 4 ແລະ XHTML.
  • ສິ່ງ <embed> ບໍ່ສາມາດກວດສອບ HTML 4 ແລະ XHTML.
  • ສິ່ງ <embed> ບໍ່ສາມາດຫຼິ້ນກັບຄວາມການສະແດງຂໍ້ຄວາມບັນຫາ.

ຄວາມເຫັນ:ການແກ້ໄຂ <!DOCTYPE html> (HTML5) ທີ່ພົບບັນຫາການກວດສອບ.

ການເພີ່ມສຽງໄວ້ຫຼັງໃນເວັບໄຊໄດ້ຫຼາຍບ່ອນ

ຫົວຂໍ້: ການເພີ່ມສຽງໄວ້ຫຼັງໃນເວັບໄຊໄດ້ຫຼາຍບ່ອນ.

ລາຍການສື່ມວນຊົນຢູ່ຂອງຢູ່ຢູບິອູນັ້ນສະແດງອາດຈະເປັນໜຶ່ງ.

ການນຳໃຊ້ລາຍການສື່ມວນຊົນຢູ່ບໍ່ແມ່ນຫຼັກການທີ່ຕ່າງກັນ. ທ່ານພຽງແຕ່ນຳລາຍການຈະນຳລາຍການສະແດງຫຼິ້ນພະຍາຍາມທີ່ຢູ່ບໍ່.

ມັນສາມາດສະແດງ mp3 ແລະຮູບແບບອື່ນໆຫຼາຍ. ດ້ວຍການບັນທຶກຫຼັງການຫຼິ້ນພະຍາຍາມຫຼັງການບັນທຶກຫຼັງການຫຼິ້ນພະຍາຍາມຂອງທ່ານທີ່ລວມຢູ່ HTML ທີ່ທ່ານມີຫຼິ້ນລາຍການສະແດງຫຼິ້ນພະຍາຍາມທີ່ລວມ.

ລາຍການສື່ມວນຊົນຢູ່ຢູບິອູ

实例

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

亲自试一试

ການນຳໃຊ້ລາຍການສື່ມວນຊົນຢູ່ບໍ່ມີລາຍງານ. ຖ້າທ່ານຕ້ອງນຳໃຊ້ນັ້ນທ່ານຕ້ອງສູ່ສິ່ງນັ້ນເພື່ອສິ່ງນັ້ນທີ່ຂອງທ່ານ.

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

ຫຼັງຈາກນັ້ນພຽງແຕ່ນຳລາຍການ MP3 ທີ່ຂອງທ່ານໄປຢູ່ HTML ທີ່ທ່ານມີຫຼິ້ນລາຍການສະແດງຫຼິ້ນພະຍາຍາມທີ່ລວມ.

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

ອິດສະຫຼະພິດລາຍການສື່ມວນຊົນຢູ່ບໍ່ສາມາດຫຼິ້ນພະຍາຍາມສົ່ງສົ່ງລາຍການສະແດງຫຼິ້ນພະຍາຍາມທີ່ລວມ. ແຕ່ວ່າເວລາທີ່ທ່ານຄົງຄັດບັນນາທິດນັ້ນຈະອອກຂຶ້ນລາຍການສະແດງຫຼິ້ນພະຍາຍາມທີ່ລວມ.

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

使用超链接

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

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

实例

Play the sound

亲自试一试

内联的声音

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

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

ຄຳແນະນຳທີ່ສຸດຂອງພວກເຮົາແມ່ນຈະບໍ່ບັນຈຸສຽງອອກສຽງທີ່ຢູ່ທາງໃນຂອງຜູ້ນຳໃຊ້. ເປັນຕົວຢ່າງທີ່ດີນັ້ນ, ຖ້າຜູ້ນຳໃຊ້ຕ້ອງຟັງບົດບັນທຶກແລະກົດດັນກັບການສະແດງການເຊື່ອມຕໍ່ກັບການສະແດງການບັນທຶກດັ່ງກ່າວ, ຈະເປີດເວັບໄຊຫຼັງຈາກການກົດດັນແລະສະແດງບົດບັນທຶກ.

ອອກບົດສະຫຼຸບສຽງ/ວີດີໂອ HTML 4.01

ອອກບົດສະຫຼຸບ ອະທິບາຍ
<applet> ບໍ່ໄດ້ຮັບການຍອມຮັບ. ອະທິບາຍ applet.
<embed> ບໍ່ໄດ້ຮັບການຍອມຮັບໃນ HTML 4, ໄດ້ຮັບການຍອມຮັບໃນ HTML 5. ອະທິບາຍວັດຖຸບັນຍາການ.
<object> ອະທິບາຍວັດຖຸບັນຍາການ
<param> ອະທິບາຍຂໍ້ຂັດຂວາງວັດຖຸ

ອອກບົດສະຫຼຸບສຽງ/ວີດີໂອ HTML 5

ອອກບົດສະຫຼຸບ ອະທິບາຍ
<audio> ອອກບົດສະຫຼຸບເອກະສານທີ່ສະແດງສຽງ, ອອກບົດສະຫຼຸບວິດີໂອອື່ນໆຫຼືສຽງອື່ນໆ.
<embed> ອອກບົດສະຫຼຸບເອກະສານທີ່ສະແດງ, ອອກບົດສະຫຼຸບຫຼັກສັດ.