พัฒนาเว็บไซต์ด้วย HTML5

HTML5 การใช้งาน Audio

การใช้งาน audio ใน HTML5 นั้นช่วยให้เราสามารถแทรกไฟล์เสียงลงในหน้าเว็บได้อย่างง่ายดาย โดย HTML5 ได้เพิ่มแท็ก <audio> สำหรับใช้ในการเล่นเสียง ซึ่งมีความยืดหยุ่นในการควบคุมและแสดงผล รวมถึงการประยุกต์ใช้ไฟล์เสียงในลักษณะต่าง ๆ โดยไม่ต้องพึ่งพาปลั๊กอินจากภายนอก เช่น Flash

รูปแบบการใช้งานเบื้องต้น

HTML
<audio controls>
  <source src="audiofile.mp3" type="audio/mpeg">
  <source src="audiofile.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>
  • <audio controls>: แท็ก audio ใช้เพื่อแสดงเครื่องเล่นเสียง และ controls จะเพิ่มปุ่มควบคุม (เล่น/หยุด, เสียงดัง/เบา, และความยาวเวลา) ลงไปให้ผู้ใช้สามารถควบคุมการเล่นเสียงได้
  • <source>: ใช้เพื่อระบุไฟล์เสียงที่รองรับหลายรูปแบบ โดยส่วนมากใช้ MP3 และ OGG เพื่อความเข้ากันได้กับเบราว์เซอร์ที่หลากหลาย
  • ข้อความ Your browser does not support the audio element.: จะแสดงขึ้นหากเบราว์เซอร์ไม่รองรับการเล่นเสียงผ่าน HTML5

การประยุกต์ใช้งาน

การเล่นเสียงอัตโนมัติ (Autoplay)

สามารถตั้งค่าให้เสียงเล่นโดยอัตโนมัติเมื่อโหลดหน้าเว็บด้วยการใช้แอตทริบิวต์ autoplay ดังนี้

HTML
<audio autoplay>
  <source src="audiofile.mp3" type="audio/mpeg">
  <source src="audiofile.ogg" type="audio/ogg">
</audio>

การเล่นเสียงซ้ำ (Loop)

การเล่นเสียงซ้ำสามารถทำได้ด้วยการใช้แอตทริบิวต์ loop

HTML
<audio controls loop>
  <source src="audiofile.mp3" type="audio/mpeg">
  <source src="audiofile.ogg" type="audio/ogg">
</audio>

การซ่อนเครื่องเล่นเสียง (Hidden Audio)

หากไม่ต้องการให้แสดงเครื่องเล่นเสียง แต่ต้องการเล่นเสียงเบื้องหลัง สามารถซ่อนเครื่องเล่นด้วยการลบแอตทริบิวต์ controls ออกและใช้แอตทริบิวต์ hidden แทน

HTML
<audio autoplay hidden>
  <source src="audiofile.mp3" type="audio/mpeg">
  <source src="audiofile.ogg" type="audio/ogg">
</audio>

การควบคุมการเล่นเสียงด้วย JavaScript

นอกจากการใช้แอตทริบิวต์ในแท็ก audio เรายังสามารถควบคุมการทำงานของเสียงด้วย JavaScript ได้ เช่น การเล่น การหยุด และการควบคุมระดับเสียง

HTML
<audio id="myAudio">
  <source src="audiofile.mp3" type="audio/mpeg">
  <source src="audiofile.ogg" type="audio/ogg">
</audio>

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

<script>
  var audio = document.getElementById("myAudio");

  function playAudio() {
    audio.play();
  }

  function pauseAudio() {
    audio.pause();
  }

  function increaseVolume() {
    if(audio.volume < 1) {
      audio.volume += 0.1;
    }
  }
</script>

สรุป

การใช้งาน audio ใน HTML5 ทำให้การแสดงและควบคุมเสียงในเว็บเพจง่ายขึ้นมาก สามารถประยุกต์ใช้ได้หลายรูปแบบตามความต้องการ ทั้งการเล่นเสียงอัตโนมัติ การเล่นซ้ำ และการควบคุมผ่าน JavaScript นอกจากนี้การรองรับหลายรูปแบบของไฟล์เสียง (เช่น MP3, OGG) ยังช่วยให้เว็บเพจของคุณสามารถทำงานได้กับเบราว์เซอร์หลากหลายประเภท

Tags
แชร์เรื่องนี้

เรื่องที่น่าสนใจ