解决方法: 给 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端播放内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

微信小程序audio组件在ios端无法播放的解决办法的更多相关文章

  1. 如何查看浏览器对html5的支持情况

    这篇文章主要介绍了如何查看浏览器对html5的支持情况,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 微信小程序“圣诞帽”的实现思路详解

    这两天朋友圈被圣诞帽刷屏,下面通过本文给大家分享微信小程序“圣诞帽”的实现思路详解,需要的朋友参考下吧

  3. swift – 有没有办法结合开关和包含?

    假设我有三个包含扩展的集合:和一个简单的枚举:现在我想要做的是实现一个函数,该函数根据传递给它的字符串返回FileType选项,哪个集合包含它:它应该按预期工作,但我想知道是否有一种方法将if语句转换为一个switch语句,尤其是在使用枚举时,switch语句是更好的选择避免错误.如果使用switch语句无法实现,我也会感谢任何优雅的替代方案.我认为你的整个问题是你试图为每种类型维护3个独立集合,而不是直接将它们连接到给定的文件类型:

  4. 在Android浏览器中使用HTML5播放音频

    我想在Android浏览器中播放音频,使用html5标签.它在iPhone浏览器中运行良好,但在Android中不行.我正在使用Android虚拟设备4.0.3.有谁知道为什么?

  5. Android模拟器声音 – ubuntu

    使用Ubuntu10.0464位进行Android开发,一切顺利,除了声音.我使用-audio选项和-audio-out使用alsa作为后端参数,但没有运气.任何的想法?注意命令行“-no-audio”选项的替代方法是调整AVD管理器中的Android虚拟设备,并在“硬件”下添加“音频播放支持:否”和“音频录制支持:否”.通过这些更改,我可以从Eclipse启动模拟器并在其中运行我的应用程序.

  6. android – 三星设备上的AcousticEchoCanceler无法正常工作

    解决方法试试这些:

  7. 给定Android音乐播放列表名称,如何找到播放列表中的歌曲?

    可以通过MediaStore.Audio.Playlists.EXTERNAL_CONTENT_URI上的查询找到播放列表名称然后查看MediaStore.Audio.PlaylistsColumns.NAME列.还有一个数据列,MediaStore.Audio.PlaylistsColumns._DATA,但它返回null.歌曲列表(MediaStore.Audio.Media.EXTERNAL

  8. android – 我想阻止我的音乐播放器应用程序每次应用程序启动时扫描目录中的音频文件.我怎样才能做到这一点?

    我想阻止我的音乐播放器应用程序在每次应用程序启动时扫描目录中的音频文件.我怎样才能做到这一点?我一直在使用以下代码来扫描音频文件.我希望应用程序只在有新文件时进行扫描.因为如果我每次都扫描整张SD卡,那么启动应用程序需要花费太多时间.请帮帮我解决方法无需将所有歌曲保留在本地应用列表中.要显示mp3list,您可以使用带限制的内容提供者光标列表适配器查询(逐页滚动查询)要直接搜索使用contentp

  9. android – 如何通过MediaRecorder.start()来静音“嘟嘟”?

    解决方法虽然我来不及回答它.它仍然可以帮助所有人都在谷歌搜索同样的问题.在开始媒体记录器之前添加以下两行代码..它会静音手机声音..启动录音机后等待一到两秒钟并取消静音,你可以使用以下可运行的…

  10. android – 如何使用MediaStore.Audio.Albums.ALBUM_ART显示专辑封面?

    我正在尝试构建一个MP3播放器,我希望ImageView能够显示各个歌曲的专辑封面.我尝试了以下,但它不起作用.当我尝试播放歌曲时,我得到的只是ImageView中的空白屏幕.解决方法这是我如何获得一首歌的专辑封面:albumId指的是该歌曲的MediaStore.Audio.Media.ALBUM_ID.如果您正在寻找特定歌曲的专辑封面(而不是专辑列表),据我所知,这是一个两阶段的过程,因为AL

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部