js仿微信语音播放实现思路


Posted in Javascript onDecember 12, 2016

最近看到有一个叫做“轻客小伙伴”的微信服务号,运营得挺不错的。
它是做英语线上培训的,由老师录制语音,配上图文,制作成课程。

js仿微信语音播放实现思路

花了不少时间写了大多数功能,但还没有优化成插件,直接发代码估计也看不懂,难应用。所以就主要说下实现的思路。
我的html结构是这样的

<div class="app-voice-you" voiceSrc="xx.mp3">
<img class="app-voice-headimg" src="xx.png" />
<div style="width: 60%;" class="app-voice-state-bg">
<div class="app-voice-state app-voice-pause"></div>
</div>
<div class="app-voice-time app-voice-unread">
1'6"
</div>
</div>
<!--语音播放控件-->
<audio id="audio_my" src="">
Your browser does not support the audio tag.
</audio>

核心功能就是语音播放,主要包括了以下几个功能点:

红点表明未听语音,语音听过后,红点会消失;

将“未读”状态的样式独立出来,“已读”的时候,把样式删除就行。结合本地存储处理就搞定了。

//this是点击的语音的document
var app_voice_time = this.getElementsByClassName("app-voice-time")[0];
  if(app_voice_time.className.indexOf("app-voice-unread") != -1){
    //存在红点时,把红点样式删除
    app_voice_time.className = app_voice_time.className.replace("app-voice-unread","");
  }

第一次听语音,会自动播放下一段语音;

这里主要是使用HTML5的audio控件的“语音播放完”事件
语音播放完,找到下一个语音,播放下一个语音

//语音播放完事件(PAGE.audio是audio控件的document)
 PAGE.audio.addEventListener('ended', function () {
   //循环获取下一个节点
  PAGE.preVoice = PAGE.currentVoice;
  var currentVoice = PAGE.currentVoice;
    while(true){
      currentVoice = currentVoice.nextElementSibling;//下一个兄弟节点
      //已经到达最底部
      if(!currentVoice){
        PAGE.preVoice.getElementsByClassName("app-voice-state")[0].className = "app-voice-state app-voice-pause";
        return false;
      }
      var voiceSrc = currentVoice.getAttribute("voiceSrc");
      if(voiceSrc && voiceSrc != ""){
        break;
      }
    }
    if(!PAGE.autoNextVoice){
      PAGE.preVoice.getElementsByClassName("app-voice-state")[0].className = "app-voice-state app-voice-pause";
      return false;
    }
    PAGE.currentVoice = currentVoice;
    //获取得到下一个语音节点,播放
      PAGE.audio.src = voiceSrc;
      PAGE.audio.play();
      PAGE.Event_PlayVoice();
}, false);

每段语音可以暂停、继续播放、重新播放;

这个比较简单,但是也是比较多逻辑。需要变换样式告诉用户,怎样是继续播放/重新播放。

播放中的语音有动画,不是播放中的语音则会停止动画。

这里主要是CSS3动画的应用

.app-voice-pause,.app-voice-play{
  height: 18px;
  background-repeat: no-repeat;
  background-image: url(../img/voice.png);
  background-size: 18px auto;
  opacity: 0.5;
}
 .app-voice-you .app-voice-pause{
  /*从未播放*/
  background-position: 0px -39px;
}
.app-voice-you .app-voice-play{
  /*播放中(不需要过渡动画)*/
  background-position: 0px -39px;
  -webkit-animation: voiceplay 1s infinite step-start;
  -moz-animation: voiceplay 1s infinite step-start;
  -o-animation: voiceplay 1s infinite step-start;
  animation: voiceplay 1s infinite step-start;
}
@-webkit-keyframes voiceplay {
  0%,
  100% {
    background-position: 0px -39px;
  }
  33.333333% {
    background-position: 0px -0px;
  }
  66.666666% {
    background-position: 0px -19.7px;
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
JS学习之一个简易的日历控件
Mar 24 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
jQuery 联动日历实现代码
May 31 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
js+css实现导航效果实例
Feb 10 Javascript
JS点击某个图标或按钮弹出文件选择框的实现代码
Sep 27 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
如何实现小程序tab栏下划线动画效果
May 18 Javascript
javascript实现拼图游戏
Jan 29 Javascript
解析JavaScript数组方法reduce
Dec 12 #Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 #Javascript
JS双击变input框批量修改内容
Dec 12 #Javascript
jQuery中animate的几种用法与注意事项
Dec 12 #Javascript
Websocket协议详解及简单实例代码
Dec 12 #Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 #Javascript
jQuery实现字符串全部替换的方法
Dec 12 #Javascript
You might like
生成php程序的php代码
2008/04/07 PHP
php在线打包程序源码
2008/07/27 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
通过js给网页加上水印背景实例
2019/06/17 Javascript
使用axios请求时,发送formData请求的示例
2019/10/29 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
使用pandas读取csv文件的指定列方法
2018/04/21 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
Python 创建新文件时避免覆盖已有的同名文件的解决方法
2018/11/16 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
基于Tensorflow高阶读写教程
2020/02/10 Python
浅析python函数式编程
2020/09/26 Python
Python threading模块condition原理及运行流程详解
2020/10/05 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
优秀应届毕业生自荐信
2013/11/16 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
经济管理自荐书
2014/06/09 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
报效祖国演讲稿
2014/09/15 职场文书
2014年导购员工作总结
2014/11/18 职场文书
工程安全生产协议书
2014/11/21 职场文书
医德医风自我评价2015
2015/03/03 职场文书
暑期实践个人总结
2015/03/06 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
给朋友的赠语
2015/06/23 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
SpringBoot实现异步事件驱动的方法
2021/06/28 Java/Android
Python实现排序方法常见的四种
2021/07/15 Python
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle