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

前端页面“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'); // 添加播放图标样式
        });
    });
});

示意说明

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

首先通过“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’)”这样的方式来实现。

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

© 版权声明
THE END
喜欢就支持一下吧
点赞5 分享