วิธีเพิ่มเสียงลงในเว็บเพจ HTML5

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

ประโยชน์ของการใช้ HTML5 คือคุณสามารถฝังเสียงได้โดยใช้แท็ก 2 แท็ก จากนั้นเบราว์เซอร์จะเล่นเสียงเหมือนกับที่พวกเขาจะแสดงภาพเมื่อคุณใช้องค์ประกอบ IMG

วิธีเพิ่มเสียงลงในเว็บเพจ HTML5

คุณจำเป็นต้องมี ตัวแก้ไข HTML , ไฟล์เสียง (ควรอยู่ในรูปแบบ MP3) และตัวแปลงไฟล์เสียง

1. ขั้นแรกคุณต้องมีไฟล์เสียง วิธีที่ดีที่สุดคือบันทึกไฟล์เป็น MP3 ( .mp3 ) เนื่องจากมีคุณภาพเสียงสูงและได้รับการสนับสนุนจากเบราว์เซอร์ส่วนใหญ่ (Android 2.3 ขึ้นไป, Chrome 6+, IE 9+, iOS 3+ และ Safari 5+)
2. แปลงไฟล์ของคุณเป็นรูปแบบ Vorbis ( .ogg ) เพื่อเพิ่มใน Firefox 3.6+ และ Opera 10.5+ คุณสามารถใช้ตัวแปลงเช่นเดียวกับที่พบใน Vorbis.com นอกจากนี้คุณยังสามารถแปลงไฟล์ MP3 เป็นรูปแบบ WAV ( .wav ) เพื่อรับการสนับสนุนจาก Firefox และ Opera ผมขอแนะนำให้คุณโพสต์ไฟล์ของคุณทั้ง 3 ประเภทเพื่อความปลอดภัย แต่ส่วนใหญ่ที่คุณต้องการก็คือ MP3 และอีกรูปแบบหนึ่ง
3. อัปโหลดไฟล์เสียงทั้งหมดไปยังเว็บเซิร์ฟเวอร์ของคุณและจดบันทึกไดเรกทอรีที่คุณจัดเก็บไว้เป็นความคิดที่ดีที่จะวางไว้ในไดเรกทอรีย่อยสำหรับไฟล์เสียงเช่นเดียวกับนักออกแบบส่วนใหญ่ที่บันทึกภาพในไดเร็กทอรี ภาพ
4. เพิ่มองค์ประกอบ AUDIO ลงในไฟล์ HTML ของคุณที่คุณต้องการให้การควบคุมไฟล์เสียงแสดงขึ้น <ตัวควบคุมเสียง>
5. วางองค์ประกอบ SOURCE สำหรับไฟล์เสียงแต่ละไฟล์ที่คุณอัปโหลดภายในองค์ประกอบ AUDIO :

1. HTML ใด ๆ ภายในองค์ประกอบ AUDIO จะถูกใช้เป็นตัวสำรองสำหรับเบราว์เซอร์ที่ไม่สนับสนุนองค์ประกอบ AUDIO เพื่อเพิ่ม HTML บางส่วน วิธีที่ง่ายที่สุดคือการเพิ่ม HTML เพื่อให้พวกเขาดาวน์โหลดไฟล์ แต่คุณยังสามารถใช้วิธีการฝัง HTML 4.01 เพื่อเล่นเสียง นี่คือทางเลือกง่ายๆ:

   เบราว์เซอร์ของคุณไม่สนับสนุนการเล่นเสียงให้ดาวน์โหลดไฟล์:

   1. MP3 ,
   2. Vorbis , WAV
2. สิ่งสุดท้ายที่คุณต้องทำก็คือปิดส่วนประกอบ AUDIO ของคุณ:
3. เมื่อทำเสร็จแล้ว HTML ของคุณควรมีลักษณะดังนี้: <ตัวควบคุมเสียง>
   4. เบราว์เซอร์ของคุณไม่สนับสนุนการเล่นเสียงให้ดาวน์โหลดไฟล์:

   5. MP3 ,
   6. Vorbis ,
   7. WAV

เคล็ดลับเพิ่มเติม

1. อย่าลืมใช้ doctype HTML5 () เพื่อให้ HTML ของคุณสามารถตรวจสอบได้
2. ดูแอตทริบิวต์ที่มีให้สำหรับองค์ประกอบเพื่อดูว่ามีตัวเลือกอื่นใดที่คุณสามารถเพิ่มลงในองค์ประกอบของคุณได้
3. โปรดทราบว่าเราได้สร้าง HTML เพื่อรวมการควบคุมตามค่าเริ่มต้นแล้วและได้ปิดการเล่นอัตโนมัติแล้ว แน่นอนคุณสามารถเปลี่ยนได้ แต่โปรดจำไว้ว่าหลาย ๆ คนพบว่าเสียงเริ่มต้นโดยอัตโนมัติ / ไม่สามารถควบคุมให้น่ารำคาญได้ดีที่สุดและมักจะออกจากหน้าเว็บเมื่อเกิดเหตุการณ์เช่นนี้ขึ้น