Tiết lộ. Hỗ trợ của bạn giúp giữ cho trang web hoạt động. Chúng tôi kiếm được phí giới thiệu cho một số dịch vụ chúng tôi đề xuất trên trang này. Tìm hiểu thêm
Thuộc tính của phần tử HTML âm thanh mới. Làm chủ nó ngay bây giờ với ví dụ mã của chúng tôi.
6 làm gì? Chuyển đổi hiển thị các điều khiển phát lại âm thanhnội dung
- 1 Ví dụ về mã
- 1. 1 Có điều khiển
- 1. 2 Không có điều khiển
- 2 Đề xuất sử dụng
Mã ví dụ
With Controls
You will see this text if native audio playback is not supported.
Audio by Beeld en Geluid [CC BY-SA 3.0], via Wikimedia Commons
Without Controls
You will see this text if native audio playback is not supported.
Audio by JCZA [CC BY-SA 3.0] , via Wikimedia Commons
.audio-example {
display: block;
}
có điều khiển
Bạn sẽ thấy văn bản này nếu tính năng phát lại âm thanh gốc không được hỗ trợ. Âm thanh của Beeld en Geluid [CC BY-SA 3. 0], qua Wikimedia Commonskhông có điều khiển
Bạn sẽ thấy văn bản này nếu tính năng phát lại âm thanh gốc không được hỗ trợ. Âm thanh của JCZA [CC BY-SA 3. 0], thông qua Wikimedia CommonsĐề xuất sử dụng
Trong hầu hết các trường hợp bình thường, việc bao gồm thuộc tính
7 là điều hiển nhiên. Trường hợp ngoại lệ này có thể xảy ra nếu bạn định tạo bảng điều khiển phát lại của riêng mình bằng JavaScript. Người dùng của bạn sẽ cực kỳ thiếu cân nhắc khi sử dụng thuộc tính
8 trong khi loại trừ thuộc tính
7 Kiếm thu nhập với kỹ năng HTML của bạn
Đăng ký và chúng tôi sẽ gửi cho bạn những cơ hội làm việc tự do tốt nhất ngay trong hộp thư đến của bạn.
Chúng tôi đang xây dựng thị trường việc làm tự do lớn nhất dành cho những người như bạn.
Cực kỳ đơn giản để thêm và phát các tệp âm thanh trên trang web của bạn. Không còn phiền phức với việc nhúng tệp Flash hay bất cứ cách nào cũ nữa 😂 Đơn giản hóa và phát triển với thẻ HTML5
6, yay 🎉
Your browser does not support the audio tag.
# Thuộc tính
8Đây là một thuộc tính boolean chỉ định có hay không hiển thị các điều khiển âm thanh [tức là. nút bắt đầu/tạm dừng, cuộn, âm lượng]
Ghi chú. Nếu thiếu, tệp âm thanh sẽ không được hiển thị. Thông thường, bạn phải luôn bao gồm điều này. Trừ khi bạn muốn tạo bảng điều khiển của riêng mình bằng JavaScript
9Đây là thuộc tính boolean tự động phát tệp âm thanh sau khi tải trang
Ghi chú. tính năng này có thể không hoạt động do thay đổi chính sách tự động phát của Chrome
0Đây là một thuộc tính boolean chỉ định liệu âm thanh ban đầu có bị tắt tiếng hay không. Giá trị mặc định là
1 hoặc không bị tắt tiếng
2Đây là một thuộc tính boolean xác định xem tệp âm thanh có lặp lại liên tục từ đầu sau khi phát xong hay không
1
3Thuộc tính này được sử dụng để chỉ định cách tải âm thanh khi tải trang. Đó là cách bạn giao tiếp với trình duyệt xem nó có nên tải xuống và lưu trữ tệp âm thanh hay không
3Trình duyệt không nên tải âm thanh khi tải trang. Hữu ích nếu bạn muốn giảm thiểu lưu lượng truy cập không cần thiết và khi người dùng không muốn sử dụng tài nguyên phương tiện ngay lập tức
4Trình duyệt chỉ nên tải siêu dữ liệu khi tải trang. Một lần nữa, điều này được sử dụng khi người dùng không cần tài nguyên phương tiện ngay lập tức. Siêu dữ liệu mà bạn có thể tìm nạp có thể bao gồm độ dài âm thanh, danh sách bản nhạc, kích thước. vân vân
5Trình duyệt sẽ tải toàn bộ âm thanh khi tải trang
Lưu ý rằng đôi khi thuộc tính này có thể bị bỏ qua trong một số trường hợp nhất định [tức là. khi có mặt
3]# Nguồn âm thanh đơn
Bạn có thể đặt
6 với một nguồn duy nhất bằng thuộc tính
6
9Bạn cũng có thể làm điều đó thông qua thẻ
7
Your browser does not support the audio tag.
1# Nhiều nguồn âm thanh
Tệp âm thanh
8 có chất lượng âm thanh tốt hơn và kích thước tệp thấp hơn so với tệp
9. Thật không may, nó không được hỗ trợ bởi tất cả các trình duyệt. May mắn thay, chúng tôi có thể chuyển nhiều nguồn trong thẻ
0. Do đó làm nó như thế này
Your browser does not support the audio tag.
Nó đi từ trên xuống. Đó là lý do tại sao chúng tôi liệt kê
8 đầu tiên và chúng tôi thêm văn bản mặc định nếu trình duyệt không hỗ trợ thẻ
0Bạn có thể xem thêm hỗ trợ âm thanh từ w3schools
# Các yếu tố âm thanh tạo kiểu CSS
Bạn không thể định kiểu các thành phần riêng lẻ của trình phát âm thanh, chẳng hạn như kích thước nút hoặc biểu tượng hoặc kiểu phông chữ. Nó sẽ lấy mặc định của trình duyệt cụ thể. Nhưng bạn có thể tạo kiểu cho đơn vị trình phát bên ngoài
1# Sự kiện âm thanh JavaScript
Có rất nhiều sự kiện bạn có thể nghe trên tệp âm thanh. Ví dụ
Sự kiện Được kích hoạt khi
3Khi âm thanh bắt đầu phát
4Khi âm thanh bị tạm dừng
5Khi âm thanh hoàn thànhBạn có thể tìm thấy danh sách sự kiện đầy đủ trên MDN
# Cách sử dụng cơ bản
Bạn có thể thêm một trình lắng nghe sự kiện như thế này
2Ngoài ra, bạn cũng có thể thêm sự kiện bằng các thuộc tính sự kiện như thế này
3
4Về cơ bản, cú pháp cho các thuộc tính sự kiện là như thế này
5# Hỗ trợ trình duyệt
Hỗ trợ tuyệt vời cho tất cả các trình duyệt hiện đại, bao gồm cả Internet Explorer 9 trở lên 👍
Khả năng tương thích của Trình duyệt MDN
# Đầu vào của cộng đồng
@iamjaydeep1. Tự động phát là gì và vấn đề với nó là gì? . Khi người dùng mở một trang web và nhận được âm thanh mà họ không mong đợi hoặc không muốn, họ có trải nghiệm người dùng kém. Trải nghiệm người dùng kém này là vấn đề chúng tôi đang cố gắng giải quyết. Tiếng ồn không mong muốn là lý do chính khiến người dùng không muốn trình duyệt của họ tự động phát nội dung. Để khắc phục sự cố với tính năng tự động phát, chrome đã thực hiện một số thay đổi về chính sách. theo liên kết để biết thêm chi tiết. Giải pháp là gì? . bạn phải cần sự tương tác của người dùng để phát âm thanh như nhấp vào nút để phát hoặc tạm dừng
@MrBenJ5. Tôi đã tạo một thư viện cho phép bạn tạo trực quan hóa âm thanh từ thẻ âm thanh của mình. Nó cũng là mã nguồn mở. kiểm tra xem. thính giác. dâng trào. sh