HTML5 การใช้งาน audio Tag

การใช้งาน <audio> tag ใน HTML5 เป็นการแสดงเสียงหรือไฟล์เสียงในหน้าเว็บ โดยมีรูปแบบการทำงานที่หลากหลาย รวมถึงคุณสมบัติที่สามารถปรับแต่งได้ตามความต้องการของผู้พัฒนา

พื้นฐานของ <audio> Tag

<audio> tag ใช้สำหรับฝังไฟล์เสียงลงในหน้าเว็บ HTML ซึ่งสามารถใช้งานได้โดยการระบุแหล่งที่มาของไฟล์เสียงผ่านแอตทริบิวต์ src หรือใช้ <source> tag ภายในเพื่อระบุรูปแบบไฟล์เสียงหลายรูปแบบที่รองรับเบราว์เซอร์ได้ต่างกัน

โครงสร้างพื้นฐาน

<audio controls>
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

• แอตทริบิวต์ controls ช่วยแสดงตัวควบคุมเสียง เช่น ปุ่มเล่น/หยุด และแถบเลื่อนระดับเสียง
• <source> tag ใช้ระบุรูปแบบไฟล์เสียง ซึ่งมี type เพื่อบอกชนิดของไฟล์ให้เบราว์เซอร์ตรวจสอบ
• ข้อความภายใน <audio> จะถูกแสดงเมื่อเบราว์เซอร์ไม่รองรับการใช้งาน

แอตทริบิวต์ที่ใช้กับ <audio>

controls: แสดงอินเทอร์เฟซควบคุมการเล่น เช่น ปุ่มเล่น หยุด และเลื่อนเสียง

<audio controls src="example.mp3"></audio>

autoplay: ให้เสียงเล่นโดยอัตโนมัติเมื่อโหลดหน้าเว็บ

<audio autoplay src="example.mp3"></audio>

loop: เล่นเสียงซ้ำโดยอัตโนมัติ

<audio controls loop src="example.mp3"></audio>

muted: ปิดเสียงเริ่มต้นเมื่อโหลด

<audio controls muted src="example.mp3"></audio>

preload: กำหนดว่าจะแคชไฟล์เสียงหรือไม่ โดยมีค่าดังนี้:

• auto: เบราว์เซอร์จะพยายามโหลดไฟล์เสียงทันทีที่โหลดหน้า
• metadata: โหลดเฉพาะข้อมูลไฟล์ (ไม่โหลดไฟล์เสียงทั้งหมด)
• none: ไม่โหลดไฟล์เสียงจนกว่าจะถูกเล่น

<audio controls preload="auto" src="example.mp3"></audio>

การใช้งานหลายรูปแบบไฟล์ (Multiple Formats)

เบราว์เซอร์แต่ละตัวรองรับไฟล์เสียงต่างกัน ดังนั้นการระบุรูปแบบหลายๆ อย่างจะช่วยให้ไฟล์เสียงเล่นได้ในทุกเบราว์เซอร์

<audio controls>
  <source src="sound.mp3" type="audio/mpeg">
  <source src="sound.ogg" type="audio/ogg">
  <source src="sound.wav" type="audio/wav">
  Your browser does not support the audio element.
</audio>

การใช้งานร่วมกับ JavaScript

สามารถควบคุมการเล่นเสียงผ่าน JavaScript ได้ เช่น การเล่น/หยุด ปรับระดับเสียง หรือควบคุมเวลาในการเล่น

ตัวอย่างการควบคุมด้วย JavaScript

<audio id="myAudio" src="example.mp3"></audio>

<button onclick="playAudio()">Play</button>
<button onclick="pauseAudio()">Pause</button>

<script>
  var audio = document.getElementById("myAudio");
  
  function playAudio() {
    audio.play();
  }
  
  function pauseAudio() {
    audio.pause();
  }
</script>

สรุป

• <audio> tag ใน HTML5 ช่วยให้เราสามารถฝังเสียงลงในหน้าเว็บได้อย่างง่ายดาย
• สามารถใช้หลายรูปแบบไฟล์เพื่อรองรับเบราว์เซอร์ต่างๆ
• มีคุณสมบัติต่างๆ เช่น autoplay, loop, muted, controls ที่ทำให้การเล่นเสียงในหน้าเว็บมีความยืดหยุ่น
• ยังสามารถควบคุมการทำงานด้วย JavaScript เพื่อเพิ่มประสบการณ์การใช้งานที่มากขึ้น