前端之家收集整理的这篇文章主要介绍了
js仿微信语音播放实现思路，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
最近看到有一个叫做“轻客小伙伴”的微信服务号，运营得挺不错的。
它是做英语线上培训的，由老师录制语音，配上图文，制作成课程。
花了不少时间写了大多数功能，但还没有优化成插件，直接发代码估计也看不懂，难应用。所以就主要说下实现的思路。
我的html结构是这样的
dio id="audio_my" src="">
Your browser does not support the audio tag.
删除
app_voice_time.className = app_voice_time.className.replace("app-voice-unread","");
}
dio是au
dio控件的document）
PAGE.au
dio.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.au
dio.src = voiceSrc;
PAGE.au
dio.play();
PAGE.Event_PlayVoice();
},false);
