anjia / blog

博客,积累与沉淀
106 stars 4 forks source link

<audio> #57

Open anjia opened 5 years ago

anjia commented 5 years ago

事件

  事件 触发时机
最常用 play Playback 已经开始
  pause Playback 已经暂停
  ended Playback 已经 stopped,因为音频播放完了
弱网时 waiting Playback 已经 topped,因为暂时缺数据
  playing Playback 已经准备好开始
在因为缺数据而被 paused 或 delayed 了之后
播放.异步 canplay 浏览器可以播放 media
但评估到加载到的数据还不足以让它不间断地一直播放到结束
可能会停下来等缓冲数据
播放.同步 canplaythrough 浏览器评估它能一直播放 media 直到结束
而不会因为内容缓冲而暂停
异常情况 error 当资源不能被加载时触发,因为错误导致的
  abort 资源未完全加载时触发,但不是错误导致的
交互类 timeupdate currentTime 属性指示的时间已更新
  seeking 一个 seek 操作开始
  seeked 一个 seek 操作完成了
  volumechange 音量变了
  ratechange playback 的播放速率已更改
加载 loadeddata 媒体的第一帧已完成加载
  loadedmetadata 元数据已加载
  stalled 停滞。
浏览器正在尝试获取 media 数据,
但数据却意外地还没有来
  suspend 暂停。media 数据的加载已经暂停
  progress 浏览器加载资源时定期触发
  loadstart 浏览器开始加载资源时触发
其它 durationchange duration 属性被更新了
  complete OfflineAudioContext 的渲染已经完成
  audioprocess ScriptProcessorNode 的输入缓存已经准备好了
  emptied media 变空了。
比如,当 media 被加载/部分加载完毕时会触发此事件,
会调用load()方法俩 reload 它

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

anjia commented 5 years ago

DOM 接口 HTMLAudioElement

该接口没有自定义属性/方法,都是继承的HTMLMediaElementHTMLElement

11

属性

HTMLMediaElement 的属性

分类 属性 含义
状态 readyState 表示 media 的 readiness state(准备状态)
unsigned short (enumeration)
  networkState 表示抓取媒体时的网络当前状态
unsigned short (enumeration)
布尔 paused 表示 media 元素是否被暂停。布尔类型
  muted 表示 media 元素是否被静音。布尔类型
  loop 能否循环。布尔类型
  ended 是否播完了。布尔类型
  autoplay 是否自动播放。布尔类型
属性值 duration media 的长度,单位是秒。如果没有 media data 则是 0
  currentSrc
  currentTime
  played 已经播放了多少。TimeRanges
  src
  srcObject
  volume
错误 error MediaError / null
其它 audioTracks
  buffered
  controller
  controls
  controlsList
  crossOrigin
  defaultMuted
  defaultPlaybackRate
  disableRemotePlayback
  mediaGroup
  playbackRate
  preload
  seekable
  seeking
  sinkId

方法

方法 说明
play() 总是从头开始播放
pause()
load() 将 media 重置到开头,并选择一个最佳可用源,
从 src 属性或<source>元素提供的源中
canPlayType() 确定是否可以播放指定的媒体类型
fastSeek() 直接寻求给定的时间

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