微信小程序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端播放内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序 audio 组件实例详解

    音频播放已经封装的很好!只需配合属性设置即可! (method和data配合使用) 主要属性: wxml <audio action="{{action}}" src='http://sc1.111ttt.com/2016/1/09/26/202261732256.mp3' poster= 'http://avatar.csdn.net/E/3/9/1_u014360817.jpg' controls="true" name="钢琴曲" a

  • 微信小程序使用audio组件播放音乐功能示例【附源码下载】

    本文实例讲述了微信小程序使用audio组件播放音乐功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 复制代码 代码如下: <audio src="{{audioSrc}}" poster="{{audioPoster}}" name="{{audioName}}" author="{{audioAuthor}}" controls></audio> ② ind

  • 微信小程序audio组件在ios端无法播放的解决办法

    解决方法: 给 audio 组件绑定点击事件,手动触发播放暂停方法! 代码片段: wxml文件 <!-- 判断是语音通话,有通话记录,通话描述不包含'未接' --> <view class="reference" wx:if="{{itemList.activity_type === 'phone' && itemList.activity_reference_id && tool.indexOf(itemList.comme

  • 微信小程序 常见问题总结(4058,40013)及解决办法

    微信小程序 常见问题: 一:项目结构 微信小程序项目结构主要有四个文件类型,如下 WXML (WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构.内部主要是微信自己定义的一套组件. WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式, js 逻辑处理,网络请求 json 小程序设置,如页面注册,页面标题及tabBar. 注意:为了方便开发者减少配置项,规定描述页面的这四个文件必须具有

  • 微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)

    1.顶端固定 核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;"> ...... </view> 最终效果图: 2.底端固定 核心代码如下: <!-- 底部固定 --> <view class="page__hd" style="position:fixed; bottom:0;width: 75

  • 微信小程序 audio音频播放详解及实例

     微信小程序 audio音频播放 audio audio为音频组件,我们可以轻松的在小程序中播放音频. 属性名 类型 默认值 说明 id String   video 组件的唯一标识符, src String   要播放音频的资源地址 loop Boolean false 是否循环播放 controls Boolean true 是否显示默认控件 poster String   默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 name

  • 微信小程序swiper组件实现抖音翻页切换视频功能的实例代码

    微信小程序用swiper组件实现仿抖音短视频上下划动整页切换视频功能demo 利用swiper组件可简单快速编写仿抖音短视频的功能  自动播放当前页视频  翻页停止播放当前页视频 并自动播放下页视频 有其他需求也可用 cover-view 添加 收藏 点赞 评论等功能 效果图: video官方介绍: https://developers.weixin.qq.com/miniprogram/dev/component/video.html swiper官方介绍: https://developer

  • 微信小程序  audio音频播放详解及实例

     微信小程序 audio音频播放 audio audio为音频组件,我们可以轻松的在小程序中播放音频. 属性名 类型 默认值 说明 id String   video 组件的唯一标识符, src String   要播放音频的资源地址 loop Boolean false 是否循环播放 controls Boolean true 是否显示默认控件 poster String   默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 name

  • 基于angular实现模拟微信小程序swiper组件

    这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组件,就可以在写界面的时候省不少时间和代码,轮播图片跟可滑动列表都可以用.导致现在回来写angular项目时也想整一个这样的组件出来,本文就将使用angular的组件能力和服务能力完成这么一个比较通用,耦合度较低的swiper出来. 首先要选择使用的技术,要实现的是与界面打交道的东西,自然是实现成一个

  • 微信小程序 swiper组件轮播图详解及实例

    微信小程序 swiper组件轮播图 照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml <!--index.wxml--> <swiper class="swiper" indicator-dots="t

  • 微信小程序 swiper组件详解及实例代码

    微信小程序 swiper组件 常用属性: 效果图: swiper.wxml添加代码: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}} " bindchange="bindchangeTag"> <block wx

随机推荐