多条语音汇成一整条开发
最近在做一个多条语音合成一整条语音并且结合进度条可以快进或者后退功能，功能不复杂，但是所遇到的坑不少，所以我就想着把我遇到的坑写下来，希望以后有用到的小伙伴们可以少走点弯路：
功能技术点
- 多条语音连续播放；
- 暂停或者继续播放；
- 进度条与时间动画；
- 拖拽小按钮可以快进或者后退并且定位到相对应语音秒数；
html+css代码：//第一步：首先加载一个微信JS-SDK
js代码数组结构：{ "id":299, "userId":22, "fileUrl":url， "seconds":13//每条语音的时间长度}//请求语音数组var result = res.result;//语音总长度var voiceLength = 0;//语音对象的秒数var voiceSecond = 0;//进度条动画var progress;//进度条长度var width = $(".control-bar").width();//拖拽时需要减去左边距，由于我的进度条长度为70%，所以marginleft值为body宽的百分15var marLeft = $("body").width()*0.15;//语音播放到多少秒用于寻找对应的语音消息var currentVoiceLeg = 0;//语音位置，单位百分比var voicePosition;//定义移动值var moveleft = 0;//语音开始播放位置var startSeconds = 0;//语音是否在播放var isPlay = false;//是否结束var isOver = true;for(var i=0;i =parseInt(width)-10){//拖拽块的left值最大是拖拽区的width减去拖拽块的width； voicePosition = 100; moveleft = parseInt(width)-10; } setProgressBar(btnId,progId,voicePosition+"%"); }; },false); btn.addEventListener("touchend",function(evt){ isPlay = false; currentVoiceLeg = Number(voicePercent*voicePosition); findCurrentVoice(result); $(".voice-currtTime").text(getVoiceTime(currentVoiceLeg)); },false);};/* * 动态设置拖拽元素left 和进度条长度 * @param string btnId拖拽元素id值 * @param string progId进度条id值 * @param string value需要设置的值 */function setProgressBar(btnId,progId,value){ $("#"+btnId).css('left',value); $("#"+progId).width(value);};/* * 匹配对应的语音消息并且快进 *///当前语音消息下标var currtIndex = 0;function findCurrentVoice(arry){ for(var i =0;i = currentVoiceLeg){ startSeconds = Number(currentVoiceLeg - arry[i].startLength); var src = arry[i].fileUrl; currtIndex =i; playAudio(startSeconds,currtIndex,arry); break; }; };};/* * 播放动画 * btnId 动画按钮id * progId 进度条动画id */function setIntVoice(btnId,progId){ if(!isPlay){ progress = setInterval(function(){ moveleft+=secondNum; currentVoiceLeg+=1; voicePosition = moveleft/width*100; if(currentVoiceLeg>=voiceLength&&isOver){ voicePosition = 0; moveleft = 0; currentVoiceLeg =0; controlAudio(); }; $(".voice-currtTime").text(getVoiceTime(currentVoiceLeg)); setProgressBar(btnId,progId,voicePosition+"%"); },1000); } };/* * 播放声音函数 * @param string src 播放地址 * @param string num 播放声音的位置（秒） *///当前语音下标 var currntNum;function playAudio(num,index,arry){ isOver = false; var src = arry[index].fileUrl; currut_audio.src = src; currut_audio.load(); currntNum = index; var audioState = setInterval(function(){ if(currut_audio.readyState>1){ currut_audio.currentTime = num; currut_audio.play(); controlAudio(); clearInterval(audioState); }; },100) currut_audio.addEventListener("error", function (e) { alert('亲，网络有延迟，请稍后重试！'); }); };//监听语音播放事件currut_audio.addEventListener("play", function () { isPlay = true;}, false);//暂停currut_audio.addEventListener("pause", function () { isPlay = false;}, false);//停止 currut_audio.addEventListener("ended", function () { startSeconds = 0; //播放完成后切换音频 currtIndex+=1; if(currtIndex<=result.length-1){ currentVoiceLeg = result[currtIndex].startLength; playAudio(startSeconds,currtIndex,result); }else{ startSeconds = 0; currtIndex = 0; isOver = true; isPlay = false; } }, false);//控制界面交互，定时器function controlAudio(){ clearInterval(progress); if(!isPlay&&!isOver){ $(".on-log").addClass("btn-pause").removeClass("btn-play").attr("data-log","暂停"); if(currentVoiceLeg != 0){ currut_audio.play(); }; setIntVoice("slider","playing-bar"); }else{ $(".on-log").addClass("btn-play").removeClass("btn-pause").attr("data-log","播放"); clearInterval(progress); currut_audio.pause(); }};//点击播放按钮$(".on-log").on("click",function(){ if(isOver){ isOver = false; playAudio(startSeconds,currtIndex,result); }else{ controlAudio(); }}); 代码稍微有点乱，主要是供大家参考一下实现的思想，如果哪里不足也请大家多多指教！
需要注意的地方：
- ios给audio设置currentTime需要等待语音资源加载完成，查了很多资料发现只有设置定时器判断audio 的readyState方案兼容性相较好；
- audio在微信浏览器与ios或者一些安卓浏览器不会自动播放，涉及到流量问题，微信浏览器调用wx.ready方法达到自动播放效果；
- 连续播放时，播放完当前播放下一条时会有一定资源加载时间，导致最后时间会多出几秒。解决方案：当播放下一条语音时获取之前语音累计所加时间，重新设置定时器开始时间；
H5有些方法兼容性还是有待提高！！！