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 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
原生JS中slice()方法和splice()区别
Mar 06 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 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
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
Laravel 5.4重新登录实现跳转到登录前页面的原理和方法
2017/07/13 PHP
PHP使用glob方法遍历文件夹下所有文件的实例
2018/10/17 PHP
javascript String 的扩展方法集合
2008/06/01 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
原生js事件的添加和删除的封装
2014/07/01 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
Vue.js实现立体计算器
2020/02/22 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
在Python的Django框架中创建语言文件
2015/07/27 Python
对Python3 序列解包详解
2019/02/16 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
8种常用的Python工具
2020/08/05 Python
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
必须要使用游标的SQL语句有那些
2012/05/07 面试题
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
地理教师岗位职责
2014/03/16 职场文书
青春演讲稿范文
2014/05/08 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
教师听课评语大全
2014/12/31 职场文书
博士给导师的自荐信
2015/03/06 职场文书
大学生求职意向书
2015/05/11 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript