<!DOCTYPE HTML> <html> <head> <title>测试</title> <script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script> </head> <body> <input id="word" type="text" value="呼叫"> <button onclick="addList()">add</button> <audio id="player"> </audio> </body> </html> <script> var list = []; var tempPlayIdx = 0; var isPlaying = false; var playUrl = "http://218.75.108.158/tts/webtts.aspx" $(document).on('click','.voice', function() { $(this).addClass('voice1'); $("#player").bind('ended',function () { isPlaying = false; }); }); function addList() { var text = $("#word").val(); list.push({"text":text}); } function start() { window.setInterval(playNext,1000); } function playNext() { if(tempPlayIdx < list.length && !isPlaying){ isPlaying = true; var tmpPlayText = list[tempPlayIdx].text; tempPlayIdx++; playSound(tmpPlayText); } } function playSound(text) { $("#player").attr("src", playUrl +"?text=" + text); $("#player").attr("autoplay", "autoplay"); //$("#player").attr("controls", "controls"); var aud = document.getElementById("player"); aud.onended = function() { isPlaying = false; }; } start(); </script>
在项目中用websocket来发送数据 在onmessage里获取数据
//全局变量 var arrayObj = new Array(); ws.onmessage = function(evnt) { var a= JSON.parse(evnt.data); //语音播报 if(av !=null){ person=new Object(); person.avName=av; person.avStat=0; arrayObj.push(person); console.log(arrayObj); } }
function start() { window.setInterval(videLoad,1000); } function videLoad(){ var playUrl = "http://218.75.108.158/tts/webtts.aspx?text="; var ordernum=0; if(arrayObj.length!=0){ for (var i = 0; i < arrayObj.length; i++) { ordernum =i; if(arrayObj[i].avStat==1){ break; } if(arrayObj[i].avStat==2){ continue; } if(arrayObj[i].avStat==0){ var src= playUrl+arrayObj[i].avName; $("#player").attr("src",src); // $("#player").attr("autoplay", "autoplay"); // $("#player").attr("controls", "controls"); var aud = document.getElementById("player"); arrayObj[ordernum].avStat=1; } } } //播放中 $("#player").bind('ended',function () { arrayObj[ordernum].avStat=2; }); } start();