| @@ -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: | |||