위 챗 애플 릿 audio 구성 요소 가 ios 에서 재생 할 수 없 는 해결 방법

해결 방법: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-reference-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%;
}

js 파일

/**
   *        
   */
  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   。              
      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, '     ')
      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,'   ')   
          console.log(innerAudioContext.currentTime,'      ')
        }, 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 파일 에서 가 져 왔 습 니 다.  전역 사용 가능

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

홈 페이지 문서:developers.weixin.qq.com/miniprogram..
총결산
위 챗 애플 릿 audio 구성 요소 가 ios 에서 재생 할 수 없 는 해결 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 애플 릿 audio 구성 요소 ios 에서 재생 되 는 내용 은 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 지원 바 랍 니 다!