JS实现的H5实时播报功能,先获取后端语音开关状态,如果是打开的,5秒抓一次后端数据,如果有新的,就调用阿里云的语音接口,把文字传过去它返回mp3文件的BASE64,再返回前端播放。
<audio autoplay preload id="vi"></audio>
get_au_switch();
//在微信里监听播放
document.addEventListener(
'WeixinJSBridgeReady',
function () {
playBackgroundMusic();
},
false
);
//获取语音播放开关状态
function get_au_switch(){
axios({
method:'get',
url:'/api/home/index/get_audio_switch',
params:{
},
headers:{
'XX-Token':ses.login
}
}).then(function(res){
au_sw = res.data.data;
setTimeout(function () {
if(au_sw){
getvideo();
secondread = setInterval(getvideo, 5000);
}
},500);
});
}
//获取音频文件
var getvideo = function(){
axios({
method:'get',
url:'/api/home/index/video',
params:{
},
headers:{
'XX-Token':ses.login
}
}).then(function(res){
if (res.data.code==1) {
audiosn = res.data.data.sn;
if(audiosn!=0){
document.getElementById('vi').src='data:audio/mp3;base64,'+res.data.data.audio;
playBackgroundMusic();
if(res.data.data.audio!='') {
isplay();
}
}
}
});
};
//告诉后端这条已播放
function isplay(){
axios({
method:'get',
url:'/api/home/index/video_isplay',
params:{
'sn':audiosn,
},
headers:{
'XX-Token':ses.login
}
}).then(function(res){
});
}
//播放
function playBackgroundMusic() {
// makeLog('play');
var bgMusic = document.getElementById('vi');
bgMusic.play();
}
我的微信: