Khám phá những điều cơ bản về cách làm việc với HTMLaudio
nhãn
Cácaudio
cho 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ụngsrc
thuộ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êmcontrols
thuộ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ụngtype
thuộ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êmautoplay
thuộ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ácloop
Thuộ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ụngmuted
thuộ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ếuaudio
không được hỗ trợ
Cácaudio
thẻ 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:
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ớisource
nhã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ỗiaudio
phầ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ácplay
sự 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átpause
âm thanh đã bị tạm dừngended
phát âm thanh đã hoàn thànhtimeupdate
người dùng đã tương tác với dòng thời gian phát lại và tiến / lùivolumechange
ngườ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
Các hướng dẫn html khác:
- Giới thiệu về HTML
- Thẻ HTML `iframe`
- Biểu mẫu HTML
- Thẻ HTML `video`
- Thẻ HTML `audio`
- Các thẻ HTML cho văn bản
- Bảng HTML
- Thẻ HTML `img`
- Thẻ HTML `a`
- Thẻ HTML `ảnh`
- Thẻ HTML `figure`
- Thẻ vùng chứa HTML
- Khả năng truy cập trên Web
- Cách tạo bình luận trong HTML
- Cách thay đổi URL hình ảnh HTML ở chế độ tối
- Hình ảnh đáp ứng bằng cách sử dụng `srcset`
- Thay đổi biểu tượng yêu thích ở chế độ tối