vue3 使用recorder-core 实现在线录制音频
网址:https://gitee.com/xiangyuecn/Recorder
gitee:https://gitee.com/xiangyuecn/Recorder.git
代码,样式一:
<template>
<div class="learnDetail">
<!-- 音频录制 -->
<div class="main">
<div class="mainBox">
<div class="btns">
<div>
<button @click="recOpen">打开录音,请求权限</button>
<button @click="recClose">关闭录音,释放资源</button>
</div>
<button @click="recStart">录制</button>
<button @click="recStop" style="margin-right: 80px">停止</button>
<span style="display: inline-block">
<button @click="recPause">暂停</button>
<button @click="recResume">继续</button>
</span>
<span style="display: inline-block">
<button @click="recPlayLast">播放</button>
<button @click="recUploadLast">上传</button>
</span>
</div>
</div>
<div class="mainBox">
<!-- 录音波形 -->
<div class="ctrlProcessWave noneWrap" />
<!-- 录音频率计时 -->
<div class="haveWrap">
<div
class="ctrlProcessX"
style="height: 40px; background: #0b1; position: absolute"
:style="{ width: state.powerLevel + '%' }"
></div>
<div class="ctrlProcessT" style="padding-left: 50px; line-height: 40px; position: relative">
{
{
state.duration + '/' + state.powerLevel }}
</div>
</div>
</div>
<div class="mainBox">
<audio ref="LogAudioPlayer" style="width: 100%"></audio>
<!-- 日志 -->
<div class="mainLog">
<div v-for="obj in state.logs" :key="obj.idx">
<div :style="{ color: obj.color == 1 ? 'red' : obj.color == 2 ? 'green' : obj.color }">
<span v-once>[{
{
getTime() }}]</span><span v-html="obj.msg" />
<template v-if="obj.res">
{
{
intp(obj.res.rec.set.bitRate, 3) }}kbps {
{
intp(obj.res.rec.set.sampleRate, 5) }}hz 编码{
{
intp(obj.res.blob.size, 6)
}}b [{
{
obj.res.rec.set.type }}]{
{
intp(obj.res.duration, 6) }}ms
<button @click="recdown(obj.idx)">下载</button>
<button @click="recplay(obj.idx)">播放</button>
<span v-html="obj.playMsg"></span>
<span v-if="obj.down">
<span style="color: red">{
{
obj.down }}</span>
没弹下载?试一下链接或复制文本<button @click="recdown64(obj.idx)">生成Base64文本</button>
<textarea v-if="obj.down64Val" v-model="obj.down64Val"></textarea>
</span>
</template>
</div>
</div>
</div>
</div>
<div v-if="state.recOpenDialogShow" class="bootomWrap">
<div style="display: flex; height: 100%; align-items: center">
<div style="flex: 1"></div>
<div style="width: 240px; background: #fff; padding: 15px 20px; border-radius: 10px">
<div style="padding-bottom: 10px">录音功能需要麦克风权限,请允许;如果未看到任何请求,请点击忽略~</div>
<div style="text-align: center"><a @click="waitDialogClick" style="color: #0b1">忽略</a></div>
</div>
<div style="flex: 1"></div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import Recorder from 'recorder-core'
// 需要使用到的音频格式编码引擎的js文件统统加载进来,这些引擎文件会比较大
import 'recorder-core/src/engine/mp3'
import 'recorder-core/src/engine/mp3-engine'
import 'recorder-core/src/extensions/waveview'
import {
reactive, ref } from 'vue'
import {
ElNotification, ElMessage } from 'element-plus'
const LogAudioPlayer = ref()
const state = reactive({
Rec: Recorder,
type: 'mp3',
bitRate: 16,
sampleRate: 16000,
rec: