- 素材准备
- 点击下载素材 Alizee-La Isla Bonita.mp3 或自行准备
- 引言 Introduction
-
. 播放音频文件，如 .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>
- 标签属性 Attribute
-
标签属性 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>
-
第一次打开页面：属于“首次加载”，浏览器允许自动播放
刷新页面：不属于首次加载，且没有用户交互，默认阻止自动播放
- [] 背景音乐 - 用户可以停止或播放；标签版
-
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
})
}
})