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 相关文章推荐
jquery 常用操作方法
Jan 28 Javascript
纯文字版返回顶端的js代码
Aug 01 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
javascript刷新父页面的各种方法汇总
Sep 03 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
jQuery插件StickUp实现网页导航置顶
Apr 12 Javascript
jQuery插件windowScroll实现单屏滚动特效
Jul 14 Javascript
js过滤HTML标签完整实例
Nov 26 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 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
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
php 短链接算法收集与分析
2011/12/30 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
vuex与组件联合使用的方法
2018/05/10 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
使用p5.js临摹动态图形
2019/10/23 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
2019/11/13 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
python为tornado添加recaptcha验证码功能
2014/02/26 Python
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
TensorFlow实现自定义Op方式
2020/02/04 Python
python异常处理、自定义异常、断言原理与用法分析
2020/03/23 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)
2016/08/15 HTML / CSS
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
Bootstrap File Input文件上传组件
2020/12/01 HTML / CSS
知识竞赛拉拉队口号
2014/06/16 职场文书
项目安全员岗位职责
2015/02/15 职场文书
民政工作个人总结
2015/02/28 职场文书
文明旅游倡议书
2015/04/28 职场文书
2016教师六五普法学习心得体会
2016/01/21 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python