微信小程序mpvue播放音频

API

播放音频

wx.createInnerAudioContext() : 创建内部 audio 上下文 InnerAudioContext 对象。

InnerAudioContext对象

src : 音频资源的地址
duration : 当前音频的长度（单位 s）。只有在当前有合法的 src 时返回（只读）
currentTime : 当前音频的播放位置（单位 s）。只有在当前有合法的 src 时返回，时间保留小数点后 6 位（只读）

---

InnerAudioContext.play() : 播放
InnerAudioContext.pause() : 暂停。暂停后的音频再播放会从暂停处开始播放
InnerAudioContext.stop() : 停止。停止后的音频再播放会从头开始播放。
InnerAudioContext.seek(number position) : 跳转到指定位置

---

InnerAudioContext.onCanplay(function callback) : 监听音频进入可以播放状态的事件。但不保证后面可以流畅播放
InnerAudioContext.offCanplay(function callback) : 取消监听音频进入可以播放状态的事件
InnerAudioContext.onTimeUpdate(function callback) : 监听音频播放进度更新事件
InnerAudioContext.onEnded(function callback) : 监听音频自然播放至结束的事件
InnerAudioContext.destroy() : 销毁当前实例

滑动选择器

value : 当前取值
step : 步长，取值必须大于 0，并且可被(max - min)整除
block-size : 滑块的大小，取值范围为 12 - 28
block-color : 滑块的颜色
backgroundColor : 背景条的颜色
activeColor : 已选择的颜色

---

bindchange : 完成一次拖动后触发的事件，event.detail = {value: value}

代码

  <div class="audio">
    <div class="slider">
      <div class="time">
        <span class="running-time">{{nowTime}}</span>
        <span class="total-time">{{totalTime}}</span>
      </div>
      <slider block-size="14" block-color="#ffad36" backgroundColor="#d8d8d8" activeColor="#ffad36" @change="sliderChange" step="1" :value="sliderProgress"/>
    </div>
    <div class="operation">
      <image class="jump-back" @click="hanlerJump(-15)" src="../../static/img/jump-back.png"/>
      <image class="upper" src="../../static/img/upper.png"/>
      <image class="play" @click="hanlerPaly" :src="playImg"/>
      <image class="next" src="../../static/img/next.png"/>
      <image class="jump-pre" @click="hanlerJump(15)" src="../../static/img/jump-pre.png"/>
    </div>
  </div>

  data () {
    return {
      innerAudioContext: null, // 音频对象
      isPaly: false, // 是否播放
      sliderProgress: 0, // 滑动控制条进度
      totalTime: 0, // 音频总时长
      nowTime: 0, // 音频当前播放时长
      playImg: '../../static/img/play.png' // 播放或者暂停图片
    }
  },

  created () {
    // 创建音频播放对象
    this.innerAudioContext = wx.createInnerAudioContext()
    // 设置音频播放来源
    this.innerAudioContext.src = 'https://xxx.mp3'
    // 音频进入可以播放状态
    this.innerAudioContext.onCanplay((res) => {
      this.isPaly = true
    })
    // 音频自然播放结束事件
    this.innerAudioContext.onEnded((res) => {
      // 当音频播放结束后，将滑动条滑到末尾
      this.sliderProgress = 100
      this.isPaly = false
    })
    // 音频播放中
    this.innerAudioContext.onTimeUpdate((res) => {
      let duration = this.innerAudioContext.duration
      // 获取音频播放时长，单位s，保留小数点后六位，转为分钟
      this.totalTime = secToTime(duration)
      let currentTime = this.innerAudioContext.currentTime
      // 设置当前音频播放位置
      this.nowTime = secToTime(currentTime)
      // 设置滑动条位置，小数计算不精确，转为整数计算
      this.sliderProgress = (currentTime * 1000000) / (duration * 1000000) * 100
    })
  },
  destroyed () {
    this.innerAudioContext.destroy()
  },
  methods: {
    // 播放暂停
    hanlerPaly () {
      this.isPaly = !this.isPaly
    },
    // 快进快退
    hanlerJump (num) {
      this.innerAudioContext.seek(this.innerAudioContext.currentTime + num)
    },
    // 滑动条拖动
    sliderChange (e) {
      let duration = this.innerAudioContext.duration
      let currentTime = duration * e.target.value / 100
      // 音频快进
      this.innerAudioContext.seek(currentTime)
      // 设置滑动条位置
      this.sliderProgress = (currentTime * 1000000) / (duration * 1000000) * 100
      this.isPaly = true
    }
  },
  watch: {
    isPaly (val, oldVal) {
      this.innerAudioContext.offCanplay()
      if (val) {
        this.playImg = '../../static/img/stop.png'
        this.innerAudioContext.play()
      } else {
        this.playImg = '../../static/img/play.png'
        this.innerAudioContext.pause()
      }
    }
  },

import {secToTime} from '@/utils'

utils - index.js

/**
 * 时间秒数格式化
 * @param s 时间戳（单位：秒）
 * @returns {*} 格式化后的时分秒
 */
export function secToTime (s) {
  let t = ''
  if (s > -1) {
    let min = Math.floor(s / 60) % 60
    let sec = s % 60

    if (min < 10) {
      t = '0'
    }
    t += min + ':'
    if (sec < 10) {
      t += '0'
    }
    t += sec.toFixed(2).split('.')[0]
  }
  return t
}

export default {
  secToTime,
}

文档

InnerAudioContext
wx.createInnerAudioContext
slider

网站导航

网站导航