js控制音频文件的播放暂停操作

申霖

发布于 2020-04-03 16:15:43

8.1K00

代码可运行

文章被收录于专栏：小白程序猿小白程序猿

运行总次数：0

代码可运行

这个功能是在最百度语音合成的时候涉及到的，这个功能我也是第一次写，毕竟前端的东西不是很擅长。特此记录一下。

需求

页面中加载两个音频文件，通过两个按钮进行播放，一个暂停开关。效果就不给大家做展示了。

HTML代码

<span class="item openMusic" id="MaleVoice">男声</span>
<span class="item openMusic" id="FemaleVoice">女声</span>
<span class="item openMusic" id="PauseSound">暂停</span>

音频代码

<audio preload="none" controls="controls" hidden src="/music.mp3" id="MaleVoiceAudio"></audio>
<audio preload="none" controls="controls" hidden src="/music.mp3" id="FemaleVoiceAudio"></audio>

JS代码

//男声播放
$("#MaleVoice").click(function () {
   console.log("男声播放");
   $("#MaleVoiceAudio").removeClass("open-this");
   $("#FemaleVoiceAudio").removeClass("open-this");
   $("#MaleVoiceAudio").addClass("open-this");
   var myAuto = document.getElementById('MaleVoiceAudio');
   var otherAuto = document.getElementById('FemaleVoiceAudio');
   if (otherAuto !== null) {
       otherAuto.pause();
   }
   myAuto.play();
   $("#PauseSound").html("暂停");
});

代码说明：

1、这里面涉及到了一个open-this的类，主要是方便后期在进行暂停操作的时候，区分是男声、女声播放源；

2、获取audio的元素需要使用js来操作，在使用jQ时无法获取到；

3、播放状态使用元素 .paused，注意和pause区分开；

女声播放的控制代码就不做展示了，原理都是相同的。下面看一下暂停的代码操作；

//暂停
$("#PauseSound").click(function () {
   if ($("#MaleVoiceAudio").hasClass("open-this")) {
       //男声
       var myAuto = document.getElementById('MaleVoiceAudio');
   } else {
       //女声
       var myAuto = document.getElementById('FemaleVoiceAudio');
   }
   if (myAuto !== null) {
       if (myAuto.paused) {
           myAuto.play();
           $("#PauseSound").html("暂停");
       } else {
           myAuto.pause();
           $("#PauseSound").html("开始");
       }
   }
});

暂停的代码操作使用了状态判断和类判断，在不同的状态下执行相反操作。

这里没有使用图标模式展示，大家可以自行扩展成播放图标。样式会更好看一下。这里再说一下，目前主流浏览器是无法自动播放声音的，防止出现流氓广告的问题。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-04-02，如有侵权请联系 cloudcommunity@tencent.com 删除

html