微信小程序音频IOS无法播放问题总结

Soarkey 发布于2019-08-23 12:39 / 3194人阅读

摘要：问题微信小程序，将文字转换为语音后，使用音频进行播放。在安卓手机下可以正常播放，在下不行。需要对接口的文本字符串参数进行编码比如哈哈哈哈哈哈哈哈哈没有做编码，直接上文本的，也会出现安卓行不行的情况。

【问题】

微信小程序，将文字转换为语音后，使用音频进行播放。在安卓手机下可以正常播放，在IOS下不行。

【环境】

微信小程序库版本2.3.0
百度语音合成服务

【解决方法】

正确代码：

//创建一个音频实例
const myaudio = wx.createInnerAudioContext();

//设置obeyMuteSwitch: false（不遵循系统静音开关，即使用户打开了静音开关，也能继续发出声音）
//设置autoplay: true（自动开始播放）
if (wx.setInnerAudioOption) {
  wx.setInnerAudioOption({
    obeyMuteSwitch: false,
    autoplay: true
  })
}else {
  myaudio.obeyMuteSwitch = false;
  myaudio.autoplay = true;
}

//监听各个阶段
myaudio.onCanplay(() => {
  console.log("可以播放");
});
myaudio.onPlay(() => {
  console.log("监听到音频开始播放");
});
myaudio.onEnded(() => {
  console.log("音频自然播放结束事件");
});
myaudio.onStop(() => {
  console.log("音频停止事件");
});
myaudio.onError((res) => {
  console.log(res.errMsg);
  console.log(res.errCode);
});
myaudio.onWaiting((res) => {
  console.log("音频加载中事件，当音频因为数据不足，需要停下来加载时会触发")
});


//设置播放链接
myaudio.src = "https://tsn.baidu.com/text2audio?lan=zh&ctp=1&cuid=abcdxxx&tok=24.b63*************************************.1543030920.282335-11522973&tex=" + encodeURIComponent(encodeURIComponent("哈哈哈哈哈哈哈哈哈")) + "&vol=5&per=0&spd=5&pit=5&aue=324.b6306a3dff68e153a0d5656b3a78bd5e.2592000.1543030920.282335-11522973";

//播放
myaudio.play();

这样，在安卓和IOS下都可以正常播放了。

【问题总结】

为什么总是播放不了？注意下面两点：

1、这个播放链接返回的必须是格式正确的音频文件

所以如果换一个链接就能播放了，那可能就说明你原来的链接返回了错误的音频格式。

原本我的播放链接是：

myaudio.src = "https://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&text=" + encodeURIComponent("哈哈哈哈哈哈哈哈哈");

这个tts.baidu.com和tsn.baidu.com长得非常像，为什么一开始用的不是tsn？是因为在网上搜索到的好多案例都是用的tts，而且tsn需要token参数，这个参数要么需要从百度AI开放平台手动获取，要么需要调用获取token的接口，而这个接口又不支持浏览器跨域，因此需要从服务端获取token或者每隔30天手动输入更新，我嫌麻烦，所以一开始先用了tts。

tts在安卓下确实可以正常播放，可以看到Console中依次打印出了：

监听到音频开始播放
音频加载中事件，当音频因为数据不足，需要停下来加载时会触发
可以播放
音频自然播放结束事件

但是在IOS下就无法播放了，Console中依次打印出了：

音频加载中事件，当音频因为数据不足，需要停下来加载时会触发
INNERERRCODE:-11850, ERRMSG:操作停止
10002

根据官方的说法，应该是因为返回的音频格式IOS不支持。（https://developers.weixin.qq....）如果返回的音频格式正确，是可以正常播放的。

ps：后来查了一下发现tts这个接口应该只是他们内部demo地址，所以还是使用正式的tsn吧。

2、需要对tsn接口的文本字符串参数进行编码
比如： encodeURIComponent(encodeURIComponent("哈哈哈哈哈哈哈哈哈"));

没有做编码，直接上文本的，也会出现安卓行IOS不行的情况。

GPU云服务器云服务器 ios webrtc 音频播放微信小程序支付微信小程序部署微信小程序搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98904.html

ios微信下vue项目组件切换并自动播放音频的解决方案

摘要：最近在做一个英语答题项目项目需求是通过答题取的成绩答题的题型是分为听音选图看图选词和填空题项目总共分为了个页面开始页答题页和结束页面答题页关于每种题型我做了相应的组件每次切换题目的时候显示对应的的组件要求听音选图的时候会自动播放音频惯例下的最近在做一个英语答题项目 , 项目需求是通过答题取的成绩 , 答题的题型是分为 , 听音选图 , 看图选词 , 和填空题 . 项目总共分为了3个页...

LinkedME2016 2019-08-26 11:42 评论0 收藏0
开发 | 微信小程序audio音频播放组件+api_wx.createAudioContext

摘要：引言是微信小程序中的音频组件，可以轻松实现小程序中播放停止音频等自定义动作。引言： audio是微信小程序中的音频组件，可以轻松实现小程序中播放/停止音频等自定义动作。附上微信小程序audio组件的相关属性说明：https://mp.weixin.qq.com/debu... 本次将通过小程序audio的 poster、name、author、src、id、controls 属性，...

gekylin 2019-08-15 14:01 评论0 收藏0
微信小程序调研文档

摘要：关于微信小程序之前只是听说，并没有引起我太大的兴趣。刚好团队内部有个需求需要微信小程序。暂时没有上线经历，没办法给出这个时间微信小程序的代码包大小当前限制是。关于微信小程序之前只是听说，并没有引起我太大的兴趣。周一被小程序刷屏，然后就顺手搜索了解了一下。发现小程序已经火遍了整个程序员圈子。刚好团队内部有个需求需要微信小程序。就紧急对微信小程序进行了调研，阅读过开发者文档后总结了以下的...

kidsamong 2019-08-20 13:44 评论0 收藏0