微信小程序音频播放 InnerAudioContext 的用法

目录

• 1、实现思路
• 2、界面预览
• 3、界面代码
• 4、注意事项
  • 4.1  在初始化的时候需要设置一下播放倍速，不然后面的播放倍速功能可能会不生效
  •  4.2 初始化时，需要配置 InnerAudioContext.onCanplay(function callback) 监听，不然后续播放时长监听可能监听不到
  • 4.3 播放时间和进度条
• 注：其他的暂时没想到了，记录一下自己第一次写博客

 

正文

今天项目上涉及到了微信小程序播放音频功能，所以今天跟着一些教程做了个简单的播放器

回到顶部

1、实现思路

　　刚开始想着有没有现成的组件可以直接用，找到了微信的媒体组件 audio，奈何看着 1.6.0版本开始，该组件不再维护。就百度了一下，还好有另一种方式，使用 InnerAudioContext 来实现音频播放

　　

回到顶部

2、界面预览

  

 

点击播放，播放按钮改变为暂停，播放后展示进度条，可 拖动/点击 进度条实现进度控制，可设置倍速

没有UI设计，所以界面很丑，界面后续完善，功能实现就行啦😀

回到顶部

3、界面代码

WXML：

<view class="item-con">
                <block wx:for="{{audios}}" wx:index="idx" wx:item="item" wx:key="idx">
                    <view class="audio-item">
                        <view class="audio-info">
                            <text>{{index+1+"."+item.name}}</text>
                            <view wx:if="{{audioDisplay!=item.id||paused}}" class="audio-btn" bindtap="audioPlay" data-info="{{item}}">播放</view>
                            <view wx:else class="audio-btn btn-pause" bindtap="audioPause">暂停</view>
                        </view>
                        <view class="audio-control" wx:if="{{audioDisplay==item.id}}">
                            <!-- 时长 -->
                            <view class="audio-number">{{forNowTime?forNowTime:0}}s</view>
                            <slider class="audio-slider" activeColor="#5189FF" block-size="12" value="{{current}}" max="{{duration}}" step="0.01" bindchanging="audioChanging" bindchange="audioChange">
                            </slider>
                            <view class="audio-number">{{forAllTime?forAllTime:0}}s</view>
                            <!-- 倍速控制 -->
                            <view class="audio-number speed" bindtap="setSpeed">
                                x{{doubleSpeed}}
                                <view wx:if="{{doubleSpeedSet}}" class="speed-wa" catchtap="setSpeedClose"></view>
                                <view wx:if="{{doubleSpeedSet}}" class="double-speed">
                                    <view class="speed-item" catchtap="setSpeedTo" data-num="0.5">x0.5</view>
                                    <view class="speed-item" catchtap="setSpeedTo" data-num="1.0">x1.0</view>
                                    <view class="speed-item" catchtap="setSpeedTo" data-num="1.5">x1.5</view>
                                    <view class="speed-item" catchtap="setSpeedTo" data-num="2.0">x2.0</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </block>
            </view>

 

 JS

// 创建音频播放实例
const myAudio = wx.createInnerAudioContext()

Page({
  /**
   * 页面的初始数据
   */
  data: {
    audios: [{
        id: 1,
        name: "秒针",
        src: "https://sharefs.ali.kugou.com/202202121104/0639f9c2315cbb939aff741be27860ff/KGTX/CLTX001/02c4d6fefd5d899081ba45f47be48adb.mp3"
      },
      {
        id: 2,
        name: "做酒",
        src: "https://sharefs.ali.kugou.com/202202121113/38ab5022041cea53ccff0752d481f818/KGTX/CLTX001/8fa49a75490d252a624c3e1872a26261.mp3"
      },
      {
        id: 3,
        name: "好想抱住你",
        src: "https://sharefs.ali.kugou.com/202202121104/7aa9c439b799ea26ace0fee414aa9c12/KGTX/CLTX001/43f9b75efe102a48ab20131dcaa2b557.mp3"
      },
      {
        id: 4,
        name: "红尘彼岸却无她",
        src: "https://sharefs.ali.kugou.com/202202121113/59831d34060f1dfcd2a114e74879868a/KGTX/CLTX001/8a57fbfe87af1dbcac1e9115a2ff1a06.mp3"
      },
    ],
    // 音频播放控制
    audioDisplay: null, //当前播放的音频，用于显示播放时长进度条等
    forNowTime: '0', //当前播放时间
    forAllTime: '0', //总时长
    duration: 0, //总时间 秒
    current: 0, //slider当前进度
    seek: false, //是否处于拖动状态
    paused: true, //是否处于暂停状态
    doubleSpeed: 1.0, //播放倍速 默认1.0
    doubleSpeedSet: false //倍速设置小弹窗
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {// 音频播放初始化
    this.audioInit()
  },

　// 音频播放-初始化
  audioInit() {
    // 设置音频播放倍速，此处若不设置，页面上点击设置倍速就不会产生效果
    myAudio.playbackRate = 1.0
    // 播放监听
    myAudio.onPlay(() => {
      console.log('开始播放')
      console.log(myAudio.playbackRate);
    })
    // 暂停监听
    myAudio.onPause(() => {
      console.log('停止播放')
    })
    // 监听音频进入可以播放状态的事件。但不保证后面可以流畅播放，必须要这个监听，不然播放时长更新监听不会生效，不能给进度条更新值
    myAudio.onCanplay(() => {
      myAudio.duration
    })
    // 播放时长更新监听
    myAudio.onTimeUpdate(() => {
      // 监听播放进度，更新页面播放时长和进度条进度
      this.setData({
        forNowTime: parseInt(myAudio.currentTime),
        forAllTime: parseInt(myAudio.duration),
        current: myAudio.currentTime,
        duration: myAudio.duration
      })
    })
    // 播放出错监听
    myAudio.onError((res) => {
      console.log(res.errMsg)
      console.log(res.errCode)
    })
  },

  // 开始播放
  audioPlay(val) {
    console.log("点击了播放按钮", val);
    if (val) {
      // 展示当前播放音频的进度条
      this.setData({
        audioDisplay: val.currentTarget.dataset.info.id
      })
      // 设置当前播放音频的路径
      myAudio.src = val.currentTarget.dataset.info.src
    }
    // 将暂停状态赋值为false
    this.setData({
      paused: false,
    })
    // 播放
    myAudio.play()
  },

  // 暂停播放
  audioPause() {
    // 将暂停状态赋值为true
    this.setData({
      paused: true,
    })
    // 暂停
    myAudio.pause()
  },

  // 进度条改变
  audioChanging(val) {
    // 通过 seek 来更改当前播放实例的进度
    myAudio.seek(val.detail.value)
    // 界面显示滑动的时间同步改变
    this.setData({
      forNowTime: parseInt(val.detail.value)
    })
  },

  // 进度条改变完成
  audioChange(val) {
    myAudio.seek(val.detail.value)
  },

  // 点击设置倍速，弹出小弹窗
  setSpeed() {
    this.setData({
      doubleSpeedSet: true
    })
  },

  // 设置倍速的具体值
  setSpeedTo(val) {
    // 需要转换为 Number ，否则不生效
    myAudio.playbackRate = Number(val.currentTarget.dataset.num)
    // 界面同步更改并关闭小弹窗
    this.setData({
      doubleSpeed: val.currentTarget.dataset.num,
      doubleSpeedSet: false
    })
  },

  // 小弹窗关闭
  setSpeedClose() {
    this.setData({
      doubleSpeedSet: false
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    // 暂停播放
    this.audioPause()
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    // 停止播放
    this.audioPause()
    myAudio.stop()
  },
})

 

回到顶部

4、注意事项

4.1  在初始化的时候需要设置一下播放倍速，不然后面的播放倍速功能可能会不生效

 

 4.2 初始化时，需要配置 InnerAudioContext.onCanplay(function callback) 监听，不然后续播放时长监听可能监听不到

 

 

4.3 播放时间和进度条

这里播放时长和进度条为什么不用两个变量来控制

 

 因为获取到的音频长度和当前播放位置是小数形式的，我只想进度条用小数来控制，而播放时间想显示整数，所以用了4个变量，当然也有其他更好的方法，后续会改进

 

 

回到顶部

注：其他的暂时没想到了，记录一下自己第一次写博客