记一下小程序开发遇到过的坑—音频1

小程序在设置播放音频功能的时候,一般是需要从后台接口那里获取到音频存储的地址,当需要使用到音频的时候再从该地址加载获取。(音频存在服务器上,音频所在服务器的地址存在数据库里。)

在上述这个过程中,,需要用到小程序的两个API,一个是wx.request,另一个是innerAudioContext。前者用于取地址,后者用于加载音频。具体过程如下:

步骤一:

//在page外面首先定义一个音频对象(innerAudioContext,
//小程序官方给出的最新对象),给它命名myAudio
const myAudio = wx.createInnerAudioContext();

innerAudioContext里有一些属性,集体可以在微信公众平台上看到。innerAudioContext的src属性就是用来加载我们需要播放的音频地址。

在page的data里设置一个audiosrc用来保存音频地址。

Page({
  /* 页面的初始数据 */
  data: {
  	audiosrc:'',   //在本界面中可以保存音频地址。
  }

步骤二:
在onLoad函数中使用wx.request调用后台接口,获取音频地址。记一下小程序开发遇到过的坑—音频1
第一个红框框是接收后台返回的地址,你也可以将两个框框组合在一起,省去中间的转换赋值过程。小程序对于data中的赋值需要通过this.setData({})函数,又因为在success{}中this所指不是该界面,所以得在wx.request外面设置一个var that =this,这样,that.setData设置初始值就能起效果了。

步骤三:
经过上述操作,在本界面的data中你就已经将音频地址保存在audiosrc中了,当你需要使用该音频的时候,只需要在触发事件中将audiosrc赋值给myAudio.src,然后调用myAudio.play(),就可以播放音频了。

audioPlay:function(){
	myAudio.src=this.data.audiosrc;  //音频对象赋地址
	myAudio.play(); //播放
}
audioPause:function(){
	myAudio.pause();  //暂停播放
}

在第一次用音频的时候,我遇到了一个很容易被忽略的坑,后台在往服务器上存音频的时候给音频地址重命名的时候在地址中间存了个小数点".",这样的情况下,开发者工具上是能够正常播放音频的,但在大部分真机上,因为微信将第一个小数点后面的都认成类型所以他识别不出来,音频不能正常播放。

需要注意是,IOS在静音状态下不能播放音频,可以在onload函数里加

//这边用于解决ios静音状态下播放音频没声音的情况
wx.setInnerAudioOption({
  obeyMuteSwitch:false
});