HTML audio 标签相关事件

HTMLMediaElement

play

开始播放

video.addEventListener("play", (event) => {
  console.log(
    "The Boolean paused property is now 'false'. Either the play() method was called or the autoplay attribute was toggled.",
  );
});

pause

暂停

video.addEventListener("pause", (event) => {
  console.log(
    "The Boolean paused property is now 'true'. Either the pause() method was called or the autoplay attribute was toggled.",
  );
});

ended

停止播放了

video.addEventListener("ended", (event) => {
  console.log(
    "Video stopped either because it has finished playing or no further data is available.",
  );
});

error

加载音频时出错的回调

video.addEventListener("error", () => {
  console.error(`Error loading: ${videoSrc}`);
});

timeupdate

currentTime属性更新时的回调

video.addEventListener("timeupdate", (event) => {
  console.log("The currentTime attribute has been updated. Again.");
});

waiting

加载更多数据时的回调

video.addEventListener("waiting", (event) => {
  console.log("Video is waiting for more data.");
});

playing

正在播放

video.addEventListener("playing", (event) => {
  console.log("Video is no longer paused");
});

video.onplaying = (event) => {
  console.log("Video is no longer paused.");
};

loadedmetadata

在家元数据时的回调，回调中可以得到音频时长。

video.addEventListener("loadedmetadata", (event) => {
  console.log(
    "The duration and dimensions of the media and tracks are now known.",
  );
});

参考

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement