เหตุการณ์ onvolumechange จะถูกกระตุ้นเมื่อผู้ใช้เปลี่ยนระดับเสียงของวิดีโอหรือเสียง เช่น เพิ่มเสียง, ลดเสียง, ปิดเสียง (mute) หรือเปิดเสียง (unmute)
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h2 id="test">เล่น</h2>
<video id="myid" width="320" height="176" controls onvolumechange="myFunction()">
<source src="/html5/foo.ogg" type="video/ogg" />
<source src="/html5/foo.mp4" type="video/mp4" />
เบราว์เซอร์ของคุณไม่รองรับองค์ประกอบ video
</video>
<script>
function myFunction() {
const video = document.getElementById("myid");
document.getElementById("test").innerHTML =
"เสียง: " + (video.muted ? "ปิด (Muted)" : Math.round(video.volume * 100) + "%");
}
</script>
</body>
</html>
คุณสมบัติที่เกี่ยวข้องของ Media Element
| คุณสมบัติ | คำอธิบาย |
|---|---|
| volume | ระดับเสียง 0.0 - 1.0 |
| muted | true/false - สถานะปิดเสียง |
| defaultMuted | ค่า muted เริ่มต้น |
การประยุกต์ใช้
- บันทึกการตั้งค่าเสียงของผู้ใช้ (localStorage)
- ซิงโครไนซ์ระดับเสียงระหว่างหลายวิดีโอ
- แสดง UI ควบคุมเสียงแบบกำหนดเอง
- Analytics: ติดตามว่าผู้ใช้ดูด้วยเสียงหรือไม่