最近是在做一些微信小程序的工作，在后台中的代码没有什么问题的时候然而在小程序中我去一次次的踩了很多的坑，就比如这gif图片不支持在ios端播放，ios中的语音的播放的问题
<!-- 语音 --->
<cover-view wx:if="{{media.fileType =='aac'}}" wx:key="this" data-indexid="{{item_id}}" data-audiomedia="{{note.media}}" data-mediaid="{{media.id}}" class="audioclass" bindtap="audioplay" data-audio="{{media.public_url}}" >
<!--默认状态--->
<cover-image class="audioImg" style="" src="{{isactive==item_id?'../../images/audioImgRun.gif':'../../images/audio.png'}}" transform="{{transform}}"></cover-image>
<!-- <cover-view class="audioText">{{isactive==item_id?audiotime:''}} </cover-view> -->
<cover-view class="audioText">{{note.voiceTime!=null? note.voiceTime:'0'}}s </cover-view>
</cover-view>
<image wx:else bindtap="viewImage" data-index="{{index}}" data-wxmedia='{{note.media}}' data-mediaUrl='{{note.mediaUrl}}' data-Url='{{media.public_url}}' mode='aspectFill' src="{{media.public_url}}" class='note-media-2'></image>
<!-- </view> -->
</view>
</view>
<view>
</view>
<view wx:if="{{note.domains.length}}" class='clear-float'>
<view class='note-domain' wx:for="{{note.domains}}" wx:for-item="domain" wx:key="domain">
{{domain.abbreviation}}: {{domain.name}}
</view>
</view>
<!-- <view class='note-send-time'>
<text>{{note.sendTime}}</text>
</view> -->
</view>
<!---不使用gif图片，因为gif图片在使用的时候ios不支持，使用图片循环播放---->
<!-- 语音 --->
<view wx:if="{{media.fileType =='aac'}}" class="audioView">
<cover-view wx:if="{{media.fileType =='aac'}}" wx:key="this" data-indexid="{{item_id}}" data-audiomedia="{{note.media}}" data-mediaid="{{media.id}}" class="audioclass" bindtap="audioplay" data-audio="{{media.public_url}}" >
<!--默认状态--->
<!--默认状态--->
<!-- <cover-image class="audioImg" style="" src="{{isactive==item_id?'../../images/audioImgRun.gif':'../../images/audio.png'}}" transform="{{transform}}"></cover-image> -->
<cover-image class="audioImg" style="{{isactive==item_id?'display:none':''}}" src="../../images/audio.png"></cover-image>
<cover-view wx:if="{{isactive==item_id}}">
<cover-image wx:if="{{index_image==0}}" class="audioImg" style="" src="../../images/audio.png"></cover-image>
<cover-image wx:if="{{index_image==1}}" class="audioImg" style="" src="{{'../../images/audio1.png'}}" ></cover-image>
<cover-image wx:if="{{index_image==2}}" class="audioImg" style="" src="../../images/audio2.png"></cover-image>
<cover-image wx:if="{{index_image==3}}" class="audioImg" style="" src="../../images/audio.png"></cover-image>
<cover-view class="audioText">{{note.voiceTime!=null? note.voiceTime:'0'}}s </cover-view>
</cover-view>
<!-- <cover-view class="audioText">{{isactive==item_id?audiotime:''}} </cover-view> -->
<cover-view class="audioText">{{note.voiceTime!=null? note.voiceTime:'0'}}s </cover-view>
</cover-view>
</view> 不支持gif图片下那么我们只有更换思路，就是使用帧动画，帧动画就是让动画效果的图片所以使用了以上的方式给代替了。
const inneraudioContext =wx.createInnerAudioContext(); // 创建音频播放
//音频播放
audioplay: function (e) {
let that = e.this;
var src = e.currentTarget.dataset.audio;
var mediaid = e.currentTarget.dataset.mediaid; // 音频的ID
var indexid = e.currentTarget.dataset.indexid // 列表项ID
var media = e.target.dataset.audiomedia;
console.log(indexid)
inneraudioContext.autoplay = true;
inneraudioContext.src = src;
var res = wx.getSystemInfoSync()
if (res.platform == 'ios') {
console.log('ios')
inneraudioContext.obeyMuteSwitch = false;
wx.playBackgroundAudio({
dataUrl: src,
})
wx.onBackgroundAudioPlay((res) => {
console.log('ios音频播放')
this.setData({
isactive: indexid,
// 通过判断是不是当前的ID 如果是则后对比为true
})
speaking.call(this)
})
wx.onBackgroundAudioStop((res) => {
console.log("ios音频停止了")
clearInterval(this.timer)
this.setData({
isactive: indexid + "stop",
// index_image:1
// audiotime:''
})
})
} else {
setTimeout(() => {
inneraudioContext.play();
inneraudioContext.currentTime
inneraudioContext.onTimeUpdate(() => {
console.log(inneraudioContext.duration) //总时长
// this.setData({
// // audiotime: inneraudioContext.duration.toFixed(0)+'s',
// isactive: indexid
// })
console.log('开始播放！代码')
})
}, 500)
inneraudioContext.onPlay((res) => {
console.log('android音频播放')
this.setData({
isactive: indexid,
// 通过判断是不是当前的ID 如果是则后对比为true
})
speaking.call(this)
})
inneraudioContext.onPause((res) => {
console.log("pause")
this.setData({
isactive: indexid + "pause"
})
clearInterval(this.timer)
})
inneraudioContext.onEnded((res) => {
console.log("android音频停止了")
clearInterval(this.timer)
this.setData({
isactive: indexid + "stop",
// index_image:1
// audiotime:''
})
})
inneraudioContext.onError((res) => {
console.log(res.message)
console.log(res.errCoder)
})
clearInterval(this.timer)
}
},
function speaking() {
var _this = this
//话筒帧动画
var i = 1;
this.timer = setInterval(function () {
i = i % 4;
_this.setData({
index_image: i
})
i++;
}, 500);
}
function speaking() {
var _this = this
//话筒帧动画
var i = 1;
this.timer = setInterval(function () {
i = i % 4;
_this.setData({
index_image: i
})
i++;
}, 500);
}
动画是解决了那么如何进行对音频的使用呢：
wx.playBackgroundAudio({
dataUrl: src,
})
wx.onBackgroundAudioPlay((res) => {
console.log('ios音频播放')
this.setData({
isactive: indexid,
// 通过判断是不是当前的ID 如果是则后对比为true
})
speaking.call(this)
})
wx.onBackgroundAudioStop((res) => {
console.log("ios音频停止了")
clearInterval(this.timer)
this.setData({
isactive: indexid + "stop",
// index_image:1
// audiotime:''
})
})
需要直接使用后台播放然而在微信那边说推荐使用wx.getBackgroundAudioManager这个组件当我尝试使用这个组件时，他却
var res = wx.getSystemInfoSync()
if (res.platform == 'ios') {
this.audio = wx.getBackgroundAudioManager()
} else {
this.audio = wx.createInnerAudioContext();
}this.audio.title = "音乐文件";
this.audio.src = "本地文件地址";
this.audio.play();
在使用这个时即使加上这个文件的名字却报错一大堆在ios上，那么这上面的方式是肯定不可以的，所以我们要使用我介绍的这个方式，虽说这个api： wx.playBackgroundAudio({
dataUrl: src,
})不推荐使用但是推荐的wx.getBackgroundAudioManager的这个却不能很好的支持这个api，所以只能使用上面的方式，还有就是官方说这个wx.createInnerAudioContext在ios上是支持的实际上在ios也是不支持的，所以我们为了适配不得不使用两种方式来让这个组件给工作起来。