เสียง HTML

มีหลายวิธีที่จะเล่นเสียงใน HTML

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

การเล่นเสียงใน HTML ไม่ง่ายทั้งนั้น!

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

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

ใช้โปรแกรมแอดอปท์

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

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

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

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

ใช้ตัวแบบ <embed>

ตัวแบบ <embed> กำหนดตัวแทนของเนื้อหาด้านนอก (ไม่ใช่ HTML) ซึ่งเป็นตัวแบบ HTML5 ซึ่งไม่ถูกต้องใน HTML4 แต่ทำงานได้ในทุกเบราเซอร์

บทโค้ดด้านล่างนี้สามารถแสดงไฟล์ 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>

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

ใช้ยูทูบมีเดียเพลย์เยอร์ นั้นฟรี ถ้าคุณต้องการใช้มัน คุณต้องการที่จะใส่สตริง 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>

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

เสียงแนวหน้า

เมื่อคุณใส่เสียงในเว็บไซต์หรือใช้เสียงนี้เป็นส่วนหนึ่งของเว็บไซต์ นั่นก็เรียกว่าเสียงแนวหน้า

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

คำแนะนำที่ดีที่สุดของเราคือที่ควรใส่เสียงที่ใช้ในสถานที่ที่ผู้ใช้ต้องการที่จะได้ยินเสียงในลิงก์ในไซต์

ตากฺย์สื่อมัลติมีเดียของ HTML 4.01

ตากฺย์ การอธิบาย
<applet> ไม่เป็นที่ยอมรับ กำหนด applet แนวหน้า
<embed> ไม่เป็นที่ยอมรับใน HTML4 แต่ยอมรับใน HTML5 กำหนดสิ่งที่มีแนวหน้า
<object> กำหนดสิ่งที่มีแนวหน้า
<param> กำหนดตัวเลือกของสิ่งที่มี

ตากฺย์สื่อมัลติมีเดียของ HTML 5

ตากฺย์ การอธิบาย
<audio> ตากฺย์มีความหมายว่าเสียง อย่างเช่น ดนตรีหรือสายเสียงอื่น
<embed> ตากฺย์มีความหมายว่าการฝังเนื้อหา อย่างเช่น ส่วนบุล