H5开发中audio在ios手机上的播放兼容问题第二段拿到MP3地址去请求语音.

1.开发背景

需求:

页面中的话术文本需要支持语音播放

方案:

话术中部分文字是客户名字,产品信息,这些属于变量,所以需要通过第三方合成语音获取到语音需要发送两端请求;
第一段请求发送话术字符串到第三方,第三方返回MP3语音地址; 第二段拿到MP3地址去请求语音.

举例:

// 大多手机上页面audio播放可以主动派发
// 但是苹果6,系统11.0.3不可以主动派发
// 比如这种场景

setTimeout(() => {
  this.myAudio.play();
}, 5000);

// 苹果6必须要通过用户交互才能播放,不可以自己主动冒出来,必须要把
// this.myAudio.play();必须放在事件函数里面才能起作用

总结:

一开始方案是用户点击播放就去请求语音,请求成功后在audio的canplay事件里面执行this.myAudio.play(), 不是把this.myAudio.play()放在点击事件函数里面,发现苹果6手机播放不了;

 // 苹果6不能完成播放
  doCanpLay() {
    this.myAudio.play();
  }

解决方法:
后来把this.myAudio.play()放在点击事件里面解决了不能播放的问题

 // 苹果6可以完成播放
  doClick() {
    if (this.myAudio != 4) {
      this.toastShow = true;
      return;
    }
    this.myAudio.play();
  },