Browse Source

优化: h5录音时出现电流声

master
xsx 1 year ago
parent
commit
a01408bf94
  1. 1
      im-uniapp/common/recorder-app.js
  2. 43
      im-uniapp/common/recorder-h5.js
  3. 6
      im-uniapp/components/chat-record/chat-record.vue
  4. 1
      im-uniapp/package.json

1
im-uniapp/common/recorder-app.js

@ -62,7 +62,6 @@ let upload = () => {
export { export {
start, start,
pause,
close, close,
upload upload
} }

43
im-uniapp/common/recorder-h5.js

@ -1,30 +1,43 @@
import Recorder from 'js-audio-recorder';
import UNI_APP from '@/.env.js'; import UNI_APP from '@/.env.js';
let rc = null; let rc = null;
let duration = 0;
let chunks = [];
let stream = null;
let start = () => { let start = () => {
if (rc != null) { return navigator.mediaDevices.getUserMedia({ audio: true }).then(audioStream => {
close(); const startTime = new Date().getTime();
chunks = [];
stream = audioStream;
rc = new MediaRecorder(stream)
rc.ondataavailable = (e) => {
console.log("ondataavailable")
chunks.push(e.data)
} }
rc = new Recorder(); rc.onstop = () => {
return rc.start(); duration = (new Date().getTime() - startTime) / 1000;
} console.log("时长:", duration)
}
rc.start()
})
let pause = () => {
rc.pause();
} }
let close = () => { let close = () => {
rc.destroy(); stream.getTracks().forEach((track) => {
rc = null; track.stop()
})
rc.stop()
} }
let upload = () => { let upload = () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const wavBlob = rc.getWAVBlob(); setTimeout(() => {
const newbolb = new Blob([wavBlob], { type: 'audio/wav' }) const newbolb = new Blob(chunks, { 'type': 'audio/mpeg' });
const name = new Date().getDate() + '.wav'; const name = new Date().getDate() + '.mp3';
const file = new File([newbolb], name) const file = new File([newbolb], name)
console.log("upload")
uni.uploadFile({ uni.uploadFile({
url: UNI_APP.BASE_URL + '/file/upload', url: UNI_APP.BASE_URL + '/file/upload',
header: { header: {
@ -39,7 +52,7 @@ let upload = () => {
reject(r.message); reject(r.message);
} else { } else {
const data = { const data = {
duration: parseInt(rc.duration), duration: parseInt(duration),
url: r.data url: r.data
} }
resolve(data); resolve(data);
@ -49,12 +62,12 @@ let upload = () => {
reject(e); reject(e);
} }
}) })
}, 100)
}) })
} }
export { export {
start, start,
pause,
close, close,
upload upload
} }

6
im-uniapp/components/chat-record/chat-record.vue

@ -71,13 +71,12 @@ export default {
}, },
onEndRecord() { onEndRecord() {
this.recording = false; this.recording = false;
//
this.$rc.pause();
// //
this.StopTimer(); this.StopTimer();
//
this.$rc.close();
// //
if (this.moveToCancel) { if (this.moveToCancel) {
this.$rc.close();
console.log("录音取消") console.log("录音取消")
return; return;
} }
@ -87,7 +86,6 @@ export default {
title: "说话时间太短", title: "说话时间太短",
icon: 'none' icon: 'none'
}) })
this.$rc.close();
return; return;
} }
this.$rc.upload().then((data) => { this.$rc.upload().then((data) => {

1
im-uniapp/package.json

@ -4,7 +4,6 @@
"scripts": {} "scripts": {}
}, },
"dependencies": { "dependencies": {
"js-audio-recorder": "^1.0.7",
"pinyin-pro": "^3.23.1", "pinyin-pro": "^3.23.1",
"vconsole": "^3.15.1" "vconsole": "^3.15.1"
} }

Loading…
Cancel
Save