เสียง HTML (Audio)
เสียงในรูปแบบ HTML สามารถเล่นในรูปแบบที่แตกต่างกัน
ปัญหาและแนวทางแก้ไข
เล่นเสียงในรูปแบบ HTML ไม่ง่าย!
คุณต้องการมากของเคล็ดลับที่คุ้นเคยเพื่อให้มั่นใจว่าไฟล์เสียงของคุณในเบราว์เซอร์ (Internet Explorer, Chrome, Firefox, Safari, Opera) และฮาร์ดแวร์ (PC, Mac, iPad, iPhone) สามารถเล่นได้
ในบทนี้คุณ W3CSchool สรุปปัญหาและแนวทางแก้ไข
การใช้ Plug-in
เบราว์เซอร์ plug-in ที่เป็นส่วนขยายของเบราว์เซอร์มาตรฐานมีโปรแกรมคอมพิวเตอร์ขนาดเล็ก
ปลั๊กอินสามารถใช้ <object> แท็กหรือ <embed> tag เพิ่มไปยังหน้า
ป้ายเหล่านี้จะกำหนดทรัพยากร (โดยทั่วไปทรัพยากรที่ไม่ HTML) ภาชนะขึ้นอยู่กับชนิดที่พวกเขาจะได้รับการแสดงโดยเบราว์เซอร์ที่ยังมีการแสดงโดยภายนอกปลั๊กอิน
โดยใช้ <embed> องค์ประกอบ
<embed> tag กำหนดภาชนะภายนอก (ที่ไม่ใช่ HTML) เนื้อหา (นี่คือแท็ก HTML5 ใน HTML4 เป็นสิ่งผิดกฎหมาย แต่เบราว์เซอร์ทั้งหมดถูกต้อง)
ส่วนรหัสต่อไปนี้สามารถแสดงไฟล์ MP3 ฝังอยู่ในหน้าเว็บ:
ปัญหา:
- <embed> แท็กใน HTML 4 ไม่ถูกต้อง หน้าไม่สามารถตรวจสอบได้โดย HTML 4
- เบราว์เซอร์ที่แตกต่างกันสนับสนุนรูปแบบเสียงที่แตกต่างกันสำหรับ
- หากเบราว์เซอร์ของคุณไม่สนับสนุนรูปแบบไฟล์ที่ไม่มีปลั๊กอินแล้วคุณจะไม่สามารถเล่นเสียง
- หากคอมพิวเตอร์ของผู้ใช้ที่ไม่ได้ติดตั้งปลั๊กอินคุณจะไม่สามารถเล่นเสียง
- หากไฟล์จะถูกแปลงเป็นรูปแบบอื่น ๆ ยังไม่สามารถเล่นในเบราว์เซอร์
การใช้งาน <object>
<แท็ก object> แท็กยังสามารถกำหนดนอกของภาชนะ (ไม่ใช่ HTML) เนื้อหา
ส่วนรหัสต่อไปนี้สามารถแสดงไฟล์ MP3 ฝังอยู่ในหน้าเว็บ:
ปัญหา:
- เบราว์เซอร์ที่แตกต่างกันสนับสนุนรูปแบบเสียงที่แตกต่างกันสำหรับ
- หากเบราว์เซอร์ของคุณไม่สนับสนุนรูปแบบไฟล์ที่ไม่มีปลั๊กอินแล้วคุณจะไม่สามารถเล่นเสียง
- หากคอมพิวเตอร์ของผู้ใช้ที่ไม่ได้ติดตั้งปลั๊กอินคุณจะไม่สามารถเล่นเสียง
- หากไฟล์จะถูกแปลงเป็นรูปแบบอื่น ๆ ยังไม่สามารถเล่นในเบราว์เซอร์
ใช้ HTML5 <เสียง> องค์ประกอบ
HTML5 <เสียง> องค์ประกอบเป็นองค์ประกอบ HTML5 ใน HTML 4 เป็นสิ่งผิดกฎหมาย แต่ในเบราว์เซอร์ทั้งหมดถูกต้อง
ส่วน <เสียง> องค์ประกอบทำงานในเบราว์เซอร์ที่ทันสมัย
ด้านล่างเราจะใช้ <เสียง> tag เพื่ออธิบายไฟล์ mp3 (Internet Explorer, Chrome และ Safari มีประสิทธิภาพ) ยังเพิ่มประเภทไฟล์ OGG (Firefox และ Opera เบราว์เซอร์ที่มีประสิทธิภาพ). หากล้มเหลวก็จะแสดงข้อผิดพลาด ข้อความ:
ตัวอย่าง
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>
ลอง»
ปัญหา:
- <เสียง> แท็กใน HTML 4 ไม่ถูกต้อง หน้าของคุณจะไม่สามารถตรวจสอบได้โดย HTML 4
- คุณจะต้องแปลงไฟล์เสียงให้เป็นรูปแบบที่แตกต่างกัน
- <เสียง> องค์ประกอบไม่ทำงานในเบราว์เซอร์รุ่นเก่า
โซลูชั่นที่ดีที่สุด HTML
ตัวอย่างต่อไปนี้ใช้สองรูปแบบเสียงที่แตกต่างกัน HTML5 <เสียง> องค์ประกอบพยายามที่จะเล่น OGG เป็น MP3 หรือเสียง หากล้มเหลวรหัสจะพยายามที่จะย้อนกลับ <embed> องค์ประกอบ
ตัวอย่าง
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>
ลอง»
ปัญหา:
- คุณต้องแปลงเป็นรูปแบบเสียงที่แตกต่างกัน
- <embed> องค์ประกอบที่ไม่สามารถย้อนกลับเพื่อแสดงข้อความแสดงข้อผิดพลาด
yahoo Media Player - วิธีง่ายๆในการเพิ่มเสียงในเว็บไซต์ของคุณ
เล่นโดยใช้ Yahoo ฟรี ที่จะใช้มันคุณจะต้องใส่ JavaScript นี้ลงด้านล่างของหน้าเว็บ:
เล่น yahoo สามารถเล่น MP3 และรูปแบบอื่น ๆ อีกมากมาย คุณจะต้องเพิ่มหนึ่งบรรทัดของรหัสที่หน้าหรือบล็อกของคุณคุณสามารถทำให้หน้าเว็บ HTML ของคุณลงในเพลย์ลิสมืออาชีพ:
ตัวอย่าง
<script src="http://mediaplayer.yahoo.com/latest"></script>
ลอง»
หากคุณต้องการที่จะใช้มันคุณจะต้องใส่ JavaScript นี้ลงด้านล่างของหน้าเว็บ:
แล้วก็ใส่ลิงค์ไฟล์ MP3 ของคุณในแบบ HTML, JavaScript จะสร้างปุ่มเล่นเพลงแต่ละเพลง:
<a href="song1.mp3"> เล่นเพลง 1 </a>
<a href="song2.wav"> เล่น Song 2 </a>
...
...
yahoo เครื่องเล่นสื่อสำหรับผู้ใช้ของคุณเป็นปุ่มเล่นขนาดเล็กแทนผู้เล่นที่เต็มรูปแบบ อย่างไรก็ตามเมื่อคุณคลิกที่ปุ่มนี้จะปรากฏขึ้นเป็นผู้เล่นที่สมบูรณ์
โปรดทราบว่านักเตะคนนี้ที่เชื่อมต่อเสมอที่ด้านล่างของกรอบหน้าต่าง เพียงคลิกบนคุณสามารถเลื่อนมันออกมา
ใช้เชื่อมโยงหลายมิติ
หากหน้าเว็บมีเชื่อมโยงหลายมิติที่ชี้ไปยังไฟล์มีเดียเบราว์เซอร์ส่วนใหญ่จะใช้โปรแกรม "ผู้ช่วย" ในการเล่นไฟล์
ส่วนรหัสต่อไปนี้แสดงการเชื่อมโยงไปยังไฟล์ mp3 หากผู้ใช้คลิกที่ลิงค์เบราว์เซอร์จะเปิดตัวโปรแกรม "ผู้ช่วย" ในการเล่นไฟล์:
คำอธิบายแบบอินไลน์เสียง
เมื่อคุณรวมเสียงในหน้าเว็บหรือเป็นส่วนหนึ่งของหน้าเว็บก็จะเรียกว่าเสียงแบบอินไลน์
หากคุณวางแผนที่จะใช้แบบอินไลน์เสียงในการใช้งานเว็บของคุณคุณจำเป็นต้องรู้ว่าหลายคนพบอินไลน์เสียงที่น่ารำคาญ นอกจากนี้ทราบว่าผู้ใช้อาจมีการปิดเบราว์เซอร์ตัวเลือกเสียงแบบอินไลน์ของคุณ
แนะนำที่ดีที่สุดของเราคือการเฉพาะเมื่อผู้ใช้ต้องการที่จะได้ยินเสียงสถานที่แบบอินไลน์มีพวกเขา ตัวอย่างในเชิงบวกคือว่าเมื่อผู้ใช้ต้องการที่จะได้ยินเสียงที่บันทึกและคลิกที่ลิงค์จะเปิดหน้าเว็บและเล่นการบันทึก
แท็ก HTML มัลติมีเดีย
ใหม่: HTML5 ป้ายชื่อใหม่
| 标签 | 描述 |
|---|---|
| <embed> | 定义内嵌对象。HTML4 中不赞成，HTML5 中允许。 |
| <object> | 定义内嵌对象。 |
| <param> | 定义对象的参数。 |
| <audio> New | 定义了声音内容 |
| <video> New | 定义一个视频或者影片 |
| <source> New | 定义了media元素的多媒体资源(<video> 和 <audio>) |
| <track> New | 规定media元素的字幕文件或其他包含文本的文件 (<video> 和<audio>) |