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.
Thẻ tạo trình phát âm thanh trên trang web
Nó hỗ trợ các điều khiển phương tiện, như phát, tạm dừng, âm lượng và tắt tiếng
Người chơi có điều khiển. phát, tạm dừng, âm lượng, v.v.
Hãy thử trực tiếpGhi chú. Theo mặc định, trình phát không có hình ảnh đại diện và ẩn. Thêm thuộc tính điều khiển làm cho nó xuất hiện (i. e. dễ thấy)
Thẻ tham chiếu một hoặc nhiều tệp âm thanh có thuộc tính src hoặc phần tử
Trình duyệt sẽ chọn tệp đầu tiên có định dạng tệp mà nó hỗ trợ
Các định dạng tệp âm thanh được hỗ trợ bao gồm MP3, WAV và OGG
Một thẻ chỉ định hai tệp âm thanh.
Trình duyệt sử dụng loại tệp đầu tiên mà nó hỗ trợ.
Trình duyệt của bạn không hỗ trợ yếu tố âm thanh
Your browser does not support audio element. Thử trực tiếpGiải thích mã
- - xác định một yếu tố âm thanh
- điều khiển - cho phép điều khiển âm thanh. phát, tạm dừng, âm lượng, tắt tiếng và tải xuống
- - xác định nguồn tệp âm thanh
- src - URL hoặc tên tệp của âm thanh để phát
- loại - định dạng tệp của âm thanh
Ghi chú. Đối với nhiều nguồn, loại tệp được hỗ trợ đầu tiên sẽ phát
Bảng này liệt kê các thuộc tính thẻ
Thuộc tính Giá trị được chấp nhậnMô tảđiều khiểnkhông có giá trịBật điều khiển âm thanh như phát/tạm dừng, âm lượng và các điều khiển khác. srcURLURL tệp âm thanh / đường dẫn. id số nhận dạngXác định số nhận dạng duy nhất cho âm thanh. class classnamesĐặt một hoặc nhiều lớp CSS được áp dụng cho âm thanh. style CSS-stylesĐặt kiểu cho âm thanh. data-* valueXác định dữ liệu bổ sung mà JavaScript có thể sử dụng.
hidden hiddenChỉ định âm thanh có bị ẩn hay không. title giá trịĐặt tiêu đề hiển thị dưới dạng chú giải công cụ. autoplayno valueCho trình duyệt biết rằng âm thanh sẽ bắt đầu phát ngay lập tứcloopno valueChỉ định rằng âm thanh được lặp lại mỗi khi nó hoàn thànhmutedno valueCho trình duyệt biết rằng âm thanh phải được tắt tiếng (im lặng). preloadauto
siêu dữ liệu
noneChỉ định cách tệp âm thanh được tải sau khi trang đã được tảicrossoriginanonymous
use-credentialsChỉ định cách xử lý yêu cầu crossorigin.
Để biết các thuộc tính toàn cầu bổ sung, hãy xem danh sách thuộc tính toàn cầu của chúng tôi
Bảng này liệt kê các định dạng âm thanh mà mỗi trình duyệt hỗ trợ
Trình duyệtMP3WAVOGG
Các loại phương tiện cho tệp âm thanh
Đây là các loại phương tiện cho từng định dạng tệp âm thanh
FormatMedia-typeMP3audio/mpegOGGaudio/oggWAVaudio/wav
Thẻ có thuộc tính vòng lặp.
Tệp âm thanh sẽ phát lặp lại.
Thẻ có thuộc tính tắt tiếng.
Thuộc tính này tắt tiếng (im lặng) âm thanh. Nó chơi nhưng không có âm thanh.
Phần tử hiển thị một DOM (Mô hình đối tượng tài liệu).
Điều này cho phép JavaScript kiểm soát âm thanh theo chương trình.
Các nút phát và tạm dừng một ẩn bằng JavaScript
Vui lòng nâng cấp trình duyệt của bạn để phát âm thanh. Tạm dừng chơi
Please upgrade your browser to play audio. Play Pause Thử trực tiếpPhát phần tử âm thanh trong bộ nhớ
JavaScript có thể tạo phần tử âm thanh trong bộ nhớ và sau đó phát tệp âm thanh
Nhấp vào nút phát và JavaScript sẽ phát tệp âm thanh -- tất cả đều không có thẻ
Play Thử trực tiếpThẻ là một phần của nhóm thẻ tạo trải nghiệm đa phương tiện trên web. Nhóm này được gọi là nhóm thẻ Media. Cùng với nhau, chúng cho phép bạn tạo ra các giải pháp đa phương tiện mạnh mẽ
HTML5 Âm thanh là một chủ đề của đặc tả HTML5, kết hợp đầu vào âm thanh, phát lại và tổng hợp, cũng như chuyển lời nói thành văn bản, trong trình duyệt
yếu tố[sửa]
Phần tử đại diện cho âm thanh hoặc luồng âm thanh. [1] Nó thường được sử dụng để phát lại một tệp âm thanh trong một trang web, hiển thị tiện ích GUI với các điều khiển phát/tạm dừng/âm lượng
Phần tử có các thuộc tính này
- thuộc tính chung (khóa truy cập; lớp; nội dung có thể chỉnh sửa; menu ngữ cảnh; thư mục; có thể kéo; vùng thả xuống; ẩn; id; lang; kiểm tra chính tả; kiểu; chỉ mục tab; tiêu đề; dịch)
- autoplay = "autoplay" hoặc "" (chuỗi trống) hoặc trống
Hướng dẫn Tác nhân người dùng tự động bắt đầu phát lại luồng âm thanh ngay khi có thể mà không dừng. - preload = "none" hoặc "metadata" hoặc "auto" hoặc "" (chuỗi trống) hoặc trống
Trình bày một gợi ý cho Tác nhân người dùng về việc liệu việc tải xuống của .- "không ai". Gợi ý cho Tác nhân người dùng rằng người dùng không cần luồng âm thanh hoặc giảm thiểu lưu lượng không cần thiết là mong muốn
- "metadata". Gợi ý cho Tác nhân người dùng rằng người dùng không cần luồng âm thanh, nhưng việc tìm nạp siêu dữ liệu của nó (thời lượng, v.v.) là điều mong muốn
- "tự động". Gợi ý cho Tác nhân người dùng rằng tải xuống toàn bộ luồng âm thanh một cách lạc quan được coi là mong muốn
- controls = "controls" hoặc "" (chuỗi trống) hoặc trống
Hướng dẫn Tác nhân người dùng hiển thị giao diện người dùng để kiểm soát phát lại luồng âm thanh. - loop = "loop" hoặc "" (chuỗi trống) hoặc trống
Hướng dẫn Tác nhân người dùng tìm lại phần đầu của luồng âm thanh khi đến phần cuối. - mediagroup = string
Hướng dẫn Tác nhân người dùng liên kết nhiều video và/hoặc luồng âm thanh với nhau. - muted = "muted" or "" (chuỗi trống) hoặc trống
Thể hiện trạng thái mặc định của luồng âm thanh, có khả năng ghi đè tùy chọn của người dùng. - src = non-empty [URL] có khả năng bị bao quanh bởi khoảng trắng
URL cho luồng âm thanh.
Ví dụ. [2]
Your user agent does not support the HTML5 Audio element.
Các trình duyệt hỗ trợ[sửa]
Trên PC
Trên thiết bị di động
Các định dạng mã hóa âm thanh được hỗ trợ[sửa | sửa mã nguồn]
Việc áp dụng âm thanh HTML5, cũng như với video HTML5, đã trở nên phân cực giữa những người ủng hộ định dạng miễn phí và định dạng bị cản trở bằng sáng chế. Vào năm 2007, khuyến nghị sử dụng Vorbis đã bị W3C rút lại khỏi đặc điểm kỹ thuật cùng với khuyến nghị sử dụng Ogg Theora, với lý do thiếu định dạng được tất cả các nhà cung cấp trình duyệt lớn chấp nhận.
Apple và Microsoft hỗ trợ các định dạng AAC do ISO/IEC xác định và MP3 cũ hơn. Mozilla và Opera hỗ trợ định dạng Vorbis miễn phí và mở, miễn phí bản quyền trong các bộ chứa Ogg và WebM, đồng thời chỉ trích bản chất vướng mắc bằng sáng chế của MP3 và AAC, vốn được đảm bảo là “không miễn phí”. Google cho đến nay đã cung cấp hỗ trợ cho tất cả các định dạng phổ biến
Hầu hết các tệp AAC có độ dài hữu hạn được gói trong bộ chứa MPEG-4 (. mp4,. m4a), được hỗ trợ nguyên bản trong Internet Explorer, Safari và Chrome và được HĐH hỗ trợ trong Firefox và Opera. [4] Hầu hết các luồng trực tiếp AAC có thời lượng vô hạn đều được bao bọc trong bộ chứa Luồng truyền tải dữ liệu âm thanh (. aac,. adts), được Chrome, Safari, Firefox và Edge hỗ trợ. [5][6][7]
Nhiều trình duyệt cũng hỗ trợ âm thanh PCM không nén trong bộ chứa WAVE. [số 8]
Vào năm 2012, định dạng Opus miễn phí và miễn phí bản quyền đã được IETF phát hành và chuẩn hóa. Nó được hỗ trợ bởi Mozilla, Google, Opera và Edge. [8][9][10][11]
Bảng này ghi lại sự hỗ trợ hiện tại cho các định dạng mã hóa âm thanh theo phần tử
Đặc tả Web Audio API do W3C phát triển mô tả API JavaScript cấp cao để xử lý và tổng hợp âm thanh trong các ứng dụng web. Mô hình chính là biểu đồ định tuyến âm thanh, trong đó một số đối tượng AudioNode được kết nối với nhau để xác định kết xuất âm thanh tổng thể. Quá trình xử lý thực tế sẽ chủ yếu diễn ra trong quá trình triển khai cơ bản (mã Hợp ngữ/C/C++ thường được tối ưu hóa), nhưng quá trình tổng hợp và xử lý JavaScript trực tiếp cũng được hỗ trợ. [24]
Trình duyệt Firefox của Mozilla triển khai tiện ích mở rộng API Dữ liệu Âm thanh tương tự kể từ phiên bản 4, được triển khai vào năm 2010 [25] và được phát hành vào năm 2011, nhưng Mozilla cảnh báo rằng tiện ích mở rộng này không chuẩn và không được dùng nữa, đồng thời đề xuất API Web Audio thay thế. [26] Một số thư viện tổng hợp và xử lý âm thanh JavaScript như Audiolet Lưu trữ 2013-01-28 tại Wayback Machine hỗ trợ cả hai API
Nhóm làm việc về âm thanh của W3C cũng đang xem xét đặc tả API Xử lý MediaStream do Mozilla phát triển. [27] Ngoài trộn và xử lý âm thanh, nó còn bao gồm truyền phát đa phương tiện tổng quát hơn, bao gồm đồng bộ hóa với các phần tử HTML, ghi lại các luồng âm thanh và video cũng như định tuyến ngang hàng của các luồng phương tiện đó. [28]
Các trình duyệt hỗ trợ[sửa]
Trên PC
Trên thiết bị di động
- Google Chrome dành cho Android 28 (Được bật theo mặc định từ 29) và Apple iPad
- Safari 6 (Có hạn chế sử dụng (Tắt tiếng trừ khi người dùng gọi))
- Firefox 23 (Được bật theo mặc định từ 25)
- tizen
Web Speech API[sửa]
Web Speech API nhằm mục đích cung cấp một phương thức nhập thay thế cho các ứng dụng web (không sử dụng bàn phím). Với API này, các nhà phát triển có thể cung cấp cho các ứng dụng web khả năng chuyển giọng nói thành văn bản, từ micrô của máy tính. Âm thanh đã ghi được gửi đến máy chủ giọng nói để phiên âm, sau đó văn bản được nhập cho người dùng. Bản thân API không thể biết được việc triển khai nhận dạng giọng nói cơ bản và có thể hỗ trợ cả trình nhận dạng dựa trên máy chủ cũng như trình nhận dạng được nhúng. [31] Nhóm HTML Speech Incubator đã đề xuất triển khai công nghệ âm thanh-lời nói trong các trình duyệt dưới dạng các API đa nền tảng, thống nhất. API chứa cả hai. [32]
- API đầu vào giọng nói
- API chuyển văn bản thành giọng nói
Google đã tích hợp tính năng này vào Google Chrome vào tháng 3 năm 2011. [33] Cho phép người dùng tìm kiếm trên web bằng giọng nói của họ bằng mã như