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