วิธีเพิ่มเสียง/เพลงประกอบให้กับเว็บไซต์ของคุณ

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

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

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

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

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

สังเกต autoplay คุณลักษณะ. จำเป็นหากคุณต้องการให้เสียงเริ่มเล่นทันทีที่ผู้ใช้เข้าสู่หน้าเว็บของคุณ

สาธิต: หากต้องการฟังตัวอย่าง ให้ลดระดับเสียงบนคอมพิวเตอร์/หูฟัง แล้วคลิกการสาธิตนี้

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

ในบทช่วยสอนนี้ ฉันใช้รูปแบบ WAV ดังนั้นฉันจึงเพิ่ม type="audio/wav" แอตทริบิวต์บน องค์ประกอบด้านบน

แอตทริบิวต์ขององค์ประกอบเสียง

ต่อไปนี้คือแอตทริบิวต์ที่มีประโยชน์จำนวนหนึ่งซึ่งมีอยู่ใน <audio> และให้คุณควบคุมได้อย่างละเอียด

เสียงพื้นหลังวนซ้ำ

หากต้องการวนลูปเสียงพื้นหลัง คุณสามารถเพิ่ม loop แอตทริบิวต์:

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

ปิดเสียงพื้นหลัง

หากต้องการปิดเสียงพื้นหลัง คุณสามารถเพิ่ม mute แอตทริบิวต์:

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

ทำไมคุณถึงใช้ mute คุณลักษณะ? คุณอาจต้องการปิดใช้แหล่งที่มาของเสียงขององค์ประกอบเสียงชั่วคราวและเปิดใหม่อีกครั้งในภายหลัง โดยไม่ต้องลบองค์ประกอบทั้งหมดออกจากหน้าเว็บ

เพิ่มอินเทอร์เฟซการควบคุม

ในการเพิ่มการควบคุม (เล่น หยุดชั่วคราว ฯลฯ) ให้ใช้ controls แอตทริบิวต์:

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

ตอนนี้ผู้ใช้สามารถคลิกเล่นหากต้องการฟังไฟล์เสียงของคุณ

รองรับเบราว์เซอร์สำหรับรูปแบบเสียง

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

ณ เดือนกรกฎาคม 2020

เคล็ดลับ: เพิ่ม <source> . พิเศษ ไปยัง <audio> . ของคุณ องค์ประกอบเป็นทางเลือก ในกรณีที่ผู้ใช้ปลายทางของคุณใช้เบราว์เซอร์ที่ไม่สนับสนุนรูปแบบไฟล์หลักของคุณ:

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

ตอนนี้หากเบราว์เซอร์ของผู้ใช้ไม่รองรับรูปแบบ WAV ก็จะเล่นไฟล์ MP3 แทน