Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

เหตุการณ์ onvolumechange: รันสคริปตเมื่อปรับระดับเสียงสื่อ

เหตุการณ์ 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: ติดตามว่าผู้ใช้ดูด้วยเสียงหรือไม่