API
播放音頻
wx.createInnerAudioContext() : 創(chuàng)建內(nèi)部 audio 上下文 InnerAudioContext 對(duì)象啊送。
InnerAudioContext對(duì)象
src : 音頻資源的地址
duration : 當(dāng)前音頻的長(zhǎng)度（單位 s）偎痛。只有在當(dāng)前有合法的 src 時(shí)返回（只讀）
currentTime : 當(dāng)前音頻的播放位置（單位 s）停忿。只有在當(dāng)前有合法的 src 時(shí)返回，時(shí)間保留小數(shù)點(diǎn)后 6 位（只讀）
InnerAudioContext.play() : 播放
InnerAudioContext.pause() : 暫停啼辣。暫停后的音頻再播放會(huì)從暫停處開始播放
InnerAudioContext.stop() : 停止。停止后的音頻再播放會(huì)從頭開始播放。
InnerAudioContext.seek(number position) : 跳轉(zhuǎn)到指定位置
InnerAudioContext.onCanplay(function callback) : 監(jiān)聽音頻進(jìn)入可以播放狀態(tài)的事件眶痰。但不保證后面可以流暢播放
InnerAudioContext.offCanplay(function callback) : 取消監(jiān)聽音頻進(jìn)入可以播放狀態(tài)的事件
InnerAudioContext.onTimeUpdate(function callback) : 監(jiān)聽音頻播放進(jìn)度更新事件
InnerAudioContext.onEnded(function callback) : 監(jiān)聽音頻自然播放至結(jié)束的事件
InnerAudioContext.destroy() : 銷毀當(dāng)前實(shí)例
滑動(dòng)選擇器
value : 當(dāng)前取值
step : 步長(zhǎng)，取值必須大于 0梯啤，并且可被(max - min)整除
block-size : 滑塊的大小竖伯，取值范圍為 12 - 28
block-color : 滑塊的顏色
backgroundColor : 背景條的顏色
activeColor : 已選擇的顏色
bindchange : 完成一次拖動(dòng)后觸發(fā)的事件，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, // 音頻對(duì)象
isPaly: false, // 是否播放
sliderProgress: 0, // 滑動(dòng)控制條進(jìn)度
totalTime: 0, // 音頻總時(shí)長(zhǎng)
nowTime: 0, // 音頻當(dāng)前播放時(shí)長(zhǎng)
playImg: '../../static/img/play.png' // 播放或者暫停圖片
}
},
created () {
// 創(chuàng)建音頻播放對(duì)象
this.innerAudioContext = wx.createInnerAudioContext()
// 設(shè)置音頻播放來源
this.innerAudioContext.src = 'https://xxx.mp3'
// 音頻進(jìn)入可以播放狀態(tài)
this.innerAudioContext.onCanplay((res) => {
this.isPaly = true
})
// 音頻自然播放結(jié)束事件
this.innerAudioContext.onEnded((res) => {
// 當(dāng)音頻播放結(jié)束后，將滑動(dòng)條滑到末尾
this.sliderProgress = 100
this.isPaly = false
})
// 音頻播放中
this.innerAudioContext.onTimeUpdate((res) => {
let duration = this.innerAudioContext.duration
// 獲取音頻播放時(shí)長(zhǎng)七婴，單位s祟偷，保留小數(shù)點(diǎn)后六位，轉(zhuǎn)為分鐘
this.totalTime = secToTime(duration)
let currentTime = this.innerAudioContext.currentTime
// 設(shè)置當(dāng)前音頻播放位置
this.nowTime = secToTime(currentTime)
// 設(shè)置滑動(dòng)條位置打厘，小數(shù)計(jì)算不精確修肠，轉(zhuǎn)為整數(shù)計(jì)算
this.sliderProgress = (currentTime * 1000000) / (duration * 1000000) * 100
})
},
destroyed () {
this.innerAudioContext.destroy()
},
methods: {
// 播放暫停
hanlerPaly () {
this.isPaly = !this.isPaly
},
// 快進(jìn)快退
hanlerJump (num) {
this.innerAudioContext.seek(this.innerAudioContext.currentTime + num)
},
// 滑動(dòng)條拖動(dòng)
sliderChange (e) {
let duration = this.innerAudioContext.duration
let currentTime = duration * e.target.value / 100
// 音頻快進(jìn)
this.innerAudioContext.seek(currentTime)
// 設(shè)置滑動(dòng)條位置
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
/**
* 時(shí)間秒數(shù)格式化
* @param s 時(shí)間戳（單位：秒）
* @returns {*} 格式化后的時(shí)分秒
*/
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
