【从零到一】用HTML5+CSS+JavaScript实现一个属于自己的mp3免费音乐播放器 (3) JS交互 (播放暂停、重听、停止)功能

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 = '❚❚';
    }
});