Javascript 播放器交互功能实现 🦜
整理素材 🦚
首先我们可以先把一些基本上的数据整理出来~
这里就从本地选择一些音乐文件作为播放素材~, 保存到本地项目目录下的mp3目录中
音乐素材大家可以自行寻找即可,文件可以是一些MP3/WAV格式的都可以~
如图
初始化功能 🐬
用一个数组 + JSON格式来模拟一个播放音频文件数据列表
例如
// 歌曲列表
const musicList = [
{
src: 'mp3/1.wav', name: 'Once Upon A Time' },
{
src: 'mp3/2.wav', name: 'Instruments of Retribution' },
{
src: 'mp3/3.wav', name: 'Millennia'},
{
src: 'mp3/4.wav', name: 'We Never' }
];
//获取必要的元素
var audio = document.getElementById("audio"); //获取原始音频元素
var musicName = document.getElementById("musicName"); //获取歌曲名称容器
var playPauseBtn = document.getElementById("playPauseBtn"); //暂停和播放按钮
var stopBtn = document.getElementById('stopBtn'); //停止播放按钮
var progressBar = document.getElementById('progressBar'); //获取中层进度条, 控制显示它的状态
var resetBtn = document.getElementById('resetBtn'); //重听按钮
var progressContainer = document.getElementById('progressContainer'); //进度条
var prevTrack = document.getElementById('prevTrack'); //上一曲按钮
var nextTrack = document.getElementById('nextTrack'); //下一曲按钮
var backBtn = document.getElementById('backBtn'); //快退5秒
var nextBtn = document.getElementById('nextBtn'); //快进5秒
var doubleBackBtn = document.getElementById('doubleBackBtn'); //双倍快退
var doubleNextBtn = document.getElementById('doubleNextBtn'); //双倍快进
//定义一个currentIndex变量，用来记录当前选中/激活/播放的项目初始值为0
var currentIndex = 0;
//定义初始化函数initMusic
function initMusic(index) {
//赋值播放音频路径与音频名称
audio.src = musicList[index].src;
musicName.textContent = musicList[index].name;
//重新加载音频资源
audio.load();
//如果音频没暂停就播放
if (!audio.paused) {
audio.play();
}
}
//初始化一下
initMusic(currentIndex);
注意:初始化函数，跟后面的曲目切换有很大关系,如果你不理解没关系，顺着看我们后面的功能你就能慢慢理解了
播放与暂停功能🌿
我们可以给播放/暂停绑定一个点击事件
实现逻辑:
当点击的时候，判断是否处于暂停状态，如果是就开始播放音乐并且设置按钮中的内容显示为暂停
否则就是播放的状态，对吧，那么就暂停音乐, 并且设置按钮中的内容显示为播放
代码如下
// 播放/暂停
playPauseBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = '❚❚';
} else {
audio.pause();
playPauseBtn.textContent = '▶';
}
});
效果如下
当然我这里是有声音的~
另外如果大家有方法和函数不明白，我们可以去借助w3school文档进行查看~
刚才我们使用到的一些方法都可以在这里找到, 没有这个文档的可以后台私信我!
如图
停止播放按钮功能 🌎
这个功能的逻辑代码也很简单, 同样也是利用事件绑定
当点击停止按钮的时候，首先我们可以利用暂停方法，把音乐暂停!
因为API里面没有停止方法，然后我们设置currentTime为0
currentTime是设置或返回音频和视频中的当前播放的位置, 以秒来计算~
如图
那么根据逻辑，我们也需要把暂停按钮所显示的状态修改成准备播放的内容~
并且因为这里是停止，所以如果有进度条，那也肯定是从头开始~
所以进度条，我们要重置到0
代码如下
stopBtn.addEventListener('click', () => {
audio.pause();
audio.currentTime = 0;
playPauseBtn.textContent = '▶';
progressBar.style.width = '0%';
});
重听当前歌曲功能 🐋
其实我们在做这个功能之前，要理解这个功能到底是怎么样的~
就比如这里的重听功能, 你把它的意思梳理清晰，那么代码自然也就出来了
重听的意思很显然就是从头开始听, 那会导致哪些状态~
首先我们的音频播放位置肯定要设置为0， 也就是audio.currentTime属性
然后我们给重听按钮绑定一个点击事件看看效果~
代码如下
// 重听当前歌曲
resetBtn.addEventListener('click', () => {
audio.currentTime = 0;
//这里要考虑到如果用户点击了暂停键，要重听的情况下也要播放
if (audio.paused) {
//开始播放
audio.play();
//设置暂停与播放按钮的内容为❚❚
playPauseBtn.textContent = '❚❚';
}
});
