解決方法： 給 audio 元件繫結點選事件，手動觸發播放暫停方法！

程式碼片段：

wxml檔案

<!-- 判斷是語音通話，有通話記錄，通話描述不包含'未接' -->
<view class="reference"
    wx:if="{{itemList.activity_type === 'phone' && itemList.activity_reference_id && tool.indexOf(itemList.comment,'未接') === -1 }}">
    <!-- 語音播放 -->
    <van-button class="ref-btn" wx:if="{{audioResourceMaps[itemList.activity_reference_id] === undefined}}"
      loading="{{itemList.activity_reference_id === currentGettingReferenceId}}" icon="play" type="info" plain
      data-refe
 
rence-id="{{itemList.activity_reference_id}}" bindtap="getReference">
    </van-button>
    <view wx:else class="audio-box">
        <!-- 語音播放暫停 -->   
      <van-button class="ref-btn" wx:if="{{audioResourceMaps[itemList.activity_reference_id]}}"
      data-reference-id="{{itemList.activity_reference_id}}"
        icon="pause" type="info" plain bindtap="pauseAudio"/>
        <!-- 點選沒有通話錄音 --> 
      <span wx:else class="no-audio-text">未找到通話錄音</span>
    </view>
</view>

wxss檔案

.reference {
  margin-top: 20rpx;
  height: 100%;
  padding: 5rpx;
  box-sizing: border-box;
}

.ref-btn {
  width: 80rpx;
  height: 80rpx;
  display: flex;
}

.ref-btn button {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

檔案

/**
   * 元件的初始資料
   */
  data: {
    currentGettingReferenceId: null,//正在播放的音訊id
    audioResourceMaps: {},//點選過的音訊列表
    isPause:false,// 是否暫停
  },/**
   * 元件的生命週期 
   */
  lifetimes: {
    attached: function () {
      // 因為是子元件 所以要在這裡獲取例項
      this.audioContext = wx.createInnerAudioContext();
    },detached: function () {
      // 停止播放
      this.stopAudio()
      // 在元件例項被從頁面節點樹移除時執行
    },},methods: { 
    // 獲取錄音
    getReference(e) {
      let id = e.target.dataset.referenceId
      if(id != this.data.currentGettingReferenceId){
        this.stopAudio()
      }
      this.setData({
        currentGettingReferenceId:id
      })
      // 點選獲取錄音url的介面。 介面請求根據自己的封www.cppcns.com
 
裝來寫
      WXAPI.getResourceUrl(
        `/conversation/conversationsession/${id}/`,{
          data_type: 'all',}).then(({resource_url}) => {
          console.log('音訊地址====',resource_url,)
        let url = resource_url && resource_url.indexOf('https://') > -1? encodeURI(resource_url) : null
        this.data.audioResourceMaps[id] = url;
        if(resource_url) this.playAudio(id,url)
        this.setData({
          audioResourceMaps: this.data.audioResourceMaps
        })
        console.log('播放過的列表=====',this.data.audioResourceMaps)
      }).catch(function (e) {
        console.log(e)
      })
    },// 暫停
    pauseAudio(){
      this.setData({
        isPause: !this.data.isPause
      })
      let id = this.data.currentGettingReferenceId
      console.log(id,'播放暫停的id')
      const innerAudioContext = this.audioContext
      if(this.data.isPause){
        innerAudioContext.pause()
        console.log('暫停播放')
      }else{
        innerAudioContext.play()
        console.log('繼續播放')
      }
    },// 停止播放
    stopAudio(){
      const innerAudioContext = this.audioContext
      innerAudioContext.stop()
      let obj = this.data.audioResourceMaps
      for(let item in obj){
        delete obj[item]
      }
      // 停止播放就要把播放列表id對應的音訊地址做清空處理
      this.setData({
        audioResourceMaps: obj,currentGettingReferenceId:null
      })
      console.log('停止播放')
    },// 播放
    playAudio(id,url) {
      const innerAudioContext = this.audioContext
      console.log(url,'音訊的地址')
 www.cppcns.com     if(url){
        innerAudioContext.src = url
        innerAudioContext.play()
        innerAudioContext.onPlay(() => {
          console.log('開始播放')
        })
        innerAudioContext.onTimeUpdate(() => {
          console.log(innerAudioContext.duration,'總時長')   
          console.log(innerAudioContext.currentTime,'當前播放進度')
        })
        setTimeout(() => {
          console.log(innerAudioContext.duration,'當前播放進度')
        },500)
        innerAudioContext.onEnded(() => {
          let obj = this.data.audioResourceMaps
          for(let item in obj){
            delete obj[item]
          }
          this.setData({
            audioResourceMaps: obj,currentGettingReferenceId:null
          })
          console.log('播放完畢')
        })
        innerAudioContext.onError((res) => {
          console.log(res.errMsg)
          console.log(res.errCode)
        })
      }
    }

效果圖

⚠️微信小程式中使用vant，必須要在.json 檔案中引用 不然標籤不會顯示哦

我是在app.json檔案引得 全www.cppcns.com局可用

"usingComponents": {
    "van-button": "@vant/weapp/button/index","van-icon": "@vant/weapp/icon/index",}

官網文件：developers.weixin.qq.com/miniprogram…

總結

到此這篇關於微信小程式audio元件在ios端無法播放解決的文章就介紹到這了,更多相關小程式audio元件ios端播放內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！