วิธีเพิ่มเพลงพื้นหลังในเว็บเพจ

ตั้ง width และ height ให้เล็กมาก (หรือ 0) เพื่อซ่อน player แอตทริบิวต์ loop ระบุว่าเล่นซ้ำ วางไฟล์เพลงบนเซิร์ฟเวอร์และระบุลิงก์ใน src

ตัวอย่าง

<!DOCTYPE html> <html>
  <head>
    <title>HTML background music</title>
  </head>
  <body>
    <p>The music is running in the background.</p>
    <embed src="/html/Kalimba.mp3" loop="true" autostart="true" width="2" height="0">
  </body>
</html>

⚠️ ข้อควรระวังสำคัญ (Modern Web)

• Autoplay Policy: เบราว์เซอร์สมัยใหม่ บล็อก autoplay เสียง หากไม่มีการโต้ตอบของผู้ใช้ (user gesture)
• UX แย่มาก: เพลงพื้นหลังรบกวน ผู้ใช้ปิดทันที เพิ่ม bounce rate
• Accessibility: ผู้ใช้ screen reader กระวนข้อมูลเสียง
• Bandwidth: ใช้ bandwidth โดยไม่ได้ขออนุญาต

แนวทางที่ดีกว่า (Best Practice)

<!-- ให้ผู้ใช้เลือกเล่นเอง -->
<audio controls preload="metadata">
  <source src="music.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

• ใช้ <audio> แทน <embed> (HTML5 standard)
• ใส่ controls ให้ผู้ใช้ควบคุมเอง
• ไม่ใช้ autoplay หรือใช้ autoplay muted เท่านั้น