วิธีเพิ่มเสียงพื้นหลัง/เพลงในเว็บไซต์

เรียนรู้วิธีเพิ่มเสียงพื้นหลังหรือไฟล์เพลงในเว็บไซต์โดยใช้ Element HTML <audio> และแอตทริบิวต์ต่างๆ

เพื่อเพิ่มเพลง/เสียงพื้นหลังในเว็บไซต์ สามารถใช้ Element เสียง HTML (<audio>...</audio>)

สมมติคุณมีไฟล์เสียงต้องการเล่นพื้นหลังทันทีเมื่อผู้ใช้เข้าชม โค้ด HTML ทั่วไปที่ต้องใช้:

<audio autoplay> <source src="your-audio-file.wav" type="audio/wav" /> </audio>

แอตทริบิวต์ src ของ Element <audio> รองรับแหล่งเสียงทั้งภายในและภายนอก

สังเกตแอตทริบิวต์ autoplay จำเป็นหากต้องการเล่นทันทีเมื่อผู้ใช้เข้าหน้าเว็บ

Demo: เพื่อลองฟัง ลดเสียงคอมพิวเตอร์/หูฟัง แล้วคลิก Demo นี้

HTML รองรับรูปแบบเสียง 3 แบบ: MP3, WAV, และ OGG ใน Element <audio> ระบุรูปแบบในแอตทริบิวต์ type:

ในบทความนี้ใช้ WAV จึงเพิ่ม type="audio/wav" บน Element <source>

แอตทริบิวต์ของ Element Audio

ต่อไปคือแอตทริบิวต์ที่มีประโยชน์ built-in ใน Element <audio> ให้ควบคุมละเอียด:

Loop เสียงพื้นหลัง

เพื่อ Loop เสียงพื้นหลัง ให้เพิ่มแอตทริบิวต์ loop:

<audio autoplay loop> <source src="your-audio-file.wav" type="audio/wav" /> </audio>

Mute เสียงพื้นหลัง

เพื่อ Mute เสียงพื้นหลัง ให้เพิ่มแอตทริบิวต์ muted:

<audio muted> <source src="your-audio-file.wav" type="audio/wav" /> </audio>

ทำไมต้องใช้ muted? อาจต้องการปิดเสียงชั่วคราวและเปิดทีหลังโดยไม่ลบ Element ทั้งหมด

เพิ่ม Control Interface

เพื่อเพิ่ม Controls (Play, Pause ฯลฯ) ใช้แอตทริบิวต์ controls:

<audio controls> <source src="your-audio-file.wav" type="audio/wav" /> </audio>

ตอนนี้ผู้ใช้กด Play ได้เองหากต้องการฟัง

Browser Support สำหรับรูปแบบเสียง

• MP3 รองรับในทุกเบราว์เซอร์
• WAV รองรับในทุกเบราว์เซอร์ ยกเว้น Edge/IE
• OGG รองรับในทุกเบราว์เซอร์ ยกเว้น Edge/IE และ Safari

ข้อมูล ณ กรกฎาคม 2020

Tip: เพิ่ม <source> สำรองใน Element <audio> เผื่อเบราว์เซอร์ผู้ใช้ไม่รองรับรูปแบบหลัก:

<audio controls> <source src="your-audio-file.wav" type="audio/wav" /> <source src="your-audio-file.mp3" type="audio/mpeg" /> </audio>

ตอนนี้ หากเบราว์เซอร์ไม่รองรับ WAV จะเล่น MP3 แทน