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

功能

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

实现思路

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

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

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

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

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

代码实现

初始话音频:

js 复制代码
 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中初始化一次,防止多次调用事件,导致暂停和取消等功能不可用

js 复制代码
 onLoad(options) {
    this.initAudioEvent();
  },

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

js 复制代码
  onUnload() {
    this.innerAudioContext.destroy();//销毁这个实例
  }

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

播放音频:

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

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

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

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

相关推荐
毕设源码-钟学长2 小时前
【开题答辩全过程】以 微信小程序的医院挂号预约系统为例,包含答辩的问题和答案
微信小程序·小程序
bmy-happy9 小时前
实验2 天气预报
微信小程序·小程序
青青子衿越18 小时前
微信小程序web-view嵌套H5,小程序与H5通信
前端·微信小程序·小程序
乔公子搬砖18 小时前
小程序开发提效:npm支持、Vant Weapp组件库与API Promise化(八)
前端·javascript·微信小程序·js·promise·vagrant·事件绑定
KlDMEO2 天前
DrissionPage 能控制火狐或edge吗
其他·微信小程序·小程序
柯北(jvxiao)2 天前
爆肝三周,我终于上线了自己的第一个小程序
微信小程序·小程序
lumi.2 天前
2.3零基础玩转uni-app轮播图:从入门到精通 (咸虾米总结)
java·开发语言·前端·vue.js·微信小程序·uni-app·vue
毕设源码-赖学姐2 天前
【开题答辩全过程】以 基于Springboot+微信小程序的网上家教预约系统的设计与实现-开题为例,包含答辩的问题和答案
spring boot·后端·微信小程序
码海扬帆:前端探索之旅2 天前
小程序开发指南(四)(UI 框架整合)
ui·微信小程序·小程序
咸虾米_2 天前
解决getLocation获取当前的地理位置,报错:getLocation:fail auth deny及方法封装
微信小程序·uniapp·用户授权api