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
