<template>
<view>
<button @tap="playVoice">播放录音</button>
{{result}}
</view>
</template>
<script>
let options = {
duration: 60000,
sampleRate: 16000,
numberOfChannels: 1,
encodeBitRate: 48000,
format: 'mp3',
frameSize: 50
}
export default {
data() {
return {
result: false,
text: 'uni-app',
voicePath: '../../static/62497238-e924-401a-b1d7-e20c8f9ef8b9.wav'
}
},
mounted() {
this.playVoice();
},
methods: {
playVoice() {
this.recorderManager1 = uni.getRecorderManager();
this.innerAudioContext1 = uni.createInnerAudioContext();
this.innerAudioContext1.src = this.voicePath;
console.log('播放录音');
this.innerAudioContext1.play();
this.innerAudioContext1.onPlay(() => {
console.log("play")
console.log("play time:" + this.innerAudioContext1.duration)
})
this.innerAudioContext1.onEnded(() => {
console.log("onEnded")
});
this.recorderManager1.start();
// 监听录音开始
this.recorderManager1.onStart(() => {
console.log('recorder2 start')
this.result = true;
})
}
}
}
</script>
<style>
</style>

- 发布:2020-07-16 18:01
- 更新:2021-09-03 16:05
- 阅读:1459
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 2.8.0
手机系统: Android
手机系统版本号: Android 10
手机厂商: 华为
手机机型: COL-AL10
页面类型: vue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
注:第一步复现步骤必须是打开APP第一次进入>>
第一步产生的BUG:打开APP后点击“进入录音”按钮,无法进入到录音开始this.recorderManager1.onStart,打印日志如下>>
17:40:06.419 App Show at App.vue:7
17:40:09.253 App Launch at App.vue:4
17:40:09.274 App Show at App.vue:7
17:40:11.226 [Number] 1 at pages/index/index.vue:22
17:40:11.246 播放录音 at pages/index/test.vue:34
17:40:11.329 play at pages/index/test.vue:37
17:40:11.359 play time:11.2 at pages/index/test.vue:38
17:40:13.547 onEnded at pages/index/test.vue:41
注:此时已经打开APP再次点击按钮
第二步产生的BUG:点击左上角返回,然后再次点击“进入录音”按钮,再次进入test页面,此次能进入到录音开始this.recorderManager1.onStart,改变返回值this.Result=true,但是绑定显示{{result}}依然未变,打印日志如下>>
17:41:39.961 [Number] 1 at pages/index/index.vue:22
17:41:40.064 播放录音 at pages/index/test.vue:34
17:41:40.664 play at pages/index/test.vue:37
17:41:41.264 play time:11.2 at pages/index/test.vue:38
17:41:42.385 onEnded at pages/index/test.vue:41
17:41:42.406 recorder2 start at pages/index/test.vue:46
注:第一步复现步骤必须是打开APP第一次进入>>
第一步产生的BUG:打开APP后点击“进入录音”按钮,无法进入到录音开始this.recorderManager1.onStart,打印日志如下>>
17:40:06.419 App Show at App.vue:7
17:40:09.253 App Launch at App.vue:4
17:40:09.274 App Show at App.vue:7
17:40:11.226 [Number] 1 at pages/index/index.vue:22
17:40:11.246 播放录音 at pages/index/test.vue:34
17:40:11.329 play at pages/index/test.vue:37
17:40:11.359 play time:11.2 at pages/index/test.vue:38
17:40:13.547 onEnded at pages/index/test.vue:41
注:此时已经打开APP再次点击按钮
第二步产生的BUG:点击左上角返回,然后再次点击“进入录音”按钮,再次进入test页面,此次能进入到录音开始this.recorderManager1.onStart,改变返回值this.Result=true,但是绑定显示{{result}}依然未变,打印日志如下>>
17:41:39.961 [Number] 1 at pages/index/index.vue:22
17:41:40.064 播放录音 at pages/index/test.vue:34
17:41:40.664 play at pages/index/test.vue:37
17:41:41.264 play time:11.2 at pages/index/test.vue:38
17:41:42.385 onEnded at pages/index/test.vue:41
17:41:42.406 recorder2 start at pages/index/test.vue:46
预期结果:
期望每次点击“进入录音”按钮功能时都能正常进入以下方法体,并且能够改变绑定显示的值{{result}}
this.recorderManager1.onStart(() => {
console.log('recorder2 start')
this.result = true;
})
获取的语音文件时长在华为荣耀10手机和MUMU模拟器中显示的时长为11.2秒,但文件真实的时长只有2秒,在OPPO RENO 3 PRO手机中测试能显示是正常的2秒。
this.innerAudioContext1.duration
期望每次点击“进入录音”按钮功能时都能正常进入以下方法体,并且能够改变绑定显示的值{{result}}
this.recorderManager1.onStart(() => {
console.log('recorder2 start')
this.result = true;
})
获取的语音文件时长在华为荣耀10手机和MUMU模拟器中显示的时长为11.2秒,但文件真实的时长只有2秒,在OPPO RENO 3 PRO手机中测试能显示是正常的2秒。
this.innerAudioContext1.duration
实际结果:
第一步结果未进入以下方法体
this.recorderManager1.onStart(() => {
console.log('recorder2 start')
this.result = true;
})
第二步结果进入了以下方法体,但是未能改变绑定{{result}}的显示值
this.recorderManager1.onStart(() => {
console.log('recorder2 start')
this.result = true;
})
第一步结果未进入以下方法体
this.recorderManager1.onStart(() => {
console.log('recorder2 start')
this.result = true;
})
第二步结果进入了以下方法体,但是未能改变绑定{{result}}的显示值
this.recorderManager1.onStart(() => {
console.log('recorder2 start')
this.result = true;
})
bug描述:
三个问题
1、每次重新打开APP时进入播放录音页面,在mounted方法调用时无法执行进入 recorderManager1.onStart 方法。
2、获取的语音时长不准确,MUMU模拟器和华为荣耀10中测试都是这个结果,但是在 OPPO RENO 3 PRO手机是正常。其它机型是否有这问题未测试!
3、再次进入播放录音页面时能够进入到recorderManager1.onStart方法,但是无法改变this.result的赋值,双向绑定失效。

确认bug,等待修复。第一次录音没有执行,不存在双向绑定失效。
测试项 | 结果 |
---|---|
测试结果 | 已复现 |
环境 | hbuilderX 2.7.14、hbuilderX 2.8.0 |
ios | iPhone11 |
andriod | oppo andriod5.1 |

onion一只洋葱 - 一只前端
我吐了,现在还存在这个问题。
我是写了一段这个isPermissionNum做计数,进行二次调用
private handleRecord() {
const that = this;
// 防止录音不触发
if (!this.isRecord && this.isPermissionNum < 1) {
this.isPermissionNum = this.isPermissionNum + 1;
this.handleRecord();
return;
}
// 开始录音
this.recorderManager.start({ duration: this.duration });
// 监听录音
this.recorderManager.onStart(() => {
that.isRecord = true;
that.recordTimer = setInterval(() => {
that.recordTime = that.recordTime + 1;
}, 1000);
});
}