วิธาเล่นไฟล์เสียงพื้นหลังในเว็บเพจ

บทนำ

หมายเหตุ: การเล่นเสียงอัตโนมัติ (Autoplay) ในเบราว์เซอร์สมัยใหม่ ถูกบล็อก หากมีเสียง ต้องใช้ muted หรือโต้ตอบผู้ใช้ก่อน

วิธีเดิม (Deprecated - ใช้ <embed>)

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Background Music (Old Method)</title>
  </head>
  <body>
    <p>เพลงเล่นในพื้นหลัง...</p>
    <embed src="/audio/Kalimba.mp3" loop="true" autostart="true" width="2" height="0">
  </body>
</html>

วิธีสมัยใหม่ (แนะนำ - ใช้ <audio>)

<audio autoplay loop muted>
  <source src="/audio/background.mp3" type="audio/mpeg">
  <source src="/audio/background.ogg" type="audio/ogg">
</audio>

Autoplay Policy (Chrome/Edge/Safari/Firefox)

Best Practice

1. ใช้ muted autoplay loop สำหรับ Background Music
2. เพิ่มปุ่ม Unmute ให้ผู้ใช้เลือกเปิดเสียง
3. ไม่บังคับเล่นเสียงทันที (UX แย่)

ตัวอย่าง Background Music พร้อมปุ่ม Unmute

<audio id="bgm" src="music.mp3" autoplay loop muted></audio>
<button onclick="document.getElementById('bgm').muted=false">🔊 เปิดเสียง</button>