- [] 音乐开关
- . 见顶部
- . 除了显式的使用<audio>外[记得隐藏]，还可以使用构造函数new一个音频对象
- . 除了根据音频属性paused状态判断是否暂停外，还可以根据元素文字判断，或者根据类判断[如果使用属性played判断。。。]
- . 除了文字外，还可以使用图片或字体图标设计UI
-
let bg = new Audio();
bg.src = '/music/Alizee-La Isla Bonita.mp3'
bg.pause();
let switch = document.querySelector('.switch')
switch.addEventListener('click', () => {
if (bg.paused) {
switch.innerHTML = 'on'
bg.play();
} else {
switch.innerHTML = 'off'
bg.pause();
}
switch.classList.toggle('active')
})
- [] MINI音乐播放器1
-
Alizee-La Isla Bonita
00:00
00:00
- [思路]
- 使用<audio>元素构造函数创建音频对象并指定src
- 根据设计创建播放列表样式，包括资源说明和控制按钮
- 根据播放状态切换控制按钮为播放按钮或暂停按钮
- 利用js事件控制<audio>的播放和暂停
- 根据当前播放时长currentTime和总时长duration，获取播放进度百分比，设置元素的内联变量--per属性，并由其伪元素使用，设置相应的百分比进度条
- [HTML]
-
<div class="custom-audio">
<audio id='audio'>您的浏览器不支持audio标签</audio>
<span>Alizee-La Isla Bonita</span>
<div class="cur">00:00</div>
<div id="ctrl" class="play"></div>
<div class="dur">00:00</div>
</div>
- [CSS]
-
.custom-audio {
--per: 0%;
position: relative;
//...
}
.custom-audio::before {
content: '';
position: absolute;
left: 0;
bottom: 0px;
width: var(--per);
height: 2px;
background-color: var(--warn-color);
}
#ctrl {
width: 20px;
height: 20px;
background-size: cover;
cursor: pointer;
}
.play {
background-image: url(../imgs/Play.png);
}
.pause {
background-image: url(../imgs/Pause.png);
}
- [JavaScript]这里利用控制按钮的类名[更改背景图片]判断播放状态，也可以通过定义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('loadedmetadata', () => {
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', function () {
ctrl.click()
})
ctrl.addEventListener('click', function () {
if (ctrl.className == 'play') {
audio.play()
ctrl.className = 'pause'
} else {
audio.pause()
ctrl.className = 'play'
}
})
- [] MINI音乐播放器2
- . player - 无CSS