-
. 使用 JavaScript 控制
- 媒体属性 properties
-
. 大多属性和HTML标签属性一一对应
| 类别 |
说明 |
| autoplay |
设置或返回是否在就绪（加载完成）后随即播放音频 |
| currentTime |
设置或返回音频中的当前播放位置；以秒计） |
| duration |
时长 |
| ended |
是否已结束 |
| muted |
是否关闭声音 |
| paused |
是否暂停 |
| loop |
是否循环 |
| played |
播放状态；返回表示音频已播放部分的 TimeRanges 对象 |
| src |
设置或返回音频的 src 属性的值 |
| volume |
设置或返回音频的音量： 0.0（静音）- 1.0（最大声） |
- 媒体方法 methods
-
- [] 可控背景音乐 - 用户可以停止或播放
-
Html
<button id="ctrl">play/pause</button>
<audio src="Alizee.mp3"></audio>
CSS：自行完成 UI 设计；如使用文字或字体图标、使用动画
JavaScript：在 <body> 区末尾添加 <script> 并完成 JavaScript 逻辑：获取元素；点击播放或暂停
const audio = document.getElementsByTagName('audio')[0];
const ctrlBtn = document.getElementById('ctrl');
ctrlBtn.addEventListener('click', () => {
audio.paused ? audio.play() : audio.pause();
})
或
ctrlBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
})
或
ctrlBtn.addEventListener('click', function () {
//
})
或
ctrlBtn.onclick = function () {
//
}
- 媒体事件 Events
-
. 媒体在加载和使用中的各种事件，用于监听音频的播放
| 类别 |
说明 |
| loadstart
|
浏览器开始加载资源 - browser has started to load a resource |
| durationchange
|
时长发生变化触发；加载完毕后，从NaN变为实际的数值 - duration attribute has been updated |
| loadedmetadata
|
加载元数据：时长、尺寸大小（视频）、文本轨道、标题、艺术家、专辑等等 |
| loadeddata |
当前帧的数据加载完毕，下一帧还未就绪 |
| canplay |
媒体就绪，可以播放；需要缓冲 |
| canplaythrough
|
媒体就绪，可以正常播放且无需停顿和缓冲 |
| play |
播放；暂停属性由真变为假的时候 - the paused property is changed from true to false
同时触发 playing 事件
|
| pause |
暂停 |
| ended |
播放结束
同时触发暂停 pause 事件
|
| progress
|
媒体加载资源的过程中，周期性触发 - fired periodically as the browser loads a resource
可以应用加载效果
|
- [] 媒体事件触发过程 - 接上例
-
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('timeupdate', (e) => {
console.log(audio.currentTime);
})
audio.addEventListener('canplay', (e) => {
console.log('canplay');
})
audio.addEventListener('canplaythrough', (e) => {
console.log('canplaythrough');
})
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 构造函数生成音频实例，并指定 src
. H5 仅仅控制播放；音频由 Audio 类构造函数 new 一个音频对象；CSS 样式自定
. 除了根据音频属性 paused 状态判断是否暂停外，还可以根据元素文字判断，或者根据类判断[如果使用属性 played 判断。。。
. 除了文字外，还可以使用图片或字体图标设计 UI
let switch = document.querySelector('.switch')
let bg = new Audio();
bg.src = '/music/Alizee-La Isla Bonita.mp3'
bg.pause();
switch.addEventListener('click', () => {
if (bg.paused) {
switch.innerHTML = 'on'
bg.play();
} else {
switch.innerHTML = 'off'
bg.pause();
}
switch.classList.toggle('active')
})
- [] 简单播放器
-
使用 <audio> 元素构造函数创建音频对象并指定 src
根据设计创建播放列表样式，包括资源说明和控制按钮
根据播放状态切换控制按钮为播放按钮或暂停按钮
利用js事件控制 <audio> 的播放和暂停
根据当前播放时长 currentTime 和总时长 duration，获取播放进度百分比，设置元素的内联变量 --per 属性，并由其伪元素使用，设置相应的百分比进度条
利用控制按钮的类名[更改背景图片]判断播放状态，也可以通过定义 bool 变量判断
let audio = new Audio();
audio.src = '/music/Alizee-La Isla Bonita.mp3';
let tag = document.querySelector('.custom-audio');
let ctrl = document.querySelector('#ctrl');
let cur = document.querySelector('.cur');
let dur = document.querySelector('.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);
})
audio.addEventListener('click', () => {
ctrl.click()
})
ctrl.addEventListener('click', () => {
if (ctrl.className == 'play') {
audio.play()
ctrl.className = 'pause'
} else {
audio.pause()
ctrl.className = 'play'
}
})
- [] MINI音乐播放器
- [] 播放器 - 无CSS
- 辅助函数
-
. 获取的时间通常要转化为一定的格式，如 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}`;
}
- [] 单击超链接/按钮时播放音效并跳转
-
const links = document.querySelectorAll('.nav-item');
const se = new Audio('/utils/sound/click0.mp3')
se.volume = 0.5;
links.forEach(link => {
link.addEventListener('click', e => {
e.preventDefault()
se.currentTime = 0;
se.play()
se.addEventListener('ended', () => {
window.location.href = link.href;
})
})
})