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

前言说明

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

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

<button class="btn btn-primary btn-sm audio-btn" data-src="https://www.360mb.net/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'); // 添加播放图标样式
        });
    });
});