Phần tử HTML được sử dụng để nhúng nội dung âm thanh trong các tài liệu. Nó có thể chứa một hoặc nhiều nguồn âm thanh, được biểu thị bằng cách sử dụng thuộc tính
src
hoặc phần tử : Trình duyệt sẽ chọn loại phù hợp nhất. Nó cũng có thể là đích đến cho phương tiện truyền thông, sử dụng
0.const elem = document.querySelector["audio"];
elem.audioTrackList.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTrackList.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
HTML element is used to embed sound content in documents. It may contain one or more audio sources, represented using the
src
attribute or the element: the browser will choose the most suitable one. It can also be the
destination for streamed media, using a
0.const elem = document.querySelector["audio"];
elem.audioTrackList.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTrackList.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
Thử nó
Ví dụ trên cho thấy cách sử dụng đơn giản của phần tử . Theo cách tương tự như phần tử
const elem = document.querySelector["audio"];
elem.audioTrackList.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTrackList.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
2, chúng tôi bao gồm một đường dẫn đến phương tiện mà chúng tôi muốn nhúng bên trong thuộc tính src
; Chúng tôi có thể bao gồm các thuộc tính khác để chỉ định thông tin như liệu chúng tôi có muốn nó tự động phát và vòng lặp hay không, liệu chúng tôi có muốn hiển thị các điều khiển âm thanh mặc định của trình duyệt hay không, v.v.Nội dung bên trong các thẻ mở và đóng
const elem = document.querySelector["audio"];
elem.audioTrackList.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTrackList.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
4 được hiển thị dưới dạng dự phòng trong các trình duyệt không hỗ trợ phần tử.
Thuộc tính
Các thuộc tính của yếu tố này bao gồm các thuộc tính toàn cầu.
const elem = document.querySelector["audio"];
elem.audioTrackList.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTrackList.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
5Một thuộc tính Boolean: Nếu được chỉ định, âm thanh sẽ tự động bắt đầu phát lại ngay khi có thể làm như vậy, mà không cần chờ toàn bộ tệp âm thanh để hoàn tất tải xuống.
Lưu ý: Các trang web tự động phát âm thanh [hoặc video có bản nhạc âm thanh] có thể là một trải nghiệm khó chịu cho người dùng, vì vậy nên tránh khi có thể. Nếu bạn phải cung cấp chức năng Autoplay, bạn nên thực hiện chọn tham gia [yêu cầu người dùng cụ thể bật nó]. Tuy nhiên, điều này có thể hữu ích khi tạo các yếu tố phương tiện có nguồn sẽ được đặt sau, dưới sự kiểm soát của người dùng. Xem Hướng dẫn Autoplay của chúng tôi để biết thêm thông tin về cách sử dụng autoplay đúng cách. Sites that automatically play audio [or videos with an audio track] can be an unpleasant experience for users, so should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in [requiring a user to specifically enable it]. However, this can be useful when creating media elements whose source will be set at a later time, under user control. See our autoplay guide for additional information about how to properly use autoplay.
const elem = document.querySelector["audio"];
elem.audioTrackList.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTrackList.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
6Nếu thuộc tính này có mặt, trình duyệt sẽ cung cấp các điều khiển để cho phép người dùng điều khiển phát lại âm thanh, bao gồm âm lượng, tìm kiếm và tạm dừng/tiếp tục phát lại.
const elem = document.querySelector["audio"];
elem.audioTrackList.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTrackList.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
7ExperimentalNon-standard Experimental Non-standardThuộc tính
const elem = document.querySelector["audio"];
elem.audioTrackList.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTrackList.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
7, khi được chỉ định, giúp trình duyệt chọn những điều khiển nào để hiển thị cho phần tử const elem = document.querySelector["audio"];
elem.audioTrackList.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTrackList.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
9 bất cứ khi nào trình duyệt hiển thị bộ điều khiển của riêng mình [nghĩa là khi thuộc tính const elem = document.querySelector["audio"];
elem.audioTrackList.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTrackList.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
6 được chỉ định].Các giá trị được phép là
Download OGG audio.
1,
Download OGG audio.
2 và
Download OGG audio.
3.
Download OGG audio.
4Thuộc tính được liệt kê này cho biết có nên sử dụng CORS để tìm nạp tệp âm thanh liên quan hay không. Tài nguyên hỗ trợ CORS có thể được sử dụng lại trong phần tử
Download OGG audio.
5 mà không bị nhiễm độc. Các giá trị được phép là:
Download OGG audio.
6Gửi một yêu cầu có nguồn gốc chéo mà không cần chứng chỉ. Nói cách khác, nó gửi tiêu đề
Download OGG audio.
7 HTTP mà không cần cookie, chứng chỉ X.509 hoặc thực hiện xác thực cơ bản HTTP. Nếu máy chủ không cung cấp thông tin đăng nhập cho trang web gốc [bằng cách không đặt tiêu đề
Download OGG audio.
8 HTTP], tài nguyên sẽ bị nhiễm độc và việc sử dụng của nó bị hạn chế.
Download OGG audio.
9Gửi một yêu cầu có nguồn gốc chéo với thông tin xác thực. Nói cách khác, nó gửi tiêu đề HTTP
Download OGG audio.
7 với cookie, chứng chỉ hoặc thực hiện xác thực cơ bản HTTP. Nếu máy chủ không cung cấp thông tin đăng nhập cho trang web gốc [thông qua tiêu đề
Download WAV audio.
1 HTTP], tài nguyên sẽ bị nhiễm độc và việc sử dụng nó bị hạn chế.Khi không có, tài nguyên được tìm nạp mà không có yêu cầu CORS [tức là mà không gửi tiêu đề
Download OGG audio.
7 HTTP], ngăn chặn việc sử dụng không bị lỗi trong các yếu tố ____25. Nếu không hợp lệ, nó được xử lý như thể từ khóa được liệt kê ẩn danh được sử dụng. Xem các thuộc tính CASS Cài đặt để biết thêm thông tin.anonymous was used. See
CORS settings attributes for additional information.
Download WAV audio.
4Experimental ExperimentalMột thuộc tính boolean được sử dụng để vô hiệu hóa khả năng phát lại từ xa trong các thiết bị được gắn bằng dây có dây [HDMI, DVI, v.v.] và các công nghệ không dây [Miracast, Chromecast, DLNA, AirPlay, v.v.]. Xem đặc điểm kỹ thuật đề xuất này để biết thêm thông tin.
Download WAV audio.
5Một thuộc tính Boolean: Nếu được chỉ định, trình phát âm thanh sẽ tự động tìm kiếm trở lại bắt đầu khi đạt đến cuối âm thanh.
Download WAV audio.
6Một thuộc tính Boolean cho biết liệu âm thanh ban đầu có bị im lặng hay không. Giá trị mặc định của nó là
Download WAV audio.
7.
Download WAV audio.
8Thuộc tính được liệt kê này nhằm cung cấp một gợi ý cho trình duyệt về những gì tác giả nghĩ sẽ dẫn đến trải nghiệm người dùng tốt nhất. Nó có thể có một trong các giá trị sau:
9: Chỉ ra rằng âm thanh không nên được tải sẵn.Download WAV audio.
0: Chỉ ra rằng chỉ có siêu dữ liệu âm thanh [ví dụ: độ dài] được tìm nạp.
1: Cho biết rằng toàn bộ tệp âm thanh có thể được tải xuống, ngay cả khi người dùng không dự kiến sẽ sử dụng nó.- Chuỗi trống: Một từ đồng nghĩa của giá trị
1.
Giá trị mặc định là khác nhau cho mỗi trình duyệt. Thông số kỹ thuật khuyên nó sẽ được đặt thành
0.Note:
- Thuộc tính
5 được ưu tiên hơnconst elem = document.querySelector["audio"]; elem.audioTrackList.onaddtrack = [event] => { trackEditor.addTrack[event.track]; }; elem.audioTrackList.onremovetrack = [event] => { trackEditor.removeTrack[event.track]; };
8. NếuDownload WAV audio.
5 được chỉ định, trình duyệt rõ ràng sẽ cần bắt đầu tải xuống âm thanh để phát lại.const elem = document.querySelector["audio"]; elem.audioTrackList.onaddtrack = [event] => { trackEditor.addTrack[event.track]; }; elem.audioTrackList.onremovetrack = [event] => { trackEditor.removeTrack[event.track]; };
- Trình duyệt không bị buộc bởi đặc điểm kỹ thuật để tuân theo giá trị của thuộc tính này; Nó chỉ là một gợi ý.
src
URL của âm thanh để nhúng. Điều này phải chịu các điều khiển truy cập HTTP. Đây là tùy chọn; Thay vào đó, bạn có thể sử dụng phần tử trong khối âm thanh để chỉ định âm thanh để nhúng.
Sự kiện
Ghi chú sử dụng
Các trình duyệt không hỗ trợ tất cả các loại tệp và codec âm thanh giống nhau; Bạn có thể cung cấp nhiều nguồn bên trong các yếu tố lồng nhau và sau đó trình duyệt sẽ sử dụng nguồn đầu tiên mà nó hiểu:
Download MP3 or
OGG audio.
Chúng tôi cung cấp một hướng dẫn thực chất và kỹ lưỡng về các loại tệp phương tiện và các codec âm thanh có thể được sử dụng trong đó. Cũng có sẵn là một hướng dẫn cho các codec được hỗ trợ cho video.
Ghi chú sử dụng khác:
- Nếu bạn không chỉ định thuộc tính
6, trình phát âm thanh sẽ không bao gồm các điều khiển mặc định của trình duyệt. Tuy nhiên, bạn có thể tạo các điều khiển tùy chỉnh của riêng mình bằng JavaScript và APIconst elem = document.querySelector["audio"]; elem.audioTrackList.onaddtrack = [event] => { trackEditor.addTrack[event.track]; }; elem.audioTrackList.onremovetrack = [event] => { trackEditor.removeTrack[event.track]; };
1 00:00:00 --> 00:00:45 [Energetic techno music] 2 00:00:46 --> 00:00:51 Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch? 16 00:00:52 --> 00:01:02 [Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?
1. - Để cho phép kiểm soát chính xác nội dung âm thanh của bạn,
1 00:00:00 --> 00:00:45 [Energetic techno music] 2 00:00:46 --> 00:00:51 Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch? 16 00:00:52 --> 00:01:02 [Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?
1S sẽ bắn nhiều sự kiện khác nhau. Điều này cũng cung cấp một cách để giám sát quá trình tìm nạp âm thanh để bạn có thể xem lỗi hoặc phát hiện khi đủ để bắt đầu chơi hoặc thao tác nó. - Bạn cũng có thể sử dụng API API Web Audio để tạo trực tiếp và thao tác các luồng âm thanh từ mã JavaScript thay vì phát trực tuyến các tệp âm thanh đã tồn tại trước.
Các yếu tố không thể có phụ đề hoặc chú thích được liên kết với chúng theo cùng một cách mà các yếu tố
1 00:00:00 --> 00:00:45 [Energetic techno music] 2 00:00:46 --> 00:00:51 Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch? 16 00:00:52 --> 00:01:02 [Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?
4 có thể. Xem WebVTT và Audio của Ian Devlin để biết một số thông tin và cách giải quyết hữu ích.
Một nguồn thông tin chung tốt về việc sử dụng HTML là hướng dẫn của người mới bắt đầu nội dung video và âm thanh.
Kiểu dáng với CSS
Phần tử không có đầu ra trực quan nội tại của riêng mình trừ khi thuộc tính
const elem = document.querySelector["audio"];
elem.audioTrackList.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTrackList.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
6 được chỉ định, trong trường hợp đó, các điều khiển mặc định của trình duyệt được hiển thị.Các điều khiển mặc định có giá trị
1 00:00:00 --> 00:00:45 [Energetic techno music] 2 00:00:46 --> 00:00:51 Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch? 16 00:00:52 --> 00:01:02 [Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?8 là
1 00:00:00 --> 00:00:45 [Energetic techno music] 2 00:00:46 --> 00:00:51 Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch? 16 00:00:52 --> 00:01:02 [Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?9 theo mặc định và thường là một ý tưởng tốt để đặt giá trị thành
Download MP3 or
OGG audio.
0 để cải thiện kiểm soát định vị và bố cục, trừ khi bạn muốn nó nằm trong một khối văn bản hoặc tương tự.Bạn có thể tạo kiểu cho các điều khiển mặc định với các thuộc tính ảnh hưởng đến khối dưới dạng một đơn vị, vì vậy bạn có thể cung cấp cho nó một
Download MP3 or
OGG audio.
1 và
Download MP3 or
OGG audio.
2,
Download MP3 or
OGG audio.
3,
Download MP3 or
OGG audio.
4, v.v. Tuy nhiên, bạn không thể tạo kiểu cho các thành phần riêng lẻ bên trong trình phát âm thanh [ví dụ: Thay đổi kích thước nút hoặc biểu tượng, thay đổi phông chữ, v.v.] và các điều khiển khác nhau trên các trình duyệt khác nhau.Để có được một cái nhìn và cảm nhận nhất quán trên các trình duyệt, bạn sẽ cần tạo các điều khiển tùy chỉnh; Chúng có thể được đánh dấu và tạo kiểu theo bất cứ cách nào bạn muốn, và sau đó JavaScript có thể được sử dụng cùng với API
1 00:00:00 --> 00:00:45 [Energetic techno music] 2 00:00:46 --> 00:00:51 Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch? 16 00:00:52 --> 00:01:02 [Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?1 để tăng chức năng của chúng.
Khái niệm cơ bản về kiểu máy chơi video cung cấp một số kỹ thuật tạo kiểu hữu ích - nó được viết trong bối cảnh
1 00:00:00 --> 00:00:45 [Energetic techno music] 2 00:00:46 --> 00:00:51 Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch? 16 00:00:52 --> 00:01:02 [Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?4, nhưng phần lớn có thể áp dụng như nhau cho
.Phát hiện bổ sung và loại bỏ các bản nhạc
Bạn có thể phát hiện khi các bản nhạc được thêm vào và xóa khỏi phần tử bằng các sự kiện
Download MP3 or
OGG audio.
9 và
0. Tuy nhiên, những sự kiện này không được gửi trực tiếp đến chính phần tử
. Thay vào đó, họ được gửi đến đối tượng danh sách theo dõi trong phần tử 1 00:00:00 --> 00:00:45 [Energetic techno music] 2 00:00:46 --> 00:00:51 Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch? 16 00:00:52 --> 00:01:02 [Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?của
tương ứng với loại bản nhạc được thêm vào phần tử:
4Một 5 chứa tất cả các bản nhạc âm thanh của yếu tố phương tiện. Bạn có thể thêm trình nghe cho
Download MP3 or
OGG audio.
9 vào đối tượng này để được cảnh báo khi các bản nhạc âm thanh mới được thêm vào phần tử.
7Thêm trình nghe
Download MP3 or
OGG audio.
9 vào đối tượng
9 này để được thông báo khi các bản nhạc video được thêm vào phần tử.src
0Thêm trình nghe sự kiện
Download MP3 or
OGG audio.
9 vào src
2 này để được thông báo khi các bản nhạc văn bản mới được thêm vào phần tử.Lưu ý: Mặc dù đó là một yếu tố , nhưng nó vẫn có danh sách theo dõi video và văn bản và trên thực tế có thể được sử dụng để trình bày video, mặc dù ý nghĩa giao diện người dùng có thể là kỳ lạ. Even though it's an
element, it still has video and text track lists, and can in fact be used to present video, although the user interface implications can be odd.
Ví dụ: để phát hiện khi các rãnh âm thanh được thêm hoặc xóa khỏi phần tử , bạn có thể sử dụng mã như thế này:
const elem = document.querySelector["audio"];
elem.audioTrackList.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTrackList.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
Mã này theo dõi các bản nhạc âm thanh được thêm và xóa khỏi phần tử và gọi chức năng giả thuyết trên trình chỉnh sửa theo dõi để đăng ký và xóa bản nhạc khỏi danh sách các bản nhạc có sẵn của trình soạn thảo.
Bạn cũng có thể sử dụng src
5 để nghe các sự kiện
Download MP3 or
OGG audio.
9 và
0.Ví dụ
Cách sử dụng cơ bản
Ví dụ sau đây cho thấy cách sử dụng đơn giản của phần tử để phát tệp OGG. Nó sẽ tự động phát do thuộc tính
const elem = document.querySelector["audio"];
elem.audioTrackList.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTrackList.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
5 nếu trang có quyền làm như vậy và cũng bao gồm nội dung dự phòng.
Download OGG audio.
Để biết chi tiết về thời điểm autoplay hoạt động, làm thế nào để có quyền sử dụng autoplay và cách thức và thời điểm phù hợp để sử dụng autoplay, hãy xem hướng dẫn tự động phát của chúng tôi.
phần tử với phần tử
Ví dụ này chỉ định bản nhạc âm thanh nào được nhúng bằng cách sử dụng thuộc tính src
trên phần tử lồng nhau thay vì trực tiếp vào phần tử
. Luôn luôn hữu ích khi bao gồm loại MIME của tệp bên trong thuộc tính
3, vì trình duyệt có thể biết ngay lập tức nếu nó có thể phát tệp đó và không lãng phí thời gian cho nó nếu không.
Download WAV audio.
với nhiều yếu tố
Ví dụ này bao gồm nhiều yếu tố . Trình duyệt cố gắng tải phần tử nguồn đầu tiên [opus] nếu nó có thể chơi nó; Nếu không, nó trở lại lần thứ hai [Vorbis] và cuối cùng trở lại mp3:
Mối quan tâm tiếp cận
Âm thanh với hộp thoại bằng nói sẽ cung cấp cả chú thích và bảng điểm mô tả chính xác nội dung của nó. Chú thích, được chỉ định bằng WebVTT, cho phép những người đang bị mất thính giác để hiểu nội dung của bản ghi âm khi bản ghi đang được phát, trong khi bảng điểm cho phép những người cần thêm thời gian để có thể xem lại nội dung của bản ghi theo tốc độ và định dạng mà thoải mái cho họ.
Nếu các dịch vụ chú thích tự động được sử dụng, điều quan trọng là phải xem xét nội dung được tạo để đảm bảo nó thể hiện chính xác âm thanh nguồn.
Phần tử không trực tiếp hỗ trợ WebVTT. Bạn sẽ phải tìm một thư viện hoặc khung cung cấp khả năng cho bạn hoặc viết mã để hiển thị chú thích. Một tùy chọn là phát âm thanh của bạn bằng phần tử
1 00:00:00 --> 00:00:45 [Energetic techno music] 2 00:00:46 --> 00:00:51 Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch? 16 00:00:52 --> 00:01:02 [Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?4, hỗ trợ WebVTT.
Ngoài hộp thoại nói, phụ đề và bảng điểm cũng nên xác định các hiệu ứng âm nhạc và âm thanh truyền đạt thông tin quan trọng. Điều này bao gồm cảm xúc và giai điệu. Ví dụ, trong WebVTT bên dưới, lưu ý việc sử dụng dấu ngoặc vuông để cung cấp sự hiểu biết về âm thanh và cảm xúc cho người xem; Điều này có thể giúp thiết lập tâm trạng được cung cấp bằng cách sử dụng âm nhạc, âm thanh phi ngôn ngữ và hiệu ứng âm thanh quan trọng, v.v.
1 00:00:00 --> 00:00:45 [Energetic techno music] 2 00:00:46 --> 00:00:51 Welcome to the Time Keeper's podcast! In this episode we're discussing which Swisswatch is a wrist switchwatch? 16 00:00:52 --> 00:01:02 [Laughing] Sorry! I mean, which wristwatch is a Swiss wristwatch?
Ngoài ra, đó là một thực tiễn tốt để cung cấp một số nội dung [chẳng hạn như liên kết tải xuống trực tiếp] như một dự phòng cho người xem sử dụng trình duyệt trong đó phần tử không được hỗ trợ:
Download MP3 or
OGG audio.
- Định dạng theo dõi văn bản video Web [WebVTT]
- Webaim: chú thích, bảng điểm và mô tả âm thanh
- MDN Hiểu WCAG, Hướng dẫn 1.2 Giải thích
- Hiểu tiêu chí thành công 1.2.1 | W3C Hiểu WCAG 2.0
- Hiểu tiêu chí thành công 1.2.2 | W3C Hiểu WCAG 2.0
Tóm tắt kỹ thuật
Thông số kỹ thuật
Tiêu chuẩn HTML # Phần tử Audio # the-audio-element |
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt