DonV

# Audio

# 概述

  ;audio (opens new window) 用于在文档中嵌入音频元素。

  ;audio元素是HTML5新增的行内标签，IE8及以下浏览器不支持audio标签。

  若浏览器不支持video元素或者无法播放音频，则会显示替代文本（开始和结束标签之间的内容）。

<audio src="music.mp3">当前浏览器不支持audio标签</audio>

# 标签属性

  • autoplay：音频会尽快自动播放，不会等待整个音频下载完成
  • controls：浏览器提供包括声音、播放进度、播放暂停的控制面板（不同浏览器不一致），用户可以控制音频播放
  • loop：循环播放音频
  • muted：是否静音，默认值为false，表示有声音
  • preload：预加载，包括auto、metadata和none三个参数值，auto表示加载音频，metadata表示不加载音频，但是需要获取音频元数据（如音频长度），none表示不加载音频。若指定为空字符串，则等效于auto。注意autoplay属性优先级高于preload，若autoplay被指定，则会忽略此属性，浏览器将加载音频以供播放
  • src：嵌入的音频URL

# 设置多个音频资源

  不同浏览器支持的音频播放格式有所不同，一般为了兼容效果，会放置多种音频格式，浏览器会自上而下选择符合的音频格式。

<audio controls>
  <source src="music.ogg" type="audio/ogg" />
  <source src="music.mp3" type="audio/mpeg" />
  <source src="music.wav" type="audio/Wav" />
  当前浏览器不支持audio标签
</audio>

# 元素属性

# 只读

  • duration：双进度浮点数，音频的播放时长，以秒为单位。若音频不可用或者音频未加载，则返回NaN
  • paused：若音频被暂停或者未开始播放，则返回true
  • ended：音频是否播放完毕，播放完毕则返回true
  • error：发生错误情况下的MediaError对象
  • currentSrc：返回正在播放或加载的音频的URL地址，对应于浏览器在source元素中选择的文件
  • seeking：用户是否在音频中移动或者跳跃到新的播放点
<audio preload="auto" src="music.mp3" onseeking="fn()" controls />
<script>
  var audio = document.querySelector('audio')

  function fn() {
    console.log(audio.seeking)
  }
</script>

# 可读写

  • autoplay：设置音频自动播放，或者查询音频是否设置autoplay
  • loop：设置或者查询音频是否循环播放
  • currentTime：返回音频当前的播放时间点，双精度浮点数，单位为秒。音频未播放，可用于设置音频开始播放的时间点。音频播放过程中，可用于设置音频播放时间点
  • controls：显示或隐藏音频控制面板，或者查询控制面板是否可见
  • volume：返回音量值，介于0-1之间的双进度浮点数，或者设置音量值
  • muted：设置或者查询是否静音
  • playbackRate：设置或者查询音频的播放速度，1表示正常速度，大于1表示快进，0-1之间表示慢进，0表示暂停（控制面板仍然是播放，仅仅是速度为0）

# 特殊属性

# played

  表示用户已经播放的音频范围，返回 TimeRanges (opens new window) 对象，其中TimeRanges对象包括一个length属性和start()、end()两个方法。

  • length：获取音频范围的数量，未开始播放为0，开始播放后至少为1
  • start(index)：获取某个音频范围的开始位置
  • end(index)：获取某个音频范围的结束位置

  若用户在音频中移动或者跳跃播放点，则会获得多个音频范围。

  如下为一段音频，用户跳跃了播放点两次，因此played.length为3，其中三段音频范围分别为开始播放、第一个跳跃点、第二个跳跃点的播放范围。

  上述部分代码如下。

<audio src="music.mp3" controls></audio>
<button id="btn">console.log</button>

<script>
  var btn = document.querySelector('#btn')
  var audio = document.querySelector('audio')

  btn.addEventListener('click', () => {
    const length = audio.played.length
    console.log(`length: ${length}`)

    for (var i = 0; i < length; i++) {
      var start = audio.played.start(i)
      var end = audio.played.end(i)

      console.log(`index: ${i}, start: ${start}, end: ${end}, durations: ${end - start}s`)
    }
  })
</script>

# buffered

  表示浏览器已经缓存的音频范围，返回TimeRanges对象，若音频已完全加载则buffered.length为1，buffered.start(0)为0，buffered.end(0)为音频时长，详细参考 (opens new window)。

# seekable

  表示用户可跳转或移动的音频范围，返回TimeRanges对象，若音频已完全加载则seekable.length为1，seekable.start(0)为0，seekable.end(0)为音频时长。音频未加载或者加载错误，则seakable.length为0，对应的start(0)和end(0)也就不存在，详细参考 (opens new window)。

# networkState

  获取音频的网络范围，详细参考 (opens new window)。

  • 0：NETWORK_EMPTY，音频尚未初始化
  • 1：NETWORK_IDLE，浏览器已选择好采用什么编码格式来播放媒体，但尚未建立网络连接
  • 2：NETWORK_LOADING，浏览器正在加载
  • 3：NETWORK_NO_SOURCE，未找到音频资源

# error

  通常正常加载音频，则返回null，若加载过程中发生错误，浏览器将会返回MediaError对象。MediaError对象包括code和message属性，message为错误描述信息，code为如下错误码。

  • 1：MEDIA_ERR_ABORTED，音频加载加载过程中由于用户操作而被终止
  • 2：MEDIA_ERR_NETWORK，确认音频资源可用，但是加载时出现网路错误，音频加载被终止
  • 3：MEDIA_ERR_DECODE，确认音频资源可用，但是解码发生错误
  • 4：MEDIA_ERR_SRC_NOT_SUPPORTED，音频格式不被支持或者资源不可用

# 方法

# play

  播放音频，返回Promise，播放成功时为resolved，因为任何原因播放失败为rejected，详细参考 (opens new window)。

var audio = document.querySelector('audio')

audio
  .play()
  .then(() => { })
  .catch(() => { })

# pause

  暂停音频，无返回值，详细参考 (opens new window)。

var audio = document.querySelector('audio')

audio.pause()

# load

  重新加载src指定的资源，详细参考 (opens new window)。

var audio = document.querySelector('audio')

audio.src = 'music.mp3'
audio.load()

# 事件

# 常用事件

# 其他事件

# 🎉 写在最后

🍻伙伴们，如果你已经看到了这里，觉得这篇文章有帮助到你的话不妨点赞👍或 Star (opens new window) ✨支持一下哦！

手动码字，如有错误，欢迎在评论区指正💬~

你的支持就是我更新的最大动力💪~

GitHub (opens new window) / Gitee (opens new window)、GitHub Pages (opens new window)、掘金 (opens new window)、CSDN (opens new window) 同步更新，欢迎关注😉~

最后更新时间: 3/6/2022, 9:06:37 PM