极客观点
项目管理
HarmonyOS
如上图左边那个图形的波浪效果，这个是evc录频那里截来的效果。现在做好录音基本功能，就想在录音时加个动画效果。
现有代码如下：
<template>
<!-- 录音demo -->
<div>
<el-card>
<h1>录音</h1>
<!-- 录音区域 -->
<div style="margin-top:10px;">
<div ref="timer">{{ time }}</div>
<!-- 操作按钮区域 -->
<div style="margin-top:10px;">
<el-button type="primary" @click="startRecord" :disabled="startBtn">开始录音</el-button>
<el-button type="primary" @click="stopRecord" :disabled="stopBtn">暂停录音</el-button>
<el-button type="primary" @click="reRecord" :disabled="resumeBtn">恢复录音</el-button>
<el-button type="primary" @click="endRecord" :disabled="endBtn">结束录音</el-button>
</div>
<audio ref="recordPlayer" controls src="" style="margin-top: 10px;" />
<el-button type="primary" @click="download">下载录音文件</el-button>
</div>
</el-card>
</div>
</template>
<script>
export default {
components: {
},
data() {
return {
mediaRecorder: '',//MediaRecorder对象实例
time: '00:00',
timer: null,//定时器
startBtn: false,
stopBtn: true,
resumeBtn: true,
endBtn: true,
lastTime: '',//上一次暂停的时间
file: ''//录音完成的File文件对象
}
},
computed: {
},
created() {
},
mounted() {
},
methods: {
// 开始录音
startRecord() {
this.startBtn = true
this.stopBtn = false
this.endBtn = false
//只录制音频
navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {
console.log('音频流', stream)
//创建一个MediaRecorder对象实例，以供音频的录入
this.mediaRecorder = new MediaRecorder(stream)
console.log('录音对象', this.mediaRecorder)
this.mediaRecorder.start() //开始录音
this.mediaRecorder.onstart = () => {
// 录音开始计时
const start = Date.now();
this.timer = setInterval(() => {
const diff = Date.now() - start;
const minutes = Math.floor(diff / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
// const milliseconds = Math.floor((diff % 1000) / 10);//毫秒去掉
this.time = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}, 10);
}
}).catch((error) => {
console.log(error)
this.$alert('开启麦克风失败！')
})
},
//结束录音
endRecord() {
this.startBtn = false
this.stopBtn = true
this.resumeBtn = true
this.endBtn = true
this.mediaRecorder.stop()
this.mediaRecorder.onstop = () => {
//录音结束
clearInterval(this.timer);
//重置时间
this.time = '00:00'
}
//监听是否新的录音对象生成
this.mediaRecorder.addEventListener('dataavailable', (event) => {
//监听录音结束后将录制的音频放入audio标签
this.$refs.recordPlayer.src = URL.createObjectURL(event.data)
let blob = event.data//blob对象
console.log(blob)
console.log(blob.size)
let size = blob.size / 1024 / 1024
console.log('blob文件大小', size)
//blob对象转file文件对象
let file = new File([blob], '录音文件1', { type: "audio/mp3" })
this.file = file
console.log(file)
})
},
//暂停录音
stopRecord() {
this.stopBtn = true
this.resumeBtn = false
this.mediaRecorder.pause()
this.mediaRecorder.onpause = () => {
//暂停录音，停止当前计时
clearInterval(this.timer);
this.lastTime = this.time
}
},
//恢复录音
reRecord() {
this.resumeBtn = true
this.stopBtn = false
this.mediaRecorder.resume()
this.mediaRecorder.onresume = () => {
//恢复录音，恢复当前计时
const start = Date.now();
this.timer = setInterval(() => {
const diff = Date.now() - start;
const minutes = Math.floor(diff / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);
// const milliseconds = Math.floor((diff % 1000) / 10);//毫秒去掉
let time = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
let lastTime = this.lastTime
let [ah, al] = lastTime.split(':');
let [bh, bl] = time.split(':');
// Convert hour and minute to numbers
let ahour = parseInt(ah);
let almin = parseInt(al);
let bhour = parseInt(bh);
let bmin = parseInt(bl);
// Add minutes to get total minutes
let totalMin = (ahour * 60 + almin) + (bhour * 60 + bmin);
// Convert total minutes back to hours and minutes
let totalHours = Math.floor(totalMin / 60);
let totalMins = totalMin % 60;
// Store the result
this.time = `${totalHours.toString().padStart(2, '0')}:${totalMins.toString().padStart(2, '0')}`;
}, 10);
}
},
//下载录音文件
download() {
// 创建a标签
var link = document.createElement("a");
link.href = URL.createObjectURL(this.file);
link.download = "录音文件1.mp3";
// 添加到DOM中并模拟点击下载
document.body.appendChild(link);
link.click();
// 从DOM中移除a标签
document.body.removeChild(link);
}
},
}
</script>
<style scoped></style>
查看本站文章:
MDN官方教程: