Điều khiển âm thanh không hoạt động html

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.
<audio controls>audio>

<audio controls="true">audio>
6 làm gì? Chuyển đổi hiển thị các điều khiển phát lại âm thanh

nộ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

Audio by Beeld en Geluid [CC BY-SA 3.0], via Wikimedia Commons

Without Controls

Audio by JCZA [CC BY-SA 3.0] , via Wikimedia Commons

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 Commons

khô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

<audio controls>audio>

<audio controls="true">audio>
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
<audio controls>audio>

<audio controls="true">audio>
8 trong khi loại trừ thuộc tính
<audio controls>audio>

<audio controls="true">audio>
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

<audio controls>audio>

<audio controls="true">audio>
6, yay 🎉

<audio controls>
  <source src="sound.ogg" type="audio/ogg" />
  <source src="sound.mp3" type="audio/mpeg" />
  Your browser does not support the audio tag.
audio>

# Thuộc tính

<audio controls>audio>

<audio controls="true">audio>
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)

<audio controls>audio>

<audio controls="true">audio>

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

<audio controls>audio>

<audio controls="true">audio>
9

Đây là thuộc tính boolean tự động phát tệp âm thanh sau khi tải trang

<audio autoplay>audio>

<audio autoplay="true">audio>

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

<audio autoplay>audio>

<audio autoplay="true">audio>
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à

<audio autoplay>audio>

<audio autoplay="true">audio>
1 hoặc không bị tắt tiếng

<audio muted>audio>

<audio muted="true">audio>

<audio autoplay>audio>

<audio autoplay="true">audio>
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

<audio controls>audio>

<audio controls="true">audio>
1

<audio autoplay>audio>

<audio autoplay="true">audio>
3

Thuộ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

<audio controls>audio>

<audio controls="true">audio>
3

Trì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

<audio controls>audio>

<audio controls="true">audio>
4

Trì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

<audio controls>audio>

<audio controls="true">audio>
5

Trì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

<audio autoplay>audio>

<audio autoplay="true">audio>
3)

# Nguồn âm thanh đơn

Bạn có thể đặt

<audio controls>audio>

<audio controls="true">audio>
6 với một nguồn duy nhất bằng thuộc tính
<audio autoplay>audio>

<audio autoplay="true">audio>
6

<audio controls>audio>

<audio controls="true">audio>
9

Bạn cũng có thể làm điều đó thông qua thẻ

<audio autoplay>audio>

<audio autoplay="true">audio>
7

<audio controls>
  <source src="sound.ogg" type="audio/ogg" />
  <source src="sound.mp3" type="audio/mpeg" />
  Your browser does not support the audio tag.
audio>
1

# Nhiều nguồn âm thanh

Tệp âm thanh

<audio autoplay>audio>

<audio autoplay="true">audio>
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
<audio autoplay>audio>

<audio autoplay="true">audio>
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ẻ
<audio muted>audio>

<audio muted="true">audio>
0. Do đó làm nó như thế này

<audio controls>
  <source src="sound.ogg" type="audio/ogg" />
  <source src="sound.mp3" type="audio/mpeg" />
  Your browser does not support the audio tag.
audio>

Nó đi từ trên xuống. Đó là lý do tại sao chúng tôi liệt kê

<audio autoplay>audio>

<audio autoplay="true">audio>
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ẻ
<audio muted>audio>

<audio muted="true">audio>
0

Bạ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

<audio controls>audio>

<audio controls="true">audio>
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
<audio muted>audio>

<audio muted="true">audio>
3Khi âm thanh bắt đầu phát
<audio muted>audio>

<audio muted="true">audio>
4Khi âm thanh bị tạm dừng
<audio muted>audio>

<audio muted="true">audio>
5Khi âm thanh hoàn thành

Bạ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

<audio controls>audio>

<audio controls="true">audio>
2

Ngoà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

<audio controls>audio>

<audio controls="true">audio>
3

<audio controls>audio>

<audio controls="true">audio>
4

Về cơ bản, cú pháp cho các thuộc tính sự kiện là như thế này

<audio controls>audio>

<audio controls="true">audio>
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

Tại sao âm thanh không hoạt động trong HTML?

Tại sao âm thanh không hoạt động trong HTML? . Hoặc đây có thể là sự cố về tên tệp. Một số trình duyệt web sẽ không phát các tệp âm thanh trừ khi được tải lên khu vực lưu trữ. This could be caused by your mp3 sample rate or a quality setting. Or this could be a file name problem. Some web browsers will not play sound files unless uploaded to a hosting area.

Thẻ âm thanh có thể hoạt động mà không có thuộc tính điều khiển không?

Nếu bạn không chỉ định thuộc tính điều khiển, 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à API HTMLMediaElement.

HTML5 có hỗ trợ thẻ âm thanh không?

The browser will choose the first source it supports. The text between the tags will only be displayed in browsers that do not support the