| @@ -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: | lamejs@^1.2.0: | ||||
| version "1.2.1" | 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== | integrity sha512-s7bxvjvYthw6oPLCm5pFxvA84wUROODB8jEO2+CE1adhKgrIvVOlmMgY8zyugxGrvRaDHNJanOiS21/emty6dQ== | ||||
| dependencies: | dependencies: | ||||
| use-strict "1.0.1" | use-strict "1.0.1" | ||||
| @@ -5431,7 +5431,7 @@ methods@~1.1.2: | |||||
| mic-recorder-to-mp3@^2.2.2: | mic-recorder-to-mp3@^2.2.2: | ||||
| version "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== | integrity sha512-xDkOaHbojW3bdKOGn9CI5dT+Mc0RrfczsX/Y1zGJp3FUB4zei5ZKFnNm7Nguc9v910wkd7T3csnCTq5EtCF3Zw== | ||||
| dependencies: | dependencies: | ||||
| lamejs "^1.2.0" | lamejs "^1.2.0" | ||||
| @@ -8689,7 +8689,7 @@ url@^0.11.0: | |||||
| use-strict@1.0.1: | use-strict@1.0.1: | ||||
| version "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== | integrity sha512-IeiWvvEXfW5ltKVMkxq6FvNf2LojMKvB2OCeja6+ct24S1XOmQw2dGr2JyndwACWAGJva9B7yPHwAmeA9QCqAQ== | ||||
| use@^3.1.0: | use@^3.1.0: | ||||