ออบเจ็กต์ Audio ใน HTML DOM

ออบเจ็กต์ Audio (Audio Object)

ออบเจ็กต์ Audio ใน HTML DOM แทนอิลิเมนต์ HTML <audio> ซึ่งเพิ่มเข้ามาใน HTML5 ใช้สำหรับเล่นไฟล์เสียง ผ่าน audio object เราสามารถจัดการ audio element ได้ เช่น ดูข้อมูล audioTrack, ตั้งค่า autoplay, controls, loop, volume เป็นต้น

คุณสมบัติ (Properties)

คุณสมบัติ	คำอธิบาย
`audioTracks`	คืน AudioTrackList object ที่มี audio tracks ที่ใช้ได้
`autoplay`	ตั้งค่าหรือคืนค่าเล่นอัตโนมัติ
`buffered`	คืน TimeRanges object ของส่วนที่ buffered ไว้
`controller`	คืน MediaController object ของ media controller ปัจจุบัน
`controls`	ตั้งค่าหรือคืนค่าว่าแสดงควบคุม play/pause หรือไม่
`crossOrigin`	ตั้งค่าหรือคืนค่า CORS settings
`currentSrc`	คืน URL ของไฟล์เสียงที่กำลังเล่น
`currentTime`	ตั้งค่าหรือคืนค่าตำแหน่งการเล่นปัจจุบัน (วินาที)
`defaultMuted`	ตั้งค่าหรือคืนค่า mute เริ่มต้น
`defaultPlaybackRate`	ตั้งค่าหรือคืนค่าความเร็วเล่นเริ่มต้น
`duration`	คืนความยาวของเสียง (วินาที)
`ended`	คืนว่าการเล่นจบแล้วหรือยัง
`error`	คืน MediaError object สถานะข้อผิดพลาด
`loop`	ตั้งค่าหรือคืนค่าเล่นวนลูป
`mediaGroup`	ตั้งค่าหรือคืนค่าชื่อ media group
`muted`	ตั้งค่าหรือคืนค่า mute/unmute
`networkState`	คืน network state ปัจจุบัน
`paused`	ตั้งค่าหรือคืนค่าว่าหยุดชั่วคราวหรือไม่
`playbackRate`	ตั้งค่าหรือคืนค่าความเร็วการเล่น
`played`	คืน TimeRanges ของส่วนที่เล่นแล้ว
`preload`	ตั้งค่าหรือคืนค่า preload attribute
`readyState`	คืน ready state ปัจจุบัน
`seekable`	คืน TimeRanges ของส่วนที่ seek ได้
`seeking`	คืนว่ากำลัง seek อยู่หรือไม่
`src`	ตั้งค่าหรือคืนค่า src attribute
`textTracks`	คืน TextTrackList ของ text tracks ที่มี
`volume`	ตั้งค่าหรือคืนค่า volume (0.0 - 1.0)

เมธอด (Methods)

เมธอด	คำอธิบาย
`addTextTrack()`	เพิ่ม text track ใหม่
`canPlayType()`	ตรวจสอบว่า browser เล่น audio type นี้ได้ไหม
`fastSeek()`	seek ไปเวลาที่ระบุเร็วขึ้น
`getStartDate()`	คืน Date object ของ timeline offset
`load()`	โหลด audio element ใหม่
`play()`	เริ่มเล่นเสียง
`pause()`	หยุดชั่วคราวเสียงที่กำลังเล่น

ไวยากรณ์ (Syntax)

การสร้าง audio element

var x = document.createElement("AUDIO")

การเข้าถึง audio element

var x = document.getElementById("demoAudio")

ตัวอย่างการใช้งาน

ตัวอย่างด้านล่างแสดงการใช้ Audio Object อ่าน duration และสร้าง audio ใหม่

<!DOCTYPE html>
<html>
<body>
    <h1>MUSIC</h1>
    <audio id="Audio" controls>
        <source src="sample.mp3" type="audio/mpeg">
        Audio not supported in your browser
    </audio>
    <p>Click the button to get the duration of the audio, in seconds.</p>
    <button onclick="AudioDur()">Duration</button>
    <button onclick="CreateAudio()">CREATE</button>
    <p id="SAMPLE"></p>
    <script>
        function AudioDur() {
            var x = document.getElementById("Audio").duration;
            document.getElementById("SAMPLE").innerHTML = x;
        }
        function CreateAudio() {
            var x = document.createElement("AUDIO");
            x.setAttribute("src", "sample1.mp3");
            x.setAttribute("controls", "controls");
            document.body.appendChild(x);
        }
    </script>
</body>
</html>

ผลลัพธ์

เริ่มต้น: audio player พร้อม controls, ปุ่ม Duration และ CREATE

คลิก Duration: แสดงระยะเวลาเสียง (วินาที)

คลิก CREATE: สร้าง audio player ใหม่พร้อม src="sample1.mp3"

คำอธิบายเพิ่มเติม

รองรับ format: MP3, WAV, OGG (ขึ้นอยู่กับ browser)
ใช้ <source> หลายตัวสำหรับ fallback formats
Event ที่สำคัญ: play, pause, ended, timeupdate, error, loadedmetadata
play() คืน Promise - ต้อง handle rejection (autoplay policy)
สร้าง audio แบบไม่มี UI: new Audio('sound.mp3') หรือ document.createElement('audio')