音频 <audio>

素材准备

简洁 Introduction

行盒 inline；可替换元素 - replaced element，同 <img>；可以设置大小
播放音频文件，如 .mp3、.ogg、.wav
默认情况下，只有 src 属性，音频元素不可见，应该通过 JavaScript 访问控制

<audio src=""></audio>

指定播放控制属性 controls，则可以可视化控制

<audio src="" controls></audio>

可以使用多个 <source> 指定音频，浏览器自动选择并播放最合适的源
通用格式 vs 专有格式

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
</audio>

使用建议1：内嵌 <a> ；如果系统无法识别，触发下载

<audio src="AudioTest.ogg" autoplay>
  <a href="AudioTest.ogg" download="AudioTest.ogg">Download OGG audio</a>.
</audio>

使用建议2：使用提示文本；当浏览器不支持此标签时，显示提示内容

<audio src="AudioTest.ogg" autoplay>  您的浏览器不支持audio标签 </audio>

更多信息，请访问 MDN - <audio>、HTML5 向网页嵌入视频和音频、custom-audio-player

标签属性 audio attributes

标签属性 Attribute
item	desc
src	音频的URL，推荐使用 MP3 格式
autoplay	自动播放；布尔属性
controls	播放控制条；布尔属性
loop	重复播放；布尔属性
muted	静音播放；布尔属性
preload	预加载；如果使用 autoplay，则忽略该属性
hidden	隐藏；同 display: none;隐藏后，仍然可以使用 JavaScript 控制!!!

[] 自动背景音乐 - 页面加载后自动循环播放，且隐藏

优点：简单直接
缺点：用户体验差，参与度低，不方便个性化定制

<audio src="./mp3/Alizee-La Isla Bonita.mp3" autoplay loop hidden>您的浏览器不支持audio标签</audio>

第一次打开页面：属于“首次加载”，浏览器允许自动播放

刷新页面：不属于首次加载，且没有用户交互，默认阻止自动播放

Javascript

使用 JavaScript 控制音频对象实例
大多属性和HTML标签属性一一对应
没有停止方法
媒体在加载和使用中的各种事件，用于监听音频的播放
更多信息，请访问 audio events、MDN - HTMLMediaElement

媒体属性 Properties
item	desc
autoplay	设置或返回是否在就绪（加载完成）后随即播放音频
currentTime	设置或返回音频中的当前播放位置；以秒计）
duration	时长
ended	是否已结束
muted	是否关闭声音
paused	是否暂停
loop	是否循环
played	播放状态；返回表示音频已播放部分的 TimeRanges 对象
src	设置或返回音频的 src 属性的值
volume	设置或返回音频的音量： 0.0（静音）- 1.0（最大声）

媒体方法 methods
item	desc
pause()	暂停
play()	播放

媒体事件 Events
item	desc
Audio()	构造方法；创建一个不可视的音频组件，如播放背景
loadstart	浏览器开始加载资源 - browser has started to load a resource
progress	媒体加载资源的过程中，周期性触发 - fired periodically as the browser loads a resource 可以应用加载效果
durationchange	时长发生变化触发；加载完毕后，从NaN变为实际的数值 - duration attribute has been updated
loadedmetadata	加载元数据：时长、尺寸大小（视频）、文本轨道、标题、艺术家、专辑等等
loadeddata	当前帧的数据加载完毕，下一帧还未就绪
canplay	媒体就绪，可以播放；需要缓冲
canplaythrough	媒体就绪，可以正常播放且无需停顿和缓冲
play	播放；暂停属性由真变为假的时候 - the paused property is changed from true to false 同时触发 playing 事件
playing	播放中；媒体属性 play 为真
pause	暂停；媒体属性 pause 为真
ended	播放结束先触发暂停 pause 事件
seeking	循迹中每次循迹过程都包括 seeking、durationchange、seeked、canplay、canplaythrough 如果播放中循迹，还会触发 pause
seeked	循迹结束
volumechange	改变音量

案例 Cases

[] 背景音乐 - 用户可以停止或播放；标签版

Html：显式的指定 hidden

<button id="ctrl">play/pause</button>
<audio id="audio" src="Alizee.mp3" hidden></audio>

CSS：自行完成 UI 设计；如使用文字或字体图标、使用动画
JavaScript：在 <body> 区末尾添加 <script> 并完成 JavaScript 逻辑：获取元素；声明函数；添加事件点击播放或暂停

const audio = document.getElementById('audio');
const ctrlBtn = document.getElementById('ctrl');
const play = () => {
  audio.paused ? audio.play() : audio.pause();
};
ctrlBtn.addEventListener('click', play)

监听媒体事件

audio.addEventListener('loadstart', (e) => {
    console.log('loadstart');
})
audio.addEventListener('progress', (e) => {
    console.log('progress');
})
audio.addEventListener('durationchange', (e) => {
    console.log('durationchange', audio.duration);
})
audio.addEventListener('loadedmetadata', (e) => {
    console.log('loadedmetadata');
})
audio.addEventListener('loadeddata', (e) => {
    console.log('loadeddata');
})
audio.addEventListener('canplay', (e) => {
    console.log('canplay');
})
audio.addEventListener('canplaythrough', (e) => {
    console.log('canplaythrough');
})
audio.addEventListener('timeupdate', (e) => {
    console.log(audio.currentTime);
})
audio.addEventListener('play', (e) => {
    console.log('play');
})
audio.addEventListener('pause', (e) => {
    console.log('pause');
})
audio.addEventListener('waiting', (e) => {
    console.log('waiting');
})
audio.addEventListener('playing', (e) => {
    console.log('playing');
})
audio.addEventListener('ended', (e) => { 
    console.log('ended');
})

[] 背景音乐 - 用户可以停止或播放；对象版

不使用 <audio> 标签
音频由 Audio 类构造函数 new 一个音频对象实例，并指定 src

<button id="ctrl">play/pause</button>

逻辑增加如下，其它保留

const audio = new Audio();
audio.src = 'Alizee.mp3'
audio.pause();

[] 简单播放器

使用 <audio> 元素构造函数创建音频对象并指定 src
根据设计创建播放列表样式，包括资源说明和控制按钮
根据播放状态切换控制按钮为播放按钮或暂停按钮
利用js事件控制 <audio> 的播放和暂停
根据当前播放时长 currentTime 和总时长 duration，获取播放进度百分比，设置元素的内联变量 --per 属性，并由其伪元素使用，设置相应的百分比进度条
利用控制按钮的类名[更改背景图片]判断播放状态，也可以通过定义 bool 变量判断

const audio = document.getElementById('audio');
audio.src = '/music/Alizee-La Isla Bonita.mp3';
let tag = document.querySelector('.custom-audio');
let ctrl = document.getElementById('ctrl');
let cur = document.getElementById('cur');
let dur = document.getElementById('dur');

audio.addEventListener('durationchange', () => {
  dur.innerHTML = time(audio.duration);
})

audio.addEventListener('timeupdate', () => {
  let secs = audio.currentTime;
  cur.innerHTML = time(audio.currentTime);
  let per = (audio.currentTime / audio.duration) * 100 + '%';
  tag.style.setProperty('--per', per);
})

ctrl.addEventListener('click', () => {
  if (ctrl.className == 'play') {
    audio.play()
    ctrl.className = 'pause'
  } else {
    audio.pause()
    ctrl.className = 'play'
  }
})

获取的时间通常要转化为一定的格式，如 mm:ss，参考代码如下

function time(secs) {
  let min = Math.floor(secs / 60);
  let sec = Math.floor(secs % 60);
  let secRes = sec > 9 ? `${sec}` : `0${sec}`;
  let minRes = min > 9 ? `${min}` : `0${min}`;
  return `${minRes}:${secRes}`;
}

[] MINI音乐播放器

[] 播放器 - 无CSS

[] 我超链接增加单击音效

音效播放完毕再跳转

const audio = new Audio('/utils/sound/click0.mp3')
document.addEventListener('click', e => {
  if (e.target.tagName == 'A') {
    e.preventDefault()
    audio.play()
    audio.addEventListener('ended', () => {
      window.location.href = e.target.href
    })
  }
})

音频

素材准备

简洁 Introduction

标签属性 audio attributes

Javascript

案例 Cases

总结与作业 Summary & Homework

总结 Summary

作业 Homework