<template>
<view>
<button @longpress="startRecord" v-if="!isRecording">长按开始录音</button>
<button @click="stopRecord" v-if="isRecording">释放停止录音</button>
<button @click="playRecord" v-if="recordedFile">播放录音</button>
<button @click="saveRecord" v-if="recordedFile">保存录音到相册</button>
<view v-if="recordedFile">录音文件路径：{{ recordedFile }}</view>
</view>
</template>
<script>
export default {
data() {
return {
isRecording: false,
recordedFile: null
};
},
methods: {
startRecord() {
const self = this;
uni.startRecord({
success(res) {
self.isRecording = true;
self.recordedFile = res.tempFilePath;
},
fail(err) {
console.log('录音失败：', err);
}
});
},
stopRecord() {
const self = this;
uni.stopRecord({
success(res) {
self.isRecording = false;
self.recordedFile = res.tempFilePath;
},
fail(err) {
console.log('停止录音失败：', err);
}
});
},
playRecord() {
const self = this;
uni.playVoice({
filePath: self.recordedFile,
success() {
console.log('播放录音成功');
},
fail(err) {
console.log('播放录音失败：', err);
}
});
},
saveRecord() {
const self = this;
uni.saveVideoToPhotosAlbum({
filePath: self.recordedFile,
success() {
uni.showToast({ title: '录音保存成功' });
},
fail(err) {
console.log('保存录音失败：', err);
}
});
}
}
};
</script>这段代码提供了一个简单的小程序页面，用于展示如何在uniapp框架中实现长按录音、保存录音到相册以及播放录音的功能。代码使用了<button>元素和v-if指令来控制按钮的显示，并使用了uni.startRecord、uni.stopRecord和uni.playVoice API来实现录音和播放功能。同时，使用了uni.saveVideoToPhotosAlbum API将录音保存到相册。代码中的data属性用于跟踪录音状态和文件路径，methods属性包含了实现录音、停止录音、播放录音和保存录音到相册的方法。