专栏首页小白程序猿js控制音频文件的播放暂停操作

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

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

需求

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

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("开始");
       }
   }
});

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 互联网公司网站模板分享「网站模板」

    今天给大家分享的是一套互联网公司网站模板,此模板比较简单,但是完全可以经过简单的调整应用于网站上面。

    申霖
  • linux服务器tmp目录爆满并产生大量sess_*文件

    近期公司网站全面版本升级,使用thinkphp5.1版本为基础,进行了二次开发,在全面更新后,网站链接暴涨增值98万,运行一周未出现什么问题,但是在下一周,忽然...

    申霖
  • vue调取接口传递token参数

    使用vue框架调取接口时,在请求头中携带参数token,用于业务验证,对于console中出现的CORS跨域问题,及后端程序参数值接收问题,做出相应的处理方案。

    申霖
  • 移动直播MLVB常见问题(FAQ)

    快速入门:https://cloud.tencent.com/document/product/454/7876

    腾讯视频云-Zachary
  • 微软将Office 365视为设备+服务战略的引擎

    越是厉害的人越谦虚,陆奇就是这样一个人,作为微软全球最懂服务的人之一,在微软“设备+服务“战略越走越扎实的时刻,他仍保持谨慎乐观。 从微软Build 2...

    静一
  • AirTest 基本使用及框架浅剖析——五分钟上手制作游戏辅助

    Airtest Project 是为编写自动化脚本,达到提升测试效率的一整套解决方案。它可以轻松的扩展到多平台、多引擎上;如基础的 Android和IOS手机应...

    碧油鸡
  • 微软Build 2019|发布多项产品、服务,涵盖VR/AR、AI、云等领域

    微软Build 2019开发者大会已于太平洋时间5月6日准时举行(至5月8日结束)。在今年Build开发者大会首日,微软针对VR/AR、AI、云服务等领域发布了...

    VRPinea
  • 【实战】从零开始使用JavaScript制作自己的命令行(CLI工具)

    我们每天都使用CLI程序(例如Terminal,cmd,Powershell等)进行软件开发。你使用的每个工具本质上都是其他软件工程师的产品,我们也可以制作自己...

    Dunizb
  • 振动信号频谱分析及阶次反算转速

    “在振动噪音的测试分析过程中,获得准确的转速信息是频谱分析的前提,但这不是必须的。本文主要介绍旋转机械频谱分析的一些基本概念,然后顺带利用这些特性来反算转速”

    用户7573907
  • 编写通用 Hello World 驱动程序 (KMDF)

    本主题介绍了如何使用内核模式驱动程序框架 (KMDF) 编写非常小的通用 Windows 驱动程序。

    战神伽罗

扫码关注云+社区

领取腾讯云代金券