微信小程序audio组件在ios端无法播放怎么解决

今天小编给大家分享一下微信小程序audio组件在ios端无法播放怎么解决的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

在右玉等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供网站设计、成都网站制作 网站设计制作按需求定制制作,公司网站建设,企业网站建设,成都品牌网站建设,全网整合营销推广,外贸网站制作,右玉网站建设费用合理。

解决方法： 给 audio 组件绑定点击事件，手动触发播放暂停方法。

代码片段：

wxml文件

    
    
    
    
           
      
         
      未找到通话录音
    

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",
  }

以上就是“微信小程序audio组件在ios端无法播放怎么解决”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。