前端页面“audio-btn”元素音频无限切换播放JavaScript

前言说明

在我做一个项目的时候需要，页面有多个音频，点击播放后可以停止，但第二次在播放就不行了，后处理了一下就完美了，点击播放切换播放图标，并开始播放，再次点击就会新建一个音频对象，这样就可以联系点击切换多个音频的播放了。

本代码调用的CSS中的“audio-btn”元素，HTML代码可参考：

<button class="btn btn-primary btn-sm audio-btn" data-src="/wp-content/themes/360mb-child/assets/mp3/yunye.mp3"><i class="fa fa-play"></i></button>

代码文件

let currentAudio = null; // 当前正在播放的音频对象

// 音频播放按钮点击事件
document.querySelectorAll('.audio-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        if (!btn.dataset.src) { // 判断按钮是否存在绑定的音频文件路径
            return;
        }
        
        const audio = new Audio(btn.dataset.src);
        
        if (currentAudio === null) { // 如果当前没有正在播放的音频，则直接播放
            audio.play();
            currentAudio = audio;
        } else if (currentAudio.paused && currentAudio.src === audio.src) { // 如果当前音频已经被暂停，且与新的音频路径相同，则继续播放当前音频
            currentAudio.play();
        } else { // 否则，停止当前正在播放的音频，切换到新的音频
            currentAudio.pause();
            currentAudio.currentTime = 0;
            currentAudio = audio;
            currentAudio.play();
        }
        
        // 监听音频播放状态，切换播放按钮的图标
        currentAudio.addEventListener('play', () => {
            const icon = btn.querySelector('i');
            icon.classList.remove('fa-play'); // 移除播放图标样式
            icon.classList.add('fa-pause'); // 添加暂停图标样式
        });
        
        currentAudio.addEventListener('pause', () => {
            const icon = btn.querySelector('i');
            icon.classList.remove('fa-pause'); // 移除暂停图标样式
            icon.classList.add('fa-play'); // 添加播放图标样式
        });
    });
});

示意说明

这段代码是一个音频播放器的实现，包含了控制音频播放的各种状态和操作。具体解释如下：

首先通过“let currentAudio = null;”创建一个变量currentAudio，用于表示当前正在播放的音频对象，初始化为null。

然后通过“document.querySelectorAll('.audio-btn').forEach(btn => {...});”获取到页面上所有class为“audio-btn”的元素，并为每一个按钮添加点击事件的监听函数。

在点击事件中，首先通过“if (!btn.dataset.src) {return;}”判断该按钮是否绑定了音频文件路径。如果没有，则退出函数。

接着通过“const audio = new Audio(btn.dataset.src);”创建一个新的Audio对象，绑定该按钮对应的音频文件路径。

然后根据当前的音频播放状态，来执行不同的操作：

1. 如果当前没有正在播放的音频，则直接播放该音频，并将其赋值给currentAudio；
2. 如果当前音频已经被暂停，且与新的音频路径相同，则继续播放当前音频；
3. 否则，停止当前正在播放的音频，切换到新的音频，并将其赋值给currentAudio。

同时，在音频播放和暂停的事件监听函数中，分别修改按钮的图标来表示当前的播放状态，通过“icon.classList.remove('fa-play')”和“icon.classList.add('fa-pause')”这样的方式来实现。

总之，这段代码的功能就是实现一个简单的音频播放器，支持播放、暂停、切换音频等基本操作，并且可以通过事件监听来控制按钮的样式。