H5网页语音实时播报功能的实现

最新推荐文章于 2025-03-05 15:16:57 发布

原创最新推荐文章于 2025-03-05 15:16:57 发布 · 3.6k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何使用JavaScript在H5中实现根据后端语音开关实时抓取数据，通过阿里云API转换为MP3并播放。关键步骤包括获取音频开关状态、定时刷新数据、以及处理音频播放和反馈给后端。

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();
}

我的微信：