1.Vue安装插件
npm install --registry=https://registry.npmmirror.com
2.Vue页面使用
<template>
<div class="app-container">
<!-- header -->
<el-header class="procedureHeader" style="height: 20px;">
<el-divider content-position="left">
<h3>
<el-link type="primary" style="background-color: rgba(255, 255, 255, 0.5);">语音识别</el-link>
</h3>
</el-divider>
</el-header>
<el-row>
<!-- 左侧语音录制区域-->
<el-col :span="12">
<div class="asr-left">
<el-input v-model="asrName" placeholder="请输入内容" size="small"
style="width: 192px;margin-left: 20px;margin-top: 20px;"></el-input>
<el-input type="textarea" :rows="34" placeholder="请开始录音" v-model="asrData" size="small" :readonly="true"
style="margin-left: 20px;margin-top: 20px;width: 94%;">
</el-input>
<div style="display: -webkit-box;">
<div style="margin-left: 18px;margin-top: 20px;margin-bottom: 10px;width: 82%;">
<span style="color: #303133;">时长:</span>
<span style="color: #303133;">{
{convertSecondsToHMS(recorder.duration.toFixed(4))}}</span>
<span title="开始录音" class="asr-btn" style="margin-left: 67%;" v-if="startRecord" @click="handleStartRecord">
<i class="el-icon-microphone"></i>
</span>
<span title="录音中" class="asr-btn" style="color: #1890ff;margin-left: 67%;" v-if="recordIng" @click="handleRecordIng">
<i class="el-icon-mic"></i>
</span>
<span title="播放录音" class="asr-btn" v-if="playRecord" @click="handlePlayRecord">
<i class="el-icon-video-play"></i>
</span>
<span title="播放中" class="asr-btn" v-if="playRecordIng" @click="handlePlayRecordIng">
<i class="el-icon-video-pause"></i>
</span>
<span title="结束录音" class="asr-btn" style="color: red;" @click="handleStopRecord">
<i class="el-icon-switch-button" style="font-weight: 600;"></i>
</span>
</div>
<el-button type="primary" size="mini" style="margin-top: 17px;"