記錄微信小程序中的遇到的問題，ios不支持gif,ios下語音播放

最近是在做一些微信小程序的工作，在後臺中的代碼沒有什麼問題的時候然而在小程序中我去一次次的踩了很多的坑，就比如這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也是不支持的，所以我們爲了適配不得不使用兩種方式來讓這個組件給工作起來。