เสียง HTML

มีหลายวิธีที่สามารถเล่นเสียงด้วย HTML

ปัญหา ปัญหา และวิธีแก้ปัญหา

การเล่นเสียงด้วย HTML ไม่ง่าย

คุณต้องทราบทั้งหมดทั้งหลายทักษะเพื่อให้แน่ใจว่าแฟ้มเสียงของคุณจะสามารถเล่นได้ในทุกเบราเซอร์ (Internet Explorer, Chrome, Firefox, Safari, Opera) และทุกฮาร์ดแวร์ (PC, Mac, iPad, iPhone)

ในบทนี้ CodeW3C.com ได้รวบรวมปัญหาและวิธีแก้ปัญหาให้คุณ

ใช้โปรแกรมแอดอน

โปรแกรมแอดอนเป็นโปรแกรมคอมพิวเตอร์เล็กที่ขยายความสามารถของเว็บเบราเซอร์

โปรแกรมแอดอนมีบทบาทมากมาย: เล่นเพลง, แสดงแผนที่, ยืนยันบัญชีธนาคาร และการควบคุมการเข้าออกแบบต่างๆ

คุณสามารถใช้แบตทั้ง <object> หรือ <embed> ในการเพิ่มโปรแกรมแอดอนเข้าไปในเว็บปลายทาง HTML

แบตทั้งนี้กำหนดองค์ประกอบของทรัพยากร (ส่วนใหญ่เป็นทรัพยากรที่ไม่ใช่ HTML) ซึ่งจะถูกแสดงโดยเว็บเบราเซอร์หรือโปรแกรมแอดอนตามรูปแบบ

ใช้องค์ประกอบ <embed>

แบตทั้ง <embed> กำหนดองค์ประกอบ (ไม่ใช่ HTML) ของภายนอก (นอก HTML) ซึ่งเป็นแบตทั้ง HTML5 ที่ผิดกฎหมายใน HTML4 แต่ทำงานได้ทั้งหมดเว็บเบราเซอร์

บทความรหัสที่อยู่ด้านล่างสามารถแสดงไฟล์ MP3 ที่ฝั่งนอกของเว็บไซต์ได้

ตัวอย่าง

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

ทดลองด้วยตัวเอง

ปัญหา：

  • แบตทั้ง <embed> ไม่มีประโยชน์ใน HTML 4 และเว็บปลายทางจะไม่ผ่านการตรวจสอบ HTML 4
  • เว็บเบราเซอร์ต่างๆ สนับสนุนรูปแบบไฟล์เสียงแตกต่างกัน
  • ถ้าเว็บเบราเซอร์ไม่สนับสนุนรูปแบบไฟล์นี้ และไม่มีโปรแกรมแอดอน จะไม่สามารถเล่นเสียงได้
  • ถ้าคอมพิวเตอร์ของผู้ใช้ไม่มีโปรแกรมแอดอนได้ จะไม่สามารถเล่นเสียงได้
  • ถ้าเปลี่ยนไฟล์เป็นรูปแบบอื่น ยังไม่สามารถเล่นได้ในเว็บเบราเซอร์ทั้งหมด

หมายเหตุ：ใช้ <!DOCTYPE html> (HTML5) ที่แก้ปัญหาการรับการยืนยัน

ใช้องค์ประกอบ <object>

แบตทั้ง <object tag> ก็สามารถกำหนดองค์ประกอบ (ไม่ใช่ HTML) ของภายนอก (นอก HTML) ได้

บทความรหัสที่อยู่ด้านล่างสามารถแสดงไฟล์ MP3 ที่ฝั่งนอกของเว็บไซต์ได้

ตัวอย่าง

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

ทดลองด้วยตัวเอง

ปัญหา：

  • เว็บเบราเซอร์ต่างๆ สนับสนุนรูปแบบไฟล์เสียงแตกต่างกัน
  • ถ้าเว็บเบราเซอร์ไม่สนับสนุนรูปแบบไฟล์นี้ และไม่มีโปรแกรมแอดอน จะไม่สามารถเล่นเสียงได้
  • ถ้าคอมพิวเตอร์ของผู้ใช้ไม่มีโปรแกรมแอดอนได้ จะไม่สามารถเล่นเสียงได้
  • ถ้าเปลี่ยนไฟล์เป็นรูปแบบอื่น ยังไม่สามารถเล่นได้ในเว็บเบราเซอร์ทั้งหมด

ใช้องค์ประกอบ HTML5 <audio>

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

ทดลองด้วยตัวเอง

ตัวอย่างที่ใช้รูปแบบเสียงที่แตกต่างกันสองรูปแบบ อาทิตย์ <audio> จะพยายามเล่นเสียงด้วยรูปแบบ mp3 หรือ ogg หากไม่สำเร็จ รหัสจะหลุดออกมาพยายาม <embed> อีกครั้ง

ปัญหา：

  • คุณจะต้องเปลี่ยนรูปแบบของเสียงเป็นรูปแบบอื่น
  • อาทิตย์ <audio> ไม่สามารถผ่านการรับการยืนยัน HTML 4 และ XHTML
  • อาทิตย์ <embed> ไม่สามารถผ่านการรับการยืนยัน HTML 4 และ XHTML
  • อาทิตย์ <embed> ไม่สามารถหลุดออกมาแสดงข้อความข้อผิดพลาดได้

หมายเหตุ：ใช้ <!DOCTYPE html> (HTML5) ที่แก้ปัญหาการรับการยืนยัน

วิธีที่ง่ายที่สุดในการเพิ่มเสียงไปยังเว็บไซต์

วิธีที่ง่ายที่สุดในการเพิ่มเสียงไปยังเว็บเพจคืออะไร

ยูทูบมีเดียเพลย์เยอร์นับเป็นหนึ่งในนั้น

การใช้ยูทูบมีเดียเพลย์เยอร์เป็นวิธีที่แตกต่าง คุณแค่ต้องให้ยูทูบทำงานเพื่อเล่นเพลง

มันสามารถเล่น mp3 และรูปแบบต่างๆ อีกหลายรูปแบบ ด้วยเพียงรายการรหัสเดียวคุณก็สามารถเพิ่มมันเข้าไปในหน้าเว็บของคุณได้ง่ายๆ และทำให้หน้าเว็บของคุณเป็นหน้าเว็บเล่นเพลงอาชีพ

ยูทูบมีเดียเพลย์เยอร์

ตัวอย่าง

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

ทดลองด้วยตัวเอง

การใช้ยูทูบมีเดียเพลย์เยอร์เป็นสิ่งที่ฟรี ถ้าคุณต้องการใช้มัน คุณจะต้องใส่บรรทัด JavaScript นี้เข้าไปในท้ายของหน้าเว็บ

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

หลังจากนั้น คุณแค่ต้องลิงก์ไฟล์ MP3 ไปยัง HTML ของคุณ แล้ว JavaScript จะทำงานอัตโนมัติให้สร้างปุ่มเล่นเพลงให้แก่แต่ละเพลง

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

ยูทูบมีเดียเพลย์เยอร์ให้แก่ผู้ใช้ของคุณคือปุ่มเล่นเล็กๆ ไม่ใช่เพลย์เยอร์ที่สมบูรณ์ทั้งหมด แต่เมื่อคุณคลิกปุ่มนี้ จะปรากฏเพลย์เยอร์ที่สมบูรณ์ขึ้น

โปรดจำที่ตัวเล่นเสียงนี้จะเก็บอยู่ที่ด้านล่างของหน้าต่าง และเพียงแค่คลิกเพื่อที่จะลากมันออกมา

ใช้ลิงก์

หากเว็บไซต์มีลิงก์ที่หนุ่มไปยังไฟล์สื่อ โปรแกรมนอร์โทรโปรแกรมส่วนใหญ่จะใช้โปรแกรมตัวช่วยเหลือเพื่อเล่นไฟล์

บทความรหัสแสดงถึงลิงก์ที่มีการบอกเลขไฟฟ์รรมแบบmp3 หากผู้ใช้คลิกลิงก์นี้ โปรแกรมนอร์โทรโปรแกรมจะเริ่มใช้โปรแกรมตัวช่วยเหลือเพื่อเล่นไฟล์

ตัวอย่าง

<a href="song.mp3">เล่นเสียง</a>

ทดลองด้วยตัวเอง

เสียงแบบinline

เมื่อคุณทำให้เสียงฝังเข้าไปในหน้าเว็บหรือเป็นส่วนหนึ่งของหน้าเว็บ มันถือว่าเป็นเสียงแบบinline

หากคุณมีแผนที่จะใช้เสียงแบบinlineในโปรแกรม web คุณต้องรู้สึกว่าหลายคนมักจะรู้สึกเสียงแบบinlineน่าเจ็บปวด โดยเฉพาะอย่างยิ่ง ผู้ใช้อาจทำให้เสียงแบบinlineปิดในตัวโปรแกรมนอร์โทรโปรแกรม

คำแนะนำของเราคือ คุณควรเสริมเสียงแบบinlineเมื่อผู้ใช้ต้องการที่จะฟังเสียงและคลิกลิงก์ ซึ่งจะเปิดหน้าเว็บและเล่นเสียง

HTML 4.01 แท็กสื่อ

แท็ก คำอธิบาย
<applet> ไม่เป็นที่นิยม นิยาย applet ฝังเข้าไป
<embed> ไม่เป็นที่นิยมใน HTML4 แต่อนุญาตใน HTML5 นิยายแอ็กเตย์ที่ฝังเข้าไป
<object> นิยายแอ็กเตย์ที่ฝังเข้าไป
<param> นิยายตัวอักษรของแอ็กเตย์

HTML 5 แท็กสื่อ

แท็ก คำอธิบาย
<audio> แท็กนี้นิยายเสียง ตัวอย่างเช่น ดนตรีหรือสายเสียงอื่น
<embed> แท็กนี้นิยายเนื้อหาที่ฝังเข้าไป ตัวอย่างเช่น อุปกรณ์แบบติดตั้ง