Để kiểm tra xem phần tử <audio> (hoặc <video>) có đang phát hay không, sử dụng thuộc tính paused.
Cách kiểm tra đơn giản
function isPlaying(audioElement) {
return !audioElement.paused;
}
// Sử dụng
var audio = document.getElementById('myAudio');
if (isPlaying(audio)) {
console.log('Đang phát...');
} else {
console.log('Đang tạm dừng/ngưng.');
}
Thuộc tính paused trả về true nếu media đang tạm dừng hoặc chưa bắt đầu, false nếu đang phát.
Toggle Play/Pause
function togglePlayPause(audioElement) {
if (audioElement.paused) {
audioElement.play().catch(function(err) {
console.warn('Tự động phát bị chặn:', err);
// Cần tương tác người dùng trước (click) mới play được trên mobile
});
} else {
audioElement.pause();
}
}
// Nút bấm toggle
<button onclick="togglePlayPause(document.getElementById('myAudio'))">
Play / Pause
</button>
Các trạng thái liên quan
| Thuộc tính | Kiểu | Ý nghĩa |
|---|---|---|
paused | Boolean | true = tạm dừng/chưa phát; false = đang phát |
ended | Boolean | true = đã phát hết |
currentTime | Number | Vị trí phát hiện tại (giây) |
duration | Number | Tổng thời lượng (giây) |
readyState | Number | Trạng thái tải (0-4): HAVE_NOTHING...HAVE_ENOUGH_DATA |
Event listeners hữu ích
var audio = document.getElementById('myAudio');
audio.addEventListener('play', function() { console.log('Bắt đầu phát'); });
audio.addEventListener('pause', function() { console.log('Tạm dừng'); });
audio.addEventListener('ended', function() { console.log('Phát xong'); });
audio.addEventListener('timeupdate', function() {
// Cập nhật progress bar
var percent = (audio.currentTime / audio.duration) * 100;
});
audio.addEventListener('waiting', function() { console.log('Đang buffering...'); });
audio.addEventListener('canplaythrough', function() { console.log('Có thể phát không bị ngắt'); });
Lưu ý Mobile (iOS/Android)
autoplaychỉ hoạt động nếumutedhoặc người dùng đã tương tác với trang.- Gọi
play()trả vềPromise- bắt buộc.catch()để xử lý từ chối autoplay. - Trên iOS, audio không preload trừ khi user interaction.