Đối tượng Audio trong HTML DOM đại diện cho phần tử HTML <audio>. Phần tử audio được giới thiệu trong HTML5. Sử dụng audio object chúng ta có thao tác phần tử audio để lấy thông tin về audioTrack, thay đổi autoplay, v.v.
Thuộc tính
Dưới đây là các thuộc tính của HTML DOM Audio Object:
| Thuộc tính | Mô tả |
|---|---|
| audioTracks | Trả về đối tượng audioTrackList chứa các audio track có sẵn |
| autoplay | Trả về hoặc thiết lập audio tự động phát |
| buffered | Trả về đối tượng TimeRanges chứa các phần đã buffer của audio |
| controller | Trả về đối tượng MediaController đại diện cho media controller hiện tại của audio |
| controls | Thiết lập hoặc trả về xem audio có hiển thị điều khiển play/pause hay không |
| crossOrigin | Thiết lập hoặc trả về cài đặt CORS của audio |
| currentSrc | Trả về URL của audio đang phát |
| currentTime | Thiết lập hoặc trả về vị trí phát hiện tại (giây) |
| defaultMuted | Thiết lập hoặc trả về xem audio có bị tắt tiếng mặc định hay không |
| defaultPlaybackRate | Thiết lập hoặc trả về tốc độ phát lại mặc định của audio |
| duration | Trả về độ dài audio (giây) |
| ended | Trả về xem phát lại đã kết thúc hay chưa |
| error | Trả về đối tượng MedioError đại diện trạng thái lỗi của audio |
| loop | Thiết lập hoặc trả về xem audio có phát lại khi kết thúc hay không |
| mediaGroup | Thiết lập hoặc trả về tên media group audio thuộc về |
| muted | Thiết lập hoặc trả về xem audio có tắt tiếng hay không |
| networkState | Trả về trạng thái mạng hiện tại của audio |
| paused | Thiết lập hoặc trả về xem audio có đang tạm dừng hay không |
| playbackRate | Thiết lập hoặc trả về tỷ lệ phát lại của audio |
| played | Trả về đối tượng TimeRanges đại diện các phần đã phát của audio |
| preload | Thiết lập hoặc trả về thuộc tính preload của audio |
| readyState | Trả về trạng thái sẵn sàng hiện tại của audio |
| seekable | Trả về đối tượng TimeRanges đại diện các phần có thể seek của audio |
| seeking | Trả về xem người dùng có đang seek trong audio hay không |
| src | Thiết lập hoặc trả về giá trị thuộc tính src của audio |
| textTracks | Trả về đối tượng TextTrackList đại diện tất cả text track có sẵn |
| volume | Thiết lập hoặc trả về âm lượng của audio |
Phương thức
Dưới đây là các phương thức của Audio Object:
| Phương thức | Mô tả |
|---|---|
| addTextTrack() | Thêm text track mới vào audio |
| canPlayType() | Kiểm tra trình duyệt có phát được loại audio chỉ định không |
| fastSeek() | Seek đến thời gian chỉ định trong audio player |
| getStartDate() | Trả về đối tượng Date mới đại diện offset timeline hiện tại |
| load() | Tải lại phần tử audio |
| play() | Bắt đầu phát audio |
| pause() | Tạm dừng audio đang phát |
Cú pháp
Tạo phần tử audio
var x = document.createElement("AUDIO")
Truy cập phần tử audio
var x = document.getElementById("demoAudio")
Ví dụ
Dưới đây là ví dụ cho Audio Object:
<!DOCTYPE html> <html> <body> <h1>NHẠC</h1> <audio id="Audio" controls> <source src="sample.mp3" type="audio/mpeg"> Trình duyệt không hỗ trợ audio </audio> <p>Click nút để lấy độ dài audio, tính bằng giây.</p> <button onclick="AudioDur()">Thời lượng</button> <button onclick="CreateAudio()">TẠO</button> <p id="SAMPLE"></p> <script> function AudioDur() { var x = document.getElementById("Audio").duration; document.getElementById("SAMPLE").innerHTML = x; } function CreateAudio() { var x = document.createElement("AUDIO"); x.setAttribute("src","sample1.mp3"); x.setAttribute("controls", "controls"); document.body.appendChild(x); } </script> </body> </html>
Kết quả
Sẽ cho kết quả sau:
Khi click “Thời lượng”:
Khi click TẠO:
Giải thích ví dụ:
Đầu tiên tạo audio element chỉ định source và type:
<audio id="Audio" controls> <source src="sample.mp3" type="audio/mpeg"> Trình duyệt không hỗ trợ audio </audio>
Hai nút “Thời lượng” và TẠO thực thi AudioDur() và CreateAudio():
<button onclick="AudioDur()">Thời lượng</button> <button onclick="CreateAudio()">TẠO</button>
AudioDur() lấy phần tử id “Audio”, dùng duration property lấy độ dài, hiển thị trong đoạn văn id “Sample”:
function AudioDur() { var x = document.getElementById("Audio").duration; document.getElementById("SAMPLE").innerHTML = x; }
CreateAudio() tạo audio element, set src = “sample1.mp3”, bật controls. Thêm vào body bằng appendChild():
function CreateAudio() { var x = document.createElement("AUDIO"); x.setAttribute("src","sample1.mp3"); x.setAttribute("controls", "controls"); document.body.appendChild(x); }