HTML DOM Audio Object แสดงถึงองค์ประกอบ HTML
คุณสมบัติ
ต่อไปนี้เป็นคุณสมบัติของ HTML DOM Audio Object -
| คุณสมบัติ | คำอธิบาย |
|---|---|
| แทร็กเสียง | การส่งคืนออบเจ็กต์ audioTrackList ที่มีแทร็กเสียงที่พร้อมใช้งาน |
| เล่นอัตโนมัติ | การกลับหรือตั้งค่าเสียงให้เริ่มเล่นโดยอัตโนมัติ |
| บัฟเฟอร์ | การส่งคืนออบเจ็กต์ TimeRange ที่มีส่วนของเสียงที่บัฟเฟอร์ไว้ทั้งหมด |
| คอนโทรลเลอร์ | การส่งคืนวัตถุ MediaController แทนตัวควบคุมสื่อปัจจุบันของเสียง |
| การควบคุม | การตั้งค่าหรือย้อนกลับว่าเสียงควรมีการควบคุมการเล่น/หยุดชั่วคราวแสดงหรือไม่ |
| crossOrigin | การตั้งค่าหรือคืนการตั้งค่า CORS ของเสียง |
| currentSrc | เพื่อส่งคืน URL ของเสียงที่กำลังเล่นอยู่ |
| เวลาปัจจุบัน | การตั้งค่าหรือคืนตำแหน่งการเล่นปัจจุบัน (เป็นวินาที) |
| ปิดเสียงเริ่มต้น | ตั้งค่าหรือส่งคืนว่าควรปิดเสียงโดยค่าเริ่มต้นหรือไม่ |
| อัตราการเล่นเริ่มต้น | ตั้งค่าหรือคืนค่าว่าความเร็วในการเล่นเริ่มต้นของเสียง |
| ระยะเวลา | การคืนค่าความยาวของเสียงเป็นวินาที |
| สิ้นสุด | การย้อนกลับไม่ว่าการเล่นจะสิ้นสุดหรือไม่ |
| ข้อผิดพลาด | การส่งคืนวัตถุประเภท MedioError ที่แสดงสถานะข้อผิดพลาดของเสียง |
| วนซ้ำ | การตั้งค่าหรือย้อนกลับว่าเสียงควรเริ่มเล่นอีกครั้งเมื่อเล่นเสร็จแล้วหรือไม่ |
| mediaGroup | การตั้งค่าหรือคืนชื่อกลุ่มสื่อที่เสียงนั้นเป็นส่วนหนึ่ง |
| ปิดเสียง | การตั้งค่าหรือย้อนกลับว่าควรปิดเสียงหรือไม่ |
| สถานะเครือข่าย | การคืนสถานะเครือข่ายปัจจุบันของเสียง |
| หยุดชั่วคราว | การตั้งค่าหรือย้อนกลับว่าเสียงจะหยุดชั่วคราวหรือไม่ |
| อัตราการเล่น | การตั้งค่าหรือคืนอัตราการเล่นเสียง |
| เล่นแล้ว | การส่งคืนวัตถุประเภท TimeRanges วัตถุที่แสดงถึงส่วนที่เล่นของเสียง |
| โหลดล่วงหน้า | การตั้งค่าหรือส่งคืนแอตทริบิวต์พรีโหลดของเสียง |
| readyState | การคืนสถานะพร้อมปัจจุบันของเสียง |
| ค้นหาได้ | การส่งคืนวัตถุ TimeRange ที่แสดงส่วนที่ค้นหาได้ของเสียง |
| แสวงหา | เพื่อส่งคืนว่าผู้ใช้กำลังค้นหาในไฟล์เสียงหรือไม่ |
| src | การตั้งค่าหรือคืนค่าของแอตทริบิวต์ src ของเสียง |
| textTracks | การส่งคืนออบเจ็กต์ TextTrackList ที่แสดงแทร็กข้อความที่มีอยู่ทั้งหมด |
| ระดับเสียง | การตั้งหรือปรับระดับเสียงกลับ |
วิธีการ
ต่อไปนี้เป็นวิธีการของออบเจกต์เสียง -
| วิธีการ | คำอธิบาย |
|---|---|
| addTextTrack() | เพื่อเพิ่มแทร็กข้อความใหม่ให้กับเสียงที่กำหนด |
| canPlayType() | เพื่อตรวจสอบว่าเบราว์เซอร์สามารถเล่นประเภทเสียงที่ระบุได้หรือไม่ |
| fastSeek() | หากต้องการหาเวลาที่กำหนดในเครื่องเล่นเสียง/ |
| getStartDate() | การคืนค่าออบเจ็กต์ Date ใหม่ โดยแทนไทม์ไลน์ออฟเซ็ตปัจจุบัน |
| โหลด() | ในการโหลดองค์ประกอบเสียงอีกครั้ง |
| เล่น() | เพื่อเริ่มเล่นเสียง |
| หยุดชั่วคราว() | เพื่อหยุดเสียงที่กำลังเล่นอยู่ชั่วคราว |
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การสร้างองค์ประกอบเสียง
var x= document.createElement("AUDIO") การเข้าถึงองค์ประกอบเสียง
var x = document.getElementById("demoAudio") ตัวอย่าง
ให้เราดูตัวอย่างสำหรับ Audio Object −
<!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 id="Audio" controls> <source src="sample.mp3" type="audio/mpeg"> Audio not supported in your browser </audio>
จากนั้นเราได้สร้างปุ่ม "Duration" สองปุ่มและ CREATE เพื่อใช้งานฟังก์ชัน AudioDur() และ CreateAudio() ตามลำดับ
<button onclick="AudioDur()">Duration</button> <button onclick="CreateAudio()">CREATE</button>
ฟังก์ชัน AudioDur() รับองค์ประกอบที่มี id “Audio” ที่เชื่อมโยงอยู่ ได้รับองค์ประกอบ
function AudioDur() {
var x = document.getElementById("Audio").duration;
document.getElementById("SAMPLE").innerHTML = x;
} ฟังก์ชัน CreateAudio() สร้างองค์ประกอบเสียงและตั้งค่าแอตทริบิวต์เช่น src เป็น "sample1.mp3" และเปิดใช้งานการควบคุมโดยการตั้งค่าแอตทริบิวต์ "การควบคุม" จากนั้นองค์ประกอบจะถูกผนวกเข้ากับเนื้อหาโดยใช้เมธอด appendChild()
function CreateAudio() {
var x = document.createElement("AUDIO");
x.setAttribute("src","sample1.mp3");
x.setAttribute("controls", "controls");
document.body.appendChild(x);
} 