@@ -1,42 +1,42 @@ | |||
{ | |||
"name": "Metavatar", | |||
"version": "0.1.0", | |||
"private": true, | |||
"scripts": { | |||
"dev": "vue-cli-service serve --mode development", | |||
"build": "vue-cli-service build --mode test", | |||
"build-test": "vue-cli-service build --mode test", | |||
"build-prd": "vue-cli-service build --mode production" | |||
}, | |||
"dependencies": { | |||
"axios": "0.18.1", | |||
"element-ui": "^2.15.12", | |||
"file-saver": "^2.0.5", | |||
"franc": "^6.1.0", | |||
"image-webpack-loader": "^8.1.0", | |||
"install": "^0.13.0", | |||
"lib-flexible": "^0.3.2", | |||
"mic-recorder-to-mp3": "^2.2.2", | |||
"postcss-px2rem": "^0.3.0", | |||
"register-service-worker": "^1.7.1", | |||
"swiper": "^4.5.1", | |||
"vant": "^2.12.48", | |||
"vue": "^2.6.11", | |||
"vue-cropper": "^0.5.11", | |||
"vue-router": "^3.2.0", | |||
"vue-waterfall2": "^1.10.6", | |||
"vuex": "^3.4.0" | |||
}, | |||
"devDependencies": { | |||
"@vue/cli-plugin-pwa": "~4.5.13", | |||
"@vue/cli-plugin-router": "~4.5.13", | |||
"@vue/cli-plugin-vuex": "~4.5.13", | |||
"@vue/cli-service": "~4.5.13", | |||
"compression-webpack-plugin": "5.0.1", | |||
"node-sass": "^6.0.1", | |||
"sass": "^1.60.0", | |||
"sass-loader": "^7.0.3", | |||
"uglifyjs-webpack-plugin": "^2.2.0", | |||
"vue-template-compiler": "^2.6.11" | |||
} | |||
} | |||
{ | |||
"name": "Metavatar", | |||
"version": "0.1.0", | |||
"private": true, | |||
"scripts": { | |||
"dev": "vue-cli-service serve --mode development", | |||
"build": "vue-cli-service build --mode test", | |||
"build-test": "vue-cli-service build --mode test", | |||
"build-prd": "vue-cli-service build --mode production" | |||
}, | |||
"dependencies": { | |||
"axios": "0.18.1", | |||
"element-ui": "^2.15.12", | |||
"file-saver": "^2.0.5", | |||
"franc": "^6.1.0", | |||
"image-webpack-loader": "^8.1.0", | |||
"install": "^0.13.0", | |||
"lib-flexible": "^0.3.2", | |||
"mic-recorder-to-mp3": "^2.2.2", | |||
"postcss-px2rem": "^0.3.0", | |||
"register-service-worker": "^1.7.1", | |||
"swiper": "^4.5.1", | |||
"vant": "^2.12.48", | |||
"vue": "^2.6.11", | |||
"vue-cropper": "^0.5.11", | |||
"vue-router": "^3.2.0", | |||
"vue-waterfall2": "^1.10.6", | |||
"vuex": "^3.4.0" | |||
}, | |||
"devDependencies": { | |||
"@vue/cli-plugin-pwa": "~4.5.13", | |||
"@vue/cli-plugin-router": "~4.5.13", | |||
"@vue/cli-plugin-vuex": "~4.5.13", | |||
"@vue/cli-service": "~4.5.13", | |||
"compression-webpack-plugin": "5.0.1", | |||
"node-sass": "^6.0.1", | |||
"sass": "^1.60.0", | |||
"sass-loader": "^7.0.3", | |||
"uglifyjs-webpack-plugin": "^2.2.0", | |||
"vue-template-compiler": "^2.6.11" | |||
} | |||
} |
@@ -0,0 +1,65 @@ | |||
<template> | |||
<div> | |||
<button @click="startRecording">开始录音</button> | |||
<button @click="stopRecording">停止录音</button> | |||
<button @click="playRecording">播放录音</button> | |||
<audio controls :src="audioUrl"></audio> | |||
</div> | |||
</template> | |||
<script> | |||
import MicRecorder from 'mic-recorder-to-mp3'; | |||
export default { | |||
data() { | |||
return { | |||
recorder: null, | |||
isRecording: false, | |||
audioUrl: null | |||
}; | |||
}, | |||
mounted() { | |||
this.recorder = new MicRecorder({ | |||
bitRate: 128 | |||
}); | |||
}, | |||
methods: { | |||
// 开始录音 | |||
startRecording() { | |||
if (!this.isRecording) { | |||
this.isRecording = true; | |||
this.recorder | |||
.start() | |||
.then(() => { | |||
console.log('Recording started'); | |||
}) | |||
.catch(err => { | |||
console.log(err); | |||
}); | |||
} | |||
}, | |||
// 停止录音 | |||
stopRecording() { | |||
if (this.isRecording) { | |||
this.isRecording = false; | |||
this.recorder | |||
.stop() | |||
.getMp3() | |||
.then(([buffer, blob]) => { | |||
this.audioUrl = URL.createObjectURL(blob); | |||
}) | |||
.catch(err => { | |||
console.log(err); | |||
}); | |||
} | |||
}, | |||
// 播放录音 | |||
playRecording() { | |||
if (this.audioUrl) { | |||
const audio = new Audio(this.audioUrl); | |||
audio.play(); | |||
} | |||
} | |||
} | |||
}; | |||
</script> |
@@ -1,58 +1,73 @@ | |||
<template> | |||
<div> | |||
<button @click="startRecording">开始录音</button> | |||
<button @click="stopRecording">停止录音</button> | |||
<button @click="playRecording">播放录音</button> | |||
<audio controls :src="audioUrl"></audio> | |||
</div> | |||
</template> | |||
<script> | |||
import MicRecorder from 'mic-recorder-to-mp3'; | |||
export default { | |||
data() { | |||
return { | |||
recorder: null, | |||
isRecording: false, | |||
audioUrl: null | |||
}; | |||
}, | |||
mounted() { | |||
this.recorder = new MicRecorder({ | |||
bitRate: 128 | |||
}); | |||
}, | |||
methods: { | |||
// 开始录音 | |||
startRecording() { | |||
if (!this.isRecording) { | |||
this.isRecording = true; | |||
this.recorder.start().then(() => { | |||
console.log('Recording started'); | |||
}).catch((err) => { | |||
console.log(err); | |||
}); | |||
} | |||
}, | |||
// 停止录音 | |||
stopRecording() { | |||
if (this.isRecording) { | |||
this.isRecording = false; | |||
this.recorder.stop().getMp3().then(([buffer, blob]) => { | |||
this.audioUrl = URL.createObjectURL(blob); | |||
}).catch((err) => { | |||
console.log(err); | |||
}); | |||
} | |||
}, | |||
// 播放录音 | |||
playRecording() { | |||
if (this.audioUrl) { | |||
const audio = new Audio(this.audioUrl); | |||
audio.play(); | |||
} | |||
} | |||
} | |||
} | |||
</script> | |||
<template> | |||
<div> | |||
<button @click="startRecording">开始录音</button> | |||
<button @click="stopRecording">停止录音</button> | |||
<button @click="playRecording">播放录音</button> | |||
<audio controls :src="audioUrl"></audio> | |||
</div> | |||
</template> | |||
<script> | |||
// 必须在http://localhost:下才可以调试录音 | |||
import MicRecorder from 'mic-recorder-to-mp3'; | |||
export default { | |||
data() { | |||
return { | |||
recorder: null, | |||
isRecording: false, | |||
audioUrl: null | |||
}; | |||
}, | |||
mounted() { | |||
this.recorder = new MicRecorder({ | |||
bitRate: 128 | |||
}); | |||
}, | |||
methods: { | |||
// 开始录音 | |||
startRecording() { | |||
if (!this.isRecording) { | |||
this.isRecording = true; | |||
this.recorder | |||
.start() | |||
.then(() => { | |||
console.log('Recording started'); | |||
}) | |||
.catch(err => { | |||
console.log(err); | |||
}); | |||
} | |||
}, | |||
// 停止录音 | |||
stopRecording() { | |||
if (this.isRecording) { | |||
this.isRecording = false; | |||
this.recorder | |||
.stop() | |||
.getMp3() | |||
.then(([buffer, blob]) => { | |||
this.audioUrl = URL.createObjectURL(blob); | |||
}) | |||
.catch(err => { | |||
console.log(err); | |||
}); | |||
} | |||
}, | |||
// 播放录音 | |||
playRecording() { | |||
if (this.audioUrl) { | |||
const audio = new Audio(this.audioUrl); | |||
audio.play(); | |||
} | |||
} | |||
} | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
button { | |||
width: 150px; | |||
height: 50px; | |||
} | |||
</style> |
@@ -5118,7 +5118,7 @@ kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3: | |||
lamejs@^1.2.0: | |||
version "1.2.1" | |||
resolved "https://registry.npmmirror.com/lamejs/-/lamejs-1.2.1.tgz" | |||
resolved "https://registry.npmmirror.com/lamejs/-/lamejs-1.2.1.tgz#0f92d38729213f106d4a19ded20821da7e89c8e4" | |||
integrity sha512-s7bxvjvYthw6oPLCm5pFxvA84wUROODB8jEO2+CE1adhKgrIvVOlmMgY8zyugxGrvRaDHNJanOiS21/emty6dQ== | |||
dependencies: | |||
use-strict "1.0.1" | |||
@@ -5431,7 +5431,7 @@ methods@~1.1.2: | |||
mic-recorder-to-mp3@^2.2.2: | |||
version "2.2.2" | |||
resolved "https://registry.npmmirror.com/mic-recorder-to-mp3/-/mic-recorder-to-mp3-2.2.2.tgz" | |||
resolved "https://registry.npmmirror.com/mic-recorder-to-mp3/-/mic-recorder-to-mp3-2.2.2.tgz#32e767d1196fb81d10e279f31c304350c9501d01" | |||
integrity sha512-xDkOaHbojW3bdKOGn9CI5dT+Mc0RrfczsX/Y1zGJp3FUB4zei5ZKFnNm7Nguc9v910wkd7T3csnCTq5EtCF3Zw== | |||
dependencies: | |||
lamejs "^1.2.0" | |||
@@ -8689,7 +8689,7 @@ url@^0.11.0: | |||
use-strict@1.0.1: | |||
version "1.0.1" | |||
resolved "https://registry.npmmirror.com/use-strict/-/use-strict-1.0.1.tgz" | |||
resolved "https://registry.npmmirror.com/use-strict/-/use-strict-1.0.1.tgz#0bb80d94f49a4a05192b84a8c7d34e95f1a7e3a0" | |||
integrity sha512-IeiWvvEXfW5ltKVMkxq6FvNf2LojMKvB2OCeja6+ct24S1XOmQw2dGr2JyndwACWAGJva9B7yPHwAmeA9QCqAQ== | |||
use@^3.1.0: | |||