uniapp 录音计时器
时间: 2025-04-21 13:42:09 浏览: 28
### 实现带计时器的录音功能
为了实现在 UniApp 中创建带计时器的录音功能,可以利用 `plus.audio` API 来控制录音操作,并通过 JavaScript 的定时器来实现计时效果[^1]。
#### 初始化项目与权限设置
确保已安装必要的依赖包以及配置好应用所需的权限。对于录音功能而言,在项目的 manifest.json 文件中需声明麦克风访问权限:
```json
{
"permissions": {
"scope_audio_record": {}
}
}
```
#### 创建页面布局
定义一个简单的界面用于启动/停止录音及显示当前录制时间长度:
```html
<template>
<view class="container">
<!-- 录音按钮 -->
<button @click="toggleRecording">{{ isRecording ? 'Stop' : 'Start' }} Recording</button>
<!-- 计时器展示 -->
<text>Duration: {{ duration }}</text>
<!-- 播放音频文件 -->
<audio controls v-if="recordedFileUrl" :src="recordedFileUrl"></audio>
</view>
</template>
```
#### 编写逻辑代码
接下来编写 Vue 组件中的方法来进行实际的功能开发:
```javascript
<script>
export default {
data() {
return {
recorderManager: null,
timerId: null, // 定义一个变量保存setInterval返回值以便后续清除
startTime: Date.now(),// 开始时间戳
duration: '00:00', // 显示的时间字符串
recordedFileUrl: '', // 存储录音后的临时路径供播放使用
isRecording: false // 当前是否正在录音状态标记位
};
},
methods: {
toggleRecording() {
this.isRecording = !this.isRecording;
if (this.isRecording) { // 如果点击的是开始录音,则执行如下动作
const that = this;
plus.audio.getRecorder().start(); // 调用API开启录音
// 启动每秒更新一次UI上的持续时间
this.timerId = setInterval(() => {
let nowTime = Math.floor((Date.now() - this.startTime)/1000);
let minutes = String(Math.floor(nowTime / 60)).padStart(2,'0');
let seconds = String(nowTime % 60).padStart(2,'0');
this.duration = `${minutes}:${seconds}`;
console.log(`Recording... ${that.duration}`);
}, 1000);
} else { // 若点击的是结束录音则做相应处理
clearInterval(this.timerId); // 清除定时器防止内存泄漏
plus.audio.getRecorder().stop();
setTimeout(function(){
var path = plus.io.convertLocalFileSystemURL(_self.recorderManager.tempFilePath);
_self.recordedFileUrl = path;
},500)
console.log('Stopped recording.');
// 更新起始时间为最新时刻准备下一轮循环
this.startTime = Date.now();
}
}
},
mounted() {
try {
this.recorderManager = uni.createInnerAudioContext();
} catch(e){
console.error("Failed to initialize audio context:", e.message);
}
}
};
</script>
```
此段脚本实现了基本的录音流程管理,包括初始化录音对象、切换录音开关、计算并刷新界面上所见的时间间隔等核心部分。
阅读全文
相关推荐


















