rt-sim-training-client/src/views/system/voiceTraining/index.vue

<template>
  <div>
    <el-card style="width: 80%;margin: 30px auto;">
      <div slot="header" style="text-align: center;">
        <span style="font-size: 20px;color: #000;">语音识别训练</span>
        <el-button style="float: right; padding: 3px 0" type="text">清空</el-button>
      </div>
      <div>
        <div v-for="(chatContent,index) in messageList" :key="index" class="chatContentInClass">
          <div class="leftUser">
            <div class="userHeader">
              <div class="userChatTime">{{ covertTime(chatContent.time) }}</div>
            </div>
            <div class="userBubble" @click="playAudio(baseUrl+chatContent.src, chatContent)">
              <div class="userMessage">
                <!-- 语音播放 -->
                <div class="wifi-symbol">
                  <div class="wifi-circle first" />
                </div>
              </div>
            </div>
            <audio id="audioPlay" style="display:none" />
          </div>
        </div>
      </div>
      <div style="position: relative;height: 50px;">
        <el-button class="chat-box-footer-create chat-box-footer-send" :class="{'active': recordSending}" size="mini" type="primary" @click="startRecording()">
          <el-progress id="record_progress_bar" type="circle" :show-text="false" :percentage="100/60*seconds" :width="40" :stroke-width="2" status="success" />
          <i v-if="recordSending" class="el-icon-close close_icon" @click.stop="cancleRecording()" />
          <span class="iconfont icon-yuyin">&#xe62b;</span>
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import RecordRTC from 'recordrtc';
import { uploadAudioFiles } from '@/api/voice';
export default {
    name: 'Index',
    data() {
        return {
            seconds: 0,
            recordSending: false,
            recorders: null,
            microphone:null,
            messageList: [{ filePath: '/8888', result: '测试文字' }]
        };
    },
    methods: {
        startRecording() {
            this.audioPlay = true;
            const that = this;
            if (!this.recordSending) {
                if (!this.recordSending && !this.recorders && !this.microphone) {
                    const StereoAudioRecorder = RecordRTC.StereoAudioRecorder;
                    navigator.getUserMedia(
                        { audio: true } // 只启用音频
                        , function (stream) {
                            that.microphone = stream;
                            that.recorders = new RecordRTC(that.microphone, {
                                type: 'audio',
                                recorderType: StereoAudioRecorder,
                                numberOfAudioChannels: 1,
                                bitsPerSecond:256000,
                                desiredSampRate: 16000
                            });
                            that.recorders.startRecording();
                            that.recordSending = true;
                            that.audioPlay = false;
                            that.inter = setInterval(() => {
                                if (that.seconds < 60) {
                                    that.seconds++;
                                } else {
                                    clearInterval(that.inter);
                                    that.stopRecording();
                                }
                            }, 1000);
                        }, function (error) {
                            switch (error.code || error.name) {
                            case 'PERMISSION_DENIED':
                            case 'PermissionDeniedError':
                                that.$message({
                                    showClose: true,
                                    message: '用户拒绝提供信息',
                                    type: 'error'
                                });
                                break;
                            case 'NOT_SUPPORTED_ERROR':
                            case 'NotSupportedError':
                                that.$message({
                                    showClose: true,
                                    message: '浏览器不支持硬件设备',
                                    type: 'error'
                                });
                                break;
                            case 'MANDATORY_UNSATISFIED_ERROR':
                            case 'MandatoryUnsatisfiedError':
                                that.$message({
                                    showClose: true,
                                    message: '无法发现指定的硬件设备',
                                    type: 'error'
                                });
                                break;
                            default:
                                that.$message({
                                    showClose: true,
                                    message: '无法打开麦克风',
                                    type: 'error'
                                });
                                break;
                            }
                        }
                    );
                }
            } else {
                this.stopRecording(); // 发送语音
            }
        },
        cancleRecording() {
            if (this.microphone) {
                clearInterval(this.inter);
                this.seconds = 0;
                this.microphone.stop();
                this.microphone = null;
                this.recordSending = false;
                this.recorders = null;
            }
        },
        // 停止录制 发送语音
        stopRecording() {
            this.audioPlay = true;
            const that = this;
            this.recorders.stopRecording(function(blobURL) {
                clearInterval(that.inter);
                that.seconds = 0;
                const blob = that.recorders.getBlob();
                const fd = new FormData();
                fd.append('file', blob);
                uploadAudioFiles(fd)
                    .then((data) => {
                        that.textContent = '';
                        that.audioPlay = false;
                    })
                    .catch(error => {
                        console.log(error);
                        that.$message.error('语音发送失败: ' + error.message);
                        that.audioPlay = false;
                    });
                if (that.microphone) {
                    that.microphone.stop();
                    that.microphone = null;
                    that.recordSending = false;
                    that.recorders = null;
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
	#record_progress_bar{
		width: 40px;
		height: 40px;
		position: absolute;
		left: 0;
		top: 0;
		border-radius: 50%;
	}
	.userHeader{margin-bottom: 2px;}
	.userChatTime{font-size: 12px;display:inline-block;}
	.chatContentInClass{
		display: inline-block;
		width: 100%;
	}
	.leftUser{
		float: left;
		margin-left: 10px;
		margin-top: 10px;
		display: inline-block;
	}
	.chat-box-footer-create{
		font-size: 16px;
		text-align: center;
		color: #fff;
		position: absolute;
		right: 5px;
		top: 6px;
		line-height: 30px;
		cursor: pointer;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: green;
		border: none;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.chat-box-footer-send{
		background: #F2F2F2;
		right: 55px;
		cursor: pointer;
		.icon-yuyin{
			color: #333;
			font-size: 24px;
			margin: 0;
		}
		&.active{
			.icon-yuyin{
				color: green;
			}
		}
		.close_icon{
			position: absolute;
			top: -15px;
			left: 11px;
			font-size: 16px;
			color: #333;
			font-weight: 600;
		}
	}
</style>