功能

功能演示参考本人开发的小程序，具体是点击开始运动之后，开始播放各动作名称及时间倒计时。用户可以参考该时间进行相应的操作。

实现思路

最初的想法是通过常见的文本转语音的功能。小程序本身提供有微信同声传译插件，但发现限制条件较多，个人开发者版的小程序无法使用。

后来就打算通过其他方式实现，本来以为这种很常见的功能会有免费版或者插件版能够实现，找了一大圈发现也没有。

像百度，腾讯，阿里这些都是需要收费使用,并且这些服务通过网络进行请求，但程序本身对反应时间有要求，所以这种方式也不大合适。

最后决定把这些时间，动作都转换为语音文件，然后使用小程序提供的语音播放功能进行开发。

这地方在后面做的时候也存在着两种解决方案（后面文章再做具体分析）。

代码实现

初始话音频：

 initAudioEvent() {
    this.innerAudioContext = wx.createInnerAudioContext(
    { 
        useWebAudioImplement: true// 默认关闭。对于短音频、播放频繁的音频建议开启此选项
    }
    );
    this.innerAudioContext.autoplay = false
    this.innerAudioContext.onStop(() => {
      //this.innerAudioContext.src = 'null.m4a'
    })
    this.innerAudioContext.onEnded(() => {
      //this.innerAudioContext.src = 'null.m4a'
    })
  },

本项目中需要主动控制文件的播放，因为未使用autoplay功能，及切换src自动播放

在onLoad中初始化一次，防止多次调用事件，导致暂停和取消等功能不可用

 onLoad(options) {
    this.initAudioEvent();
  },

在onUnload中销毁音频实例，否则有可能关闭了该页面,音频还在播放。

  onUnload() {
    this.innerAudioContext.destroy();//销毁这个实例
  }

完成以上三步，就完成了音频的初始化操作，接下来就是对音频的操作了。

播放音频：

playAudio(id) {
    this.innerAudioContext.stop();//暂停音频
    var prefix = "audio/";
    var suffix = ".mp3";
    this.innerAudioContext.src = prefix + id + suffix;//指定音频地址
    this.innerAudioContext.play();//播放音频
  },

因为是本地播放，需要指明文件的具体路径。

到此就实现了微信小程序中音频的播放功能。

下一篇将和大家继续探讨一下项目中实现音频的两种不同的解决方案。

微信小程序开发-音频播放经验分享

功能

实现思路

代码实现