|
@@ -1,249 +1,253 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
- <div class="Book-record">
|
|
|
- <div class="Book-record-btn">
|
|
|
- <div :class="['playBack', hasMicro]" v-if="hasMicro" @click="playmicrophone"></div>
|
|
|
- <div :class="['playBack', hasMicro]" v-else></div>
|
|
|
- <p>回放</p>
|
|
|
- </div>
|
|
|
- <div class="Book-record-btn">
|
|
|
- <div :class="['record',microphoneStatus?'active':'']" @click="microphone"></div>
|
|
|
- <p>{{ microphoneBtn }}</p>
|
|
|
- </div>
|
|
|
+ <div class="Book-record">
|
|
|
+ <div class="Book-record-btn">
|
|
|
+ <div
|
|
|
+ :class="['playBack', hasMicro]"
|
|
|
+ v-if="hasMicro"
|
|
|
+ @click="playmicrophone"
|
|
|
+ ></div>
|
|
|
+ <div :class="['playBack', hasMicro]" v-else></div>
|
|
|
+ <p>回放</p>
|
|
|
</div>
|
|
|
+ <div class="Book-record-btn">
|
|
|
+ <div
|
|
|
+ :class="['record', microphoneStatus ? 'active' : '']"
|
|
|
+ @click="microphone"
|
|
|
+ ></div>
|
|
|
+ <p>{{ microphoneBtn }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import Recorder from "js-audio-recorder"; //录音插件
|
|
|
let Base64 = require("js-base64").Base64;
|
|
|
export default {
|
|
|
- components: {},
|
|
|
- props: ["wavData", "queIndex"],
|
|
|
- data () {
|
|
|
- return {
|
|
|
- recorder: new Recorder({
|
|
|
- sampleBits: 16, // 采样位数,支持 8 或 16,默认是16
|
|
|
- sampleRate: 16000, // 采样率,支持 11025、16000、22050、24000、44100、48000,根据浏览器默认值,我的chrome是48000
|
|
|
- numChannels: 1, // 声道,支持 1 或 2, 默认是1
|
|
|
- }),
|
|
|
- microphoneStatus: false,
|
|
|
- hasMicro: "", // 录音后的样式class
|
|
|
- microphoneBtn: "点击录音",
|
|
|
- wavblob: null,
|
|
|
- audio: new window.Audio(),
|
|
|
- newMicrophone:false, // 是否为新录音
|
|
|
- };
|
|
|
+ components: {},
|
|
|
+ props: ["wavData", "queIndex"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ recorder: new Recorder({
|
|
|
+ sampleBits: 16, // 采样位数,支持 8 或 16,默认是16
|
|
|
+ sampleRate: 16000, // 采样率,支持 11025、16000、22050、24000、44100、48000,根据浏览器默认值,我的chrome是48000
|
|
|
+ numChannels: 1, // 声道,支持 1 或 2, 默认是1
|
|
|
+ }),
|
|
|
+ microphoneStatus: false,
|
|
|
+ hasMicro: "", // 录音后的样式class
|
|
|
+ microphoneBtn: "点击录音",
|
|
|
+ wavblob: null,
|
|
|
+ audio: new window.Audio(),
|
|
|
+ newMicrophone: false, // 是否为新录音
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {
|
|
|
+ queIndex: {
|
|
|
+ handler: function (val, oldVal) {
|
|
|
+ let _this = this;
|
|
|
+ if (val != oldVal) {
|
|
|
+ _this.handleActive();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 深度观察监听
|
|
|
+ deep: true,
|
|
|
},
|
|
|
- computed: {},
|
|
|
- watch: {
|
|
|
- queIndex: {
|
|
|
- handler: function (val, oldVal) {
|
|
|
- let _this = this;
|
|
|
- if (val != oldVal) {
|
|
|
- _this.handleActive();
|
|
|
- }
|
|
|
- },
|
|
|
- // 深度观察监听
|
|
|
- deep: true,
|
|
|
- },
|
|
|
+ },
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ // 开始录音
|
|
|
+ microphone() {
|
|
|
+ let _this = this;
|
|
|
+ if (!this.microphoneStatus) {
|
|
|
+ //开始录音
|
|
|
+ this.recorder.start();
|
|
|
+ this.microphoneStatus = true;
|
|
|
+ this.microphoneBtn = "录音中...";
|
|
|
+ } else {
|
|
|
+ this.microphoneBtn = "录音完成";
|
|
|
+ this.hasMicro = "normal";
|
|
|
+ this.recorder.stop();
|
|
|
+ let toltime = this.recorder.duration; //录音总时长
|
|
|
+ let fileSize = this.recorder.fileSize; //录音总大小
|
|
|
+ //录音结束,获取取录音数据
|
|
|
+ let PCMBlob = this.recorder.getPCMBlob(); //获取 PCM 数据
|
|
|
+ let wav = this.recorder.getWAVBlob(); //获取 WAV 数据
|
|
|
+ this.wavblob = wav;
|
|
|
+ this.microphoneStatus = false;
|
|
|
+ this.newMicrophone = true;
|
|
|
+ // 传值给父级
|
|
|
+ // this.$emit("handle-Wav", wav);
|
|
|
+ var reader = new window.FileReader();
|
|
|
+ reader.readAsDataURL(wav);
|
|
|
+ reader.onloadend = function () {
|
|
|
+ _this.$emit("handle-Wav", reader.result);
|
|
|
+ };
|
|
|
+ }
|
|
|
},
|
|
|
- //方法集合
|
|
|
- methods: {
|
|
|
- // 开始录音
|
|
|
- microphone () {
|
|
|
- let _this = this
|
|
|
- if (!this.microphoneStatus) {
|
|
|
- //开始录音
|
|
|
- this.recorder.start();
|
|
|
- this.microphoneStatus = true;
|
|
|
- this.microphoneBtn = "录音中...";
|
|
|
- } else {
|
|
|
- this.microphoneBtn = "录音完成";
|
|
|
- this.hasMicro = "normal";
|
|
|
- this.recorder.stop();
|
|
|
- let toltime = this.recorder.duration; //录音总时长
|
|
|
- let fileSize = this.recorder.fileSize; //录音总大小
|
|
|
- //录音结束,获取取录音数据
|
|
|
- let PCMBlob = this.recorder.getPCMBlob(); //获取 PCM 数据
|
|
|
- let wav = this.recorder.getWAVBlob(); //获取 WAV 数据
|
|
|
- this.wavblob = wav;
|
|
|
- this.microphoneStatus = false;
|
|
|
- this.newMicrophone = true
|
|
|
- // 传值给父级
|
|
|
- // this.$emit("handle-Wav", wav);
|
|
|
- var reader = new window.FileReader();
|
|
|
- reader.readAsDataURL(wav);
|
|
|
- reader.onloadend = function() {
|
|
|
- _this.$emit("handle-Wav", reader.result);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- playmicrophone () {
|
|
|
- let _this = this;
|
|
|
- if (!this.audio.paused) {
|
|
|
- this.audio.pause();
|
|
|
- } else {
|
|
|
- _this.audio.pause();
|
|
|
- _this.audio.load();
|
|
|
- if(_this.wavData && !_this.newMicrophone){
|
|
|
- _this.audio.src = _this.wavData;
|
|
|
- }else{
|
|
|
- _this.audio.src = window.URL.createObjectURL(_this.wavblob);
|
|
|
- }
|
|
|
- _this.audio.play();
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- // 高亮初始值
|
|
|
- handleActive () {
|
|
|
- if (this.wavData) {
|
|
|
- this.hasMicro = "normal";
|
|
|
- this.microphoneBtn = "录音完成";
|
|
|
- this.newMicrophone = false
|
|
|
- } else {
|
|
|
- this.hasMicro = "";
|
|
|
- this.microphoneBtn = "点击录音";
|
|
|
- }
|
|
|
- },
|
|
|
- changeStatus (status) {
|
|
|
- this.hasMicro = status
|
|
|
+ playmicrophone() {
|
|
|
+ let _this = this;
|
|
|
+ if (!this.audio.paused) {
|
|
|
+ this.audio.pause();
|
|
|
+ } else {
|
|
|
+ _this.audio.pause();
|
|
|
+ _this.audio.load();
|
|
|
+ if (_this.wavData && !_this.newMicrophone) {
|
|
|
+ _this.audio.src = _this.wavData;
|
|
|
+ } else {
|
|
|
+ _this.audio.src = window.URL.createObjectURL(_this.wavblob);
|
|
|
}
|
|
|
+ _this.audio.play();
|
|
|
+ }
|
|
|
},
|
|
|
- //生命周期 - 创建完成(可以访问当前this实例)
|
|
|
- created () {
|
|
|
- this.handleActive();
|
|
|
- var that = this;
|
|
|
- window.stopAudioSound = function () {
|
|
|
- if (that.audio) {
|
|
|
- that.audio.pause();
|
|
|
- }
|
|
|
- };
|
|
|
+ // 高亮初始值
|
|
|
+ handleActive() {
|
|
|
+ if (this.wavData) {
|
|
|
+ this.hasMicro = "normal";
|
|
|
+ this.microphoneBtn = "录音完成";
|
|
|
+ this.newMicrophone = false;
|
|
|
+ } else {
|
|
|
+ this.hasMicro = "";
|
|
|
+ this.microphoneBtn = "点击录音";
|
|
|
+ }
|
|
|
},
|
|
|
- //生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
- mounted () {
|
|
|
- let _this = this;
|
|
|
- _this.audio.addEventListener("play", function () {
|
|
|
- _this.changeStatus('active')
|
|
|
- });
|
|
|
- _this.audio.addEventListener("pause", function () {
|
|
|
- _this.changeStatus('normal')
|
|
|
- });
|
|
|
- _this.audio.addEventListener("ended", function () {
|
|
|
- _this.changeStatus('normal')
|
|
|
- });
|
|
|
+ changeStatus(status) {
|
|
|
+ this.hasMicro = status;
|
|
|
},
|
|
|
- beforeCreate () { }, //生命周期 - 创建之前
|
|
|
- beforeMount () { }, //生命周期 - 挂载之前
|
|
|
- beforeUpdate () { }, //生命周期 - 更新之前
|
|
|
- updated () { }, //生命周期 - 更新之后
|
|
|
- beforeDestroy () { }, //生命周期 - 销毁之前
|
|
|
- destroyed () { }, //生命周期 - 销毁完成
|
|
|
- activated () { }, //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成(可以访问当前this实例)
|
|
|
+ created() {
|
|
|
+ this.handleActive();
|
|
|
+ var that = this;
|
|
|
+ window.stopAudioSound = function () {
|
|
|
+ if (that.audio) {
|
|
|
+ that.audio.pause();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成(可以访问DOM元素)
|
|
|
+ mounted() {
|
|
|
+ let _this = this;
|
|
|
+ _this.audio.addEventListener("play", function () {
|
|
|
+ _this.changeStatus("active");
|
|
|
+ });
|
|
|
+ _this.audio.addEventListener("pause", function () {
|
|
|
+ _this.changeStatus("normal");
|
|
|
+ });
|
|
|
+ _this.audio.addEventListener("ended", function () {
|
|
|
+ _this.changeStatus("normal");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
<style lang='scss' scoped>
|
|
|
//@import url(); 引入公共css类
|
|
|
.Book-record {
|
|
|
+ display: flex;
|
|
|
+ color: #ba7d21;
|
|
|
+ font-size: 24px;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .Book-record-btn {
|
|
|
display: flex;
|
|
|
- color: #ba7d21;
|
|
|
- font-size: 24px;
|
|
|
+ flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- .Book-record-btn {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- &:nth-child(1) {
|
|
|
- margin-right: 32px;
|
|
|
- }
|
|
|
- > p {
|
|
|
- margin-top: 24px;
|
|
|
- font-weight: 600;
|
|
|
- font-family: 'FZJCGFKTK';
|
|
|
- font-size: 24px;
|
|
|
- line-height: 1;
|
|
|
- text-align: center;
|
|
|
- color: #ba7d21;
|
|
|
- padding: 0;
|
|
|
- margin-bottom: 0px;
|
|
|
- }
|
|
|
+ &:nth-child(1) {
|
|
|
+ margin-right: 32px;
|
|
|
}
|
|
|
- .playBack {
|
|
|
- width: 144px;
|
|
|
- height: 72px;
|
|
|
- background: url('../../assets/qp/lookback.png') center no-repeat;
|
|
|
- background-size: 100%;
|
|
|
- cursor: not-allowed;
|
|
|
- &.normal {
|
|
|
- background: url('../../assets/qp/lookback-normal.png') center
|
|
|
- no-repeat;
|
|
|
- background-size: 100%;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- &.active {
|
|
|
- background: url('../../assets/qp/lookback-click.png') center
|
|
|
- no-repeat;
|
|
|
- background-size: 100%;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
+ > p {
|
|
|
+ margin-top: 24px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-family: "FZJCGFKTK";
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 1;
|
|
|
+ text-align: center;
|
|
|
+ color: #ba7d21;
|
|
|
+ padding: 0;
|
|
|
+ margin-bottom: 0px;
|
|
|
}
|
|
|
- .record {
|
|
|
- width: 144px;
|
|
|
- height: 72px;
|
|
|
- background: url('../../assets/qp/luyin.png') center no-repeat;
|
|
|
- background-size: 100%;
|
|
|
- cursor: pointer;
|
|
|
- &.active {
|
|
|
- background: url('../../assets/qp/luyin-click.png') center no-repeat;
|
|
|
- background-size: 100%;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .playBack {
|
|
|
+ width: 144px;
|
|
|
+ height: 72px;
|
|
|
+ background: url("../../assets/qp/lookback.png") center no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ cursor: not-allowed;
|
|
|
+ &.normal {
|
|
|
+ background: url("../../assets/qp/lookback-normal.png") center no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ background: url("../../assets/qp/lookback-click.png") center no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
+ }
|
|
|
+ .record {
|
|
|
+ width: 144px;
|
|
|
+ height: 72px;
|
|
|
+ background: url("../../assets/qp/luyin.png") center no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ &.active {
|
|
|
+ background: url("../../assets/qp/luyin-click.png") center no-repeat;
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.questionMiddle {
|
|
|
- .Book-record {
|
|
|
+ .Book-record {
|
|
|
+ font-size: 16px;
|
|
|
+ .Book-record-btn {
|
|
|
+ &:nth-child(1) {
|
|
|
+ margin-right: 21px;
|
|
|
+ }
|
|
|
+ > p {
|
|
|
+ margin-top: 16px;
|
|
|
font-size: 16px;
|
|
|
- .Book-record-btn {
|
|
|
- &:nth-child(1) {
|
|
|
- margin-right: 21px;
|
|
|
- }
|
|
|
- > p {
|
|
|
- margin-top: 16px;
|
|
|
- font-size: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
- .playBack {
|
|
|
- width: 96px;
|
|
|
- height: 48px;
|
|
|
- }
|
|
|
- .record {
|
|
|
- width: 96px;
|
|
|
- height: 48px;
|
|
|
- }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .playBack {
|
|
|
+ width: 96px;
|
|
|
+ height: 48px;
|
|
|
+ }
|
|
|
+ .record {
|
|
|
+ width: 96px;
|
|
|
+ height: 48px;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
.questionSmall {
|
|
|
- .Book-record {
|
|
|
+ .Book-record {
|
|
|
+ font-size: 12px;
|
|
|
+ .Book-record-btn {
|
|
|
+ &:nth-child(1) {
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+ > p {
|
|
|
+ margin-top: 12px;
|
|
|
font-size: 12px;
|
|
|
- .Book-record-btn {
|
|
|
- &:nth-child(1) {
|
|
|
- margin-right: 16px;
|
|
|
- }
|
|
|
- > p {
|
|
|
- margin-top: 12px;
|
|
|
- font-size: 12px;
|
|
|
- padding: 0;
|
|
|
- margin-bottom: 0px;
|
|
|
- }
|
|
|
- }
|
|
|
- .playBack {
|
|
|
- width: 72px;
|
|
|
- height: 36px;
|
|
|
- }
|
|
|
- .record {
|
|
|
- width: 72px;
|
|
|
- height: 36px;
|
|
|
- }
|
|
|
+ padding: 0;
|
|
|
+ margin-bottom: 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .playBack {
|
|
|
+ width: 72px;
|
|
|
+ height: 36px;
|
|
|
+ }
|
|
|
+ .record {
|
|
|
+ width: 72px;
|
|
|
+ height: 36px;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|