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

近期项目中有个需求，需要点击按钮播放文字答案，然后开始了填坑之旅

首先使用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手机开启了静音模式

解决IOS下音频文件无法播放的问题相关推荐

Android 入门第九讲01-音频（本地音乐播放，暂停，继续播放，获取播放时间，快进到指定位置，变速播放，播放data/data/目录下的音频文件，播放网络歌曲）
Android 入门第九讲01-音频(本地音乐播放,暂停,继续播放,获取播放时间,快进到指定位置,变速播放,播放data/data/目录下的音频文件,播放网络歌曲) 准备 1.储存在raw文件夹 2. ...
java实现音频文件的播放
实现思路 1.首先获取音频文件的地址,然后通过IO流读取音频文件,加缓冲区,实现Player类的对象. 2.Player类主要用于播放器的初始化,以及通过它来实现一些音视频文件的播放,这个类需要手动去 ...
TextToSpeech文字转语音、文字转音频文件并播放
TextToSpeech文字转语音.文字转音频文件并播放前段时间遇到了语音读网页的需求,特地在网上找了一些资料.学习完毕后跟大家分享一下.这里是我从项目中抽取出来的代码,大家应该也基本能看清楚流程了 ...
Java 音乐播放器开发学习之——音频文件的播放
Java Sound API是javaSE平台提供底层的(low-level)处理声音接口,可以实现音频文件的播放. 其核心包括: AudioSystem AudioInputStream Audio ...
python实现语音播放_python通过wxPython打开一个音频文件并播放的方法
本文实例讲述了python通过wxPython打开一个音频文件并播放的方法.分享给大家供大家参考.具体如下: 这段代码片段使用wx.lib.filebrowsebutton.FileBrowseBut ...
解决IOS下window.open页面打不开问题
解决IOS下window.open页面打不开问题参考文章: (1)解决IOS下window.open页面打不开问题 (2)https://www.cnblogs.com/tangjiao/p/102 ...
解决iOS下拉回弹方法二
原文地址:https://segmentfault.com/a/1190000007301527 一篇解决 iOS下拉回弹的文章分享给大家.加了些注释.并且应用在vue中.再次感谢原作者. <t ...
linux 解压文件乱码,云服务器：解决linux下zip文件解压乱码问题
云服务器:解决linux下zip文件解压乱码问题原因由于zip格式并没有指定编码格式,Windows下生成的zip文件中的编码是GBK/GB2312等,因此,导致这些zip文件在Linux下解压时 ...
linux中zip文件编码错误,解决linux下zip文件解压乱码问题
原标题:解决linux下zip文件解压乱码问题解决linux下zip文件解压乱码问题原因由于zip格式并没有指定编码格式,Windows下生成的zip文件中的编码是GBK/GB2312等,因此, ...

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

解决IOS下音频文件无法播放的问题相关推荐

最新文章

热门文章