Các ' tắt tiếng Thuộc tính ” cho phép các nhà phát triển kiểm soát việc phát lại âm thanh bằng cách cung cấp cho họ tùy chọn tắt hoặc bật âm thanh theo nhu cầu của họ. Cung cấp cho người dùng cuối quyền tự do tắt hoặc bật âm thanh sẽ nâng cao trải nghiệm duyệt web của họ. Ngoài ra, việc sử dụng JavaScript cho phép điều khiển động giúp kiểm soát tốt hơn việc phát lại âm thanh.
Bài viết này sẽ mô tả cách sử dụng thuộc tính tắt tiếng âm thanh HTML DOM bằng JavaScript.
Làm cách nào để sử dụng thuộc tính tắt tiếng âm thanh HTML DOM trong JavaScript?
Các ' tắt tiếng Thuộc tính ” thường được sử dụng để tắt hoặc bật âm thanh trên trang web. Khi giá trị của “ âm thanh.muted ” thuộc tính được đặt là “ ĐÚNG VẬY ”, âm thanh sẽ bị tắt tiếng và để bật tiếng, biểu tượng “ tắt tiếng ” thuộc tính cần được đặt là “ SAI ”. Ngoài ra, thuộc tính tắt tiếng còn tích hợp với các điều khiển phương tiện khác và cho phép tương thích giữa nhiều trình duyệt.
Cú pháp
Cú pháp cho thuộc tính tắt tiếng âm thanh HTML DOM trong JavaScript được nêu bên dưới:
đã chọnObj.muted = ĐÚNG VẬY | SAI
Ở đâu ' đã chọnObj ” là bất kỳ tệp âm thanh nào có âm thanh sắp bị tắt tiếng. Thuộc tính này chỉ có thể lưu trữ hai giá trị: “ ĐÚNG VẬY ' hoặc ' SAI ”. Nếu thuộc tính này được đặt thành true thì tệp âm thanh sẽ bị tắt tiếng và ngược lại.
Bây giờ, hãy xem qua một số ví dụ để hiểu rõ hơn về HTML DOM “ tắt tiếng ' tài sản.
Ví dụ 1: Tắt tiếng tệp âm thanh
Trong ví dụ này, tệp đã chọn sẽ bị tắt tiếng bằng cách sử dụng “ tắt tiếng ' tài sản. Ví dụ: hãy truy cập khối mã bên dưới:
< div >< h2 phong cách = 'màu: xanh nước biển;' > Thuộc tính tắt tiếng âm thanh DOM h2 >< anh >
< âm thanh nhận dạng = 'demoÂm thanh' điều khiển >
< nguồn src = 'âm thanh.mp3' kiểu = 'âm thanh/mpeg' >
âm thanh >
< anh >
< cái nút trong một cái nhấp chuột = 'tắt tiếngSetter()' > Đặt thành Tắt tiếng cái nút >
div >
< kịch bản >
cho phép c = document.getElementById ( 'demoÂm thanh' ) ;
chức năng người tắt tiếng ( ) {
c.muted = ĐÚNG VẬY ;
báo động ( 'Tắt tiếng thành công!' )
}
kịch bản >
Giải thích về mã:
-
- Đầu tiên là cha mẹ “ div ” phần tử được tạo có chứa “ <âm thanh> ” thẻ có id là “ bản demoÂm thanh ”. Phần tử này chứa một đơn “ nguồn Phần tử ” chứa địa chỉ của tệp âm thanh đã chọn cùng với loại của nó.
- Tiếp theo, nút được tạo sẽ gọi “ tắt tiếngSetter() ” chức năng sử dụng “ trong một cái nhấp chuột ” người nghe sự kiện.
- Sau đó, nhập vào “
” gắn thẻ và lưu trữ tham chiếu của phần tử “âm thanh” trong một biến có tên “ c ”. - Sau đó, “ tắt tiếngSetter() ” được tạo để đặt giá trị cho “ tắt tiếng ” tài sản cho “ ĐÚNG VẬY ”. Thao tác này sẽ đặt âm thanh ở chế độ tắt tiếng và cũng hiển thị thông báo tương ứng trong hộp cảnh báo.
Sau khi biên soạn:
Ảnh gif ở trên cho thấy âm thanh đã bị tắt tiếng bằng thuộc tính tắt tiếng.
Ví dụ: Tắt tiếng và bật tiếng âm thanh bằng thuộc tính bị tắt tiếng
Trong ví dụ này, tệp âm thanh đã chọn sẽ bị tắt tiếng, không bị tắt tiếng và trạng thái hiện tại của nó sẽ được truy xuất bằng cách sử dụng “ tắt tiếng ' tài sản. Ví dụ: hãy truy cập mã dưới đây:
< div >< âm thanh nhận dạng = 'demoÂm thanh' điều khiển >
< nguồn src = 'âm thanh.mp3' kiểu = 'âm thanh/mpeg' >
âm thanh >< anh >
< cái nút trong một cái nhấp chuột = 'Tắt tiếng()' > Tắt tiếng cái nút >
< cái nút trong một cái nhấp chuột = 'bỏ tắt tiếng()' > Bật tiếng âm thanh cái nút >
< cái nút trong một cái nhấp chuột = 'trạng thái tắt tiếng()' > Trạng thái tắt tiếng cái nút >
div >
< kịch bản >
var z = document.getElementById ( 'demoÂm thanh' ) ;
chức năng Tắt tiếng ( ) {
z.muted = ĐÚNG VẬY ;
}
chức năng tắt tiếng ( ) {
z.muted = SAI ;
}
chức năng trạng thái tắt tiếng ( ) {
báo động ( z.muted ) ;
}
kịch bản >
Giải thích đoạn code trên như sau:
-
- Đầu tiên, tệp âm thanh được chèn vào trang web bằng cách sử dụng HTML “ <âm thanh> ' Và '
thẻ ”. - Sau đó, ba nút được tạo để gọi các hàm có tên “ Tắt tiếng() ”, “ tắt tiếng() ', Và ' tắt tiếngStatus() ”. Các chức năng này được gọi khi người dùng nhấp vào nút tương ứng.
- Tiếp theo, xác định các hàm này bằng cách đặt giá trị true và false cho “ Tắt tiếng() ' Và ' tắt tiếng() ' chức năng. Cho ' tắt tiếngStatus() ”, chỉ đính kèm chức năng “ tắt tiếng ” với tham chiếu âm thanh để truy xuất trạng thái hiện tại của thuộc tính tắt tiếng.
- Đầu tiên, tệp âm thanh được chèn vào trang web bằng cách sử dụng HTML “ <âm thanh> ' Và '
Sau khi biên dịch, kết quả sẽ như sau:
Đầu ra cho thấy tệp âm thanh đang bị tắt tiếng, không bị tắt tiếng và trạng thái của nó cũng đang được kiểm tra bằng cách sử dụng nút “ tắt tiếng ' tài sản.
Phần kết luận
Thuộc tính tắt tiếng âm thanh HTML DOM được sử dụng bằng cách trước tiên chèn tệp âm thanh trên trang web bằng cách sử dụng HTML “ âm thanh ' Và ' nguồn “các phần tử. Sau đó, tham chiếu đến âm thanh này được lưu trữ trong một biến bên trong mã JavaScript và “ tắt tiếng ” tài sản gắn liền với nó. Để tắt âm thanh, thuộc tính này được đặt thành “ ĐÚNG VẬY ' Và ' SAI ” để bật tiếng các tình huống. Blog này đã trình bày quy trình làm việc của thuộc tính tắt tiếng âm thanh DOM.