Thẻ HTML `audio`

Khám phá những điều cơ bản về cách làm việc với HTML`audio`nhãn

Cácaudiocho phép bạn nhúng nội dung âm thanh vào các trang HTML của mình.

Phần tử này có thể phát trực tuyến âm thanh, có thể sử dụng micrô quagetUserMedia()hoặc nó có thể phát một nguồn âm thanh mà bạn tham khảo bằng cách sử dụngsrcthuộc tính:

<audio src="file.mp3" />

Theo mặc định, trình duyệt không hiển thị bất kỳ điều khiển nào cho phần tử này. Điều đó có nghĩa là âm thanh sẽ chỉ phát nếu được đặt thành tự động phát (sẽ nói thêm về điều này ở phần sau) và người dùng không thể biết cách dừng nó hoặc điều khiển âm lượng hoặc di chuyển qua bản nhạc.

Để hiển thị các điều khiển tích hợp, bạn có thể thêmcontrolsthuộc tính:

<audio src="file.mp3" controls />

Điều khiển có thể có một giao diện tùy chỉnh.

Bạn có thể chỉ định loại MIME của tệp âm thanh bằng cách sử dụngtypethuộc tính. Nếu không được đặt, trình duyệt sẽ cố gắng tự động xác định nó:

<audio src="file.mp3" controls type="audio/mpeg" />

Một tệp âm thanh theo mặc định không tự động phát. Thêmautoplaythuộc tính để phát âm thanh tự động:

<audio src="file.mp3" controls autoplay />

Lưu ý: trình duyệt di động không cho phép tự động phát

CácloopThuộc tính khởi động lại âm thanh đang phát lúc 0:00 nếu được đặt, nếu không, nếu không, âm thanh sẽ dừng ở cuối tệp:

<audio src="file.mp3" controls autoplay loop />

Bạn cũng có thể phát tệp âm thanh bị tắt tiếng bằng cách sử dụngmutedthuộc tính (không thực sự chắc chắn về tính hữu ích của điều này):

<audio src="file.mp3" controls autoplay loop muted />

CORS

Âm thanh phụ thuộc vàoCORSvà trừ khi bạn cho phép nó ở phía máy chủ, tệp âm thanh không thể phát chéo nguồn gốc.

Tải trước âm thanh

Nếu bạn không đặtautoplay, thông số kỹ thuật nói rằng các trình duyệt sẽ chỉ tải xuống siêu dữ liệu âm thanh (ví dụ: để tìm hiểu độ dài) nhưng sẽ không tải xuống bản thân âm thanh.

Bạn có thể buộc tải trước âm thanh bằng cách sử dụng

<audio src="song.mp3" preload="auto" />

Hiển thị nội dung nếu`audio`không được hỗ trợ

Cácaudiothẻ làđược hỗ trợ rất tốt, lên đến IE9, vì vậy ngày nay không cần phải có văn bản giữ chỗ, nhưng chúng tôi có tùy chọn này. Bạn chỉ cần thêm thẻ đóng và chèn văn bản vào giữa thẻ mở và thẻ đóng:

<audio src="song.mp3">Audio tag not supported</audio>

Thêm điều khiển gốc

Thay vì tự động phát âm thanh trong nền, bạn có thể chọn yêu cầu trình duyệt hiển thị một bộ điều khiển để cho phép người dùng phát âm thanh khi họ muốn, có một số chỉ báo về độ dài, đặt âm lượng và cho phép họ điều hướng bản nhạc:

<audio src="song.mp3" controls />

Đây là giao diện của nó trong Chrome:

Audio element

Bạn có thể tạo kiểu điều khiển bằng cách sử dụng CSS, mặc dù điều này nằm ngoài phạm vi của phần giới thiệu này.

Thêm nhiều nguồn

Trình duyệt có thể triển khai một codec âm thanh nhưng không thể triển khai một codec khác. Có thể bạn muốn sử dụng một tiêu chuẩn mới hơn giúp giảm một nửa kích thước tệp nhưng bạn vẫn muốn hỗ trợ các trình duyệt cũ hơn.

Bạn làm như vậy vớisourcenhãn:

<audio controls>
 <source src="song.opus" type="audio/ogg; codecs=opus"/>
 <source src="song.ogg" type="audio/ogg; codecs=vorbis"/>
 <source src="song.mp3" type="audio/mpeg"/>
</audio>

Làm việc với các sự kiện âm thanh

Chúng tôi có thể lắng nghe các sự kiện trên mỗiaudiophần tử sử dụng JavaScript, để tạo các dự án và giao diện thú vị. Có rất nhiều sự kiện khác nhau để chơi cùng.

Cácplaysự kiện được kích hoạt khi bắt đầu phát lại âm thanh:

document.querySelector('video').addEventListener('play', () => {
  alert('Audio is playing!!!')
})

Bạn cũng có thể thêm trực tiếp sự kiện này (như những sự kiện khác) bằng cách sử dụngon<event>thuộc tính trực tiếp trên phần tử HTML:

<audio src="song.mp3" controls onplay="playing()" />

const playing = () => {
  alert('Audio is playing!!!')
}

Đây là một số sự kiện bạn có thể nghe:

playâm thanh bắt đầu phát
pauseâm thanh đã bị tạm dừng
endedphát âm thanh đã hoàn thành
timeupdatengười dùng đã tương tác với dòng thời gian phát lại và tiến / lùi
volumechangengười dùng đã thay đổi âm lượng

Có rất nhiều sự kiện khác liên quan đến tải âm thanh vàbạn có thể tìm thấy danh sách đầy đủ trên MDN.

Tải xuống miễn phí của tôiSổ tay HTML