0
点赞
收藏
分享

微信扫一扫

解决IOS下音频文件无法播放的问题

杨小羊_ba17 2022-02-07 阅读 92

首先使用h5的audio标签,由于后台返回音频格式为base64格式,原格式为wav,开始不确定是否可以直接播放base64格式的音频,前端通过npm的base64ToBlob的方式解码,并赋值给audio的src,具体代码如下:

//答案语音播放
    playVoice(text,e){
      let audio = this.$refs.audio;
      // 提取返回答案中的文字
      let reg = /<[^<>]+>/g; 
      

      if(text.answerMsg || text.promptVagueMsg){
        text = text.answerMsg.replace(reg,'') + text.promptVagueMsg.replace(reg,'') + text.vagueList.toString();
      } 
      document.querySelectorAll('.voiceBtn').forEach(item => {
        item.className = 'voiceBtn play';
      })
      e.target.className = 'voiceBtn pause' 
      if(this.audioText !== text){//点的不是同一段文字
        let params = {
          text
        };  
        params = pushDataFormat(params);
        this.$axios.post('ncfNewTimeRobot/textToVoice.do',{
          params: params
        }).then(res => {
          console.log(res.data)
          this.audioText = text;
          if(res.errCode == 0){
            // let audioBlob = base64ToBlob(res.data.data, 'wav');
            // audio.src = window.URL.createObjectURL(audioBlob); 
            audio.load();
            audio.play();
            audio.addEventListener("canplay", () => {
              console.log('canplay')
              window.URL.revokeObjectURL(audio.src);
            });
            audio.addEventListener('ended', function () {  
              e.target.className = 'voiceBtn play'  
            }, false);
          }  
        })
      }else{//点的是同一段文字  暂停 播放 
          if(audio.paused){
              audio.play();
              e.target.className = 'voiceBtn pause'
              
          }else{ 
              audio.pause();
              e.target.className = 'voiceBtn play' 
          }
      }
      
    }

以上代码测试中发现在android中能够播放,但是在IOS下无法播放,播放没有声音,继续查找解决方案

第二阶段一致怀疑是IOS不支持wav格式的播放,经过查资料,发现是支持的,然后各种查找解决方案,例如:判断如果是ios,需要先调用播放,在调用暂停,然后获取音频给src赋值,具体代码如下:

playVoice(text,e){
      let audio = this.$refs.audio;
      // 提取返回答案中的文字
      let reg = /<[^<>]+>/g; 
      
      audio.load();
      audio.play();
      audio.pause();
      
      if(text.answerMsg || text.promptVagueMsg){
        text = text.answerMsg.replace(reg,'') + text.promptVagueMsg.replace(reg,'') + text.vagueList.toString();
      } 
      document.querySelectorAll('.voiceBtn').forEach(item => {
        item.className = 'voiceBtn play';
      })
      e.target.className = 'voiceBtn pause' 
      if(this.audioText !== text){//点的不是同一段文字
        let params = {
          text
        };  
        params = pushDataFormat(params);
        this.$axios.post('ncfNewTimeRobot/textToVoice.do',{
          params: params
        }).then(res => {
          console.log(res.data)
          this.audioText = text;
          if(res.errCode == 0){
            let audioBlob = base64ToBlob(res.data.data, 'wav');
            audio.src = window.URL.createObjectURL(audioBlob); 
            audio.load();
            audio.play();
            audio.addEventListener("canplay", () => {
              console.log('canplay')
              window.URL.revokeObjectURL(audio.src);
            });
            audio.addEventListener('ended', function () {  
              e.target.className = 'voiceBtn play'  
            }, false);
          }  
          
        })
      }else{//点的是同一段文字  暂停 播放 
          if(audio.paused){
              audio.play();
              e.target.className = 'voiceBtn pause'
              
          }else{ 
              audio.pause();
              e.target.className = 'voiceBtn play' 
          }
      }
      
    }

后经测试并没有什么效果,最终怀疑是由于解码问题导致的损坏不能播放,然后直接通过直接播放base64格式的形式去尝试,具体代码如下:

playVoice(text,e){
      let audio = this.$refs.audio;
      // 提取返回答案中的文字
      let reg = /<[^<>]+>/g; 
      

      if(text.answerMsg || text.promptVagueMsg){
        text = text.answerMsg.replace(reg,'') + text.promptVagueMsg.replace(reg,'') + text.vagueList.toString();
      } 
      document.querySelectorAll('.voiceBtn').forEach(item => {
        item.className = 'voiceBtn play';
      })
      e.target.className = 'voiceBtn pause' 
      if(this.audioText !== text){//点的不是同一段文字
        let params = {
          text
        };  
        params = pushDataFormat(params);
        this.$axios.post('ncfNewTimeRobot/textToVoice.do',{
          params: params
        }).then(res => {
          console.log(res.data)
          this.audioText = text;
          if(res.errCode == 0){
            audio.src = `data:audio/wav;base64,${res.data.data}`
            audio.load();
            audio.play();
            audio.addEventListener("canplay", () => {
              console.log('canplay')
              window.URL.revokeObjectURL(audio.src);
            });
            audio.addEventListener('ended', function () {  
              e.target.className = 'voiceBtn play'  
            }, false);
          }  
          
        })
      }else{//点的是同一段文字  暂停 播放 
          if(audio.paused){
              audio.play();
              e.target.className = 'voiceBtn pause'
              
          }else{ 
              audio.pause();
              e.target.className = 'voiceBtn play' 
          }
      }
      
    }

至此,经过测试发现问题完美解决。
ps:采用第二种方法测试中发现没有声音,但是使用耳机可以进行播放,感觉很疑惑,后来发现是由于测试使用的ios手机开启了静音模式

举报

相关推荐

0 条评论