残酷，无情--audio

这个元素呢没啥说的，看看属性，看看事件，如下

可配置在标签上的属性

autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示音频控件（比如播放/暂停按钮）。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	如果出现该属性，则音频输出为静音。
preload	auto metadata none	规定当网页加载时，音频是否默认被加载以及如何被加载。
src	URL	规定音频文件的 URL。

示例

<audio src="./싫어 (Hate).mp3" id="audio"></audio>

// 展示控制条
<audio src="./싫어 (Hate).mp3" id="audio" controls="”controls“"></audio>

Audio 元素的属性

属性	注释
duration	获取媒体文件的总时长，以 s 为单位，如果无法获取，返回 NaN
paused	如果媒体文件被暂停，那么 paused 属性返回 true，反之则返回 false
ended	如果媒体文件播放完毕返回 true
muted	用来获取或设置静音状态。值为 boolean
volume	控制音量的属性值为 0-1;0 为音量最小，1 为音量最大
startTime	返回起始播放时间
error	返回错误代码，为 uull 的时候为正常。否则可以通过 Music.error.code 来获取具体的错误代码： 1.用户终止 2.网络错误 3.解码错误 4.URL 无效
currentTime	用来获取或控制当前播放的时间，单位为 s。
currentSrc	以字符串形式返回正在播放或已加载的文件

示例：

<body>
  <audio src="./싫어 (Hate).mp3" id="audio"></audio>
  <script>
    let audio = document.getElementById('audio')
    let currentTime = audio.currentTime // 当前时长
    let paused = audio.paused // 是否已经暂停
    audio.volume = 1
    // ....
  </script>
</body>

常用的控制用的函数

函数	作用
load()	加载音频、视频软件
play()	加载并播放音频、视频文件或重新播放暂停的的音频、视频
pause()	暂停出于播放状态的音频、视频文件
canPlayType(obj)	测试是否支持给定的 Mini 类型的文件

示例：

  <body>
    <audio src="./싫어 (Hate).mp3" id="audio" oncanplay="look()"></audio>
    <span class="aa" onclick="start()" id="span">开始</span>
    <script>
      let audio = document.getElementById('audio')
      function start() {
        if (audio.paused) {
          let span = document.getElementById('span')
          span.innerHTML = '开始'
          // 播放
          audio.play()
        } else {
          let span = document.getElementById('span')
          span.innerHTML = '暂停'
          // 暂停
          audio.pause()
        }
      }
      function look() {
        console.log('可以播放')
      }
      audio.addEventListener('ended', () => {
        let span = document.getElementById('span')
        span.innerHTML = '暂停'
      })
    </script>
  </body>

Audio 可监听事件

属性	值	描述
abort	script	当发生中止事件时运行脚本
canplay	script	当媒介能够开始播放但可能因缓冲而需要停止时运行脚本
canplaythrough	script	当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本
durationchange	script	当媒介长度改变时运行脚本
emptied	script	当媒介资源元素突然为空时（网络错误、加载错误等）运行脚本
ended	script	当媒介已抵达结尾时运行脚本
error	script	当在元素加载期间发生错误时运行脚本
loadeddata	script	当加载媒介数据时运行脚本
loadedmetadata	script	当媒介元素的持续时间以及其他媒介数据已加载时运行脚本
loadstart	script	当浏览器开始加载媒介数据时运行脚本
pause	script	当媒介数据暂停时运行脚本
play	script	当媒介数据将要开始播放时运行脚本
playing	script	当媒介数据已开始播放时运行脚本
progress	script	当浏览器正在取媒介数据时运行脚本
ratechange	script	当媒介数据的播放速率改变时运行脚本
readystatechange	script	当就绪状态（ready-state）改变时运行脚本
seeked	script	当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本
seeking	script	当媒介元素的定位属性为真且定位已开始时运行脚本
stalled	script	当取回媒介数据过程中（延迟）存在错误时运行脚本
suspend	script	当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本
timeupdate	script	当媒介改变其播放位置时运行脚本
volumechange	script	当媒介改变音量亦或当音量被设置为静音时运行脚本
waiting	script	当媒介已停止播放但打算继续播放时运行脚本

事件名称前面加 on 可放在标签中，如 oncanplay

<audio src="./싫어 (Hate).mp3" id="audio" oncanplay="look()"></audio>

示例代码：

<body>
  <audio src="./싫어 (Hate).mp3" id="audio" oncanplay="look()"></audio>
  <script>
    let audio = document.getElementById('audio')
    audio.addEventListener('ended', () => {
      let span = document.getElementById('span')
      span.innerHTML = '暂停'
    })
    // ......
    function look() {
      console.log('可以播放')
    }
  </script>
</body>

← 富文本原理

# 残酷，无情--audio

# 可配置在标签上的属性

# Audio 元素的属性

# 常用的控制用的函数

# Audio 可监听事件

残酷，无情--audio

可配置在标签上的属性

Audio 元素的属性

常用的控制用的函数

Audio 可监听事件