Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Kiểm tra audio đang phát trong HTML5

Để 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ínhKiểuÝ nghĩa
pausedBooleantrue = tạm dừng/chưa phát; false = đang phát
endedBooleantrue = đã phát hết
currentTimeNumberVị trí phát hiện tại (giây)
durationNumberTổng thời lượng (giây)
readyStateNumberTrạ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)

  • autoplay chỉ hoạt động nếu muted hoặ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.