我们都知道 小程序有自带的 api 也有html5 的audio 标签
但 小程序缺不内置了,咋办呢,肯定有办法解决的,如
const recorderManager = wx.getRecorderManager() // 录音管理器 暂存器
const innerAudioContext = wx.createInnerAudioContext() // 音频播放 (一段视频一个实例)
先来一段UI
看到这个还不如上代码合适,不唠叨了
//js模块
// js
data(){
return {
src: 'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
list: [{
id: 1,
timing: 0,
percent: 0,
src: this.src,
duration: 2000
}, {
id: 2,
timing: 0,
percent: 0,
src: this.src,
duration: 3000
}, {
id: 3,
timing: 0,
percent: 0,
src: this.src,
duration: 4000
}]
}
},
methods:{
// 开始录音的时候
start () {
const options = {
duration: 10000, // 指定录音的时长,单位 ms
sampleRate: 16000, // 采样率
numberOfChannels: 1, // 录音通道数
encodeBitRate: 96000, // 编码码率
format: 'mp3', // 音频格式,有效值 aac/mp3
frameSize: 50 // 指定帧大小,单位 KB
}
// 开始录音
recorderManager.start(options)
recorderManager.onStart(() => {
console.log('recorder start')
})
},
// 停止录音
stop () {
recorderManager.stop()
recorderManager.onStop((res) => {
this.tempFilePath = res.tempFilePath
this.duration = res.duration
console.log('停止录音', res)
})
},
// 播放声音
play (i) {
let $this = this
const innerAudioContext = wx.createInnerAudioContext()
innerAudioContext.autoplay = true
innerAudioContext.src = this.src
innerAudioContext.onPlay(() => {
let times = 0
let timer = setInterval(() => {
times += 1000
i.percent = parseInt(times / i.duration * 100)
i.timing = $this.tempToTime(times)
if (times > i.duration) {
innerAudioContext.stop()
i.timing = 0
i.percent = 0
clearInterval(timer)
}
}, 1000)
})
},
del (i, idx) {
this.list.splice(idx, 1)
},
tempToTime (s) {
if (s < 60000) {
return `00:${formatNumber(s / 1000)}`
} else if (s < 120000) {
return `01:${formatNumber((s - 6000) / 1000)}`
} else if (s < 180000) {
return `02:${formatNumber((s - 12000) / 1000)}`
} else {
return `03:00`
}
}
}
}
// html 渲染
<div class="record">
<div class="start">
<img src="../../../static/images/radio.png" @click="start">
<span>语音录入,录制时间最长为3分钟</span>
</div>
<div class="radioList" v-for="(i,index) in list" :key="i.id">
<img
src="../../../static/images/record_play.png"
class="stop"
@click="play(i)"
v-if="!i.timing"
>
<img src="../../../static/images/record_stop.png" class="stop" v-else>
<span class="time">{{i.timing?i.timing:'00:00'}}</span>
<span class="gress">
<progress
:percent="i.percent"
stroke-width="2"
activeColor="#7CCFFE"
border-radius="2rpx"
/>
</span>
<img src="../../../static/images/record_del.png" class="del" @click="del(i,index)">
</div>
</div>
css就不传了,定位啥的 flex 布局一波带走,