在线录音

使用mediarecorder实现纯前端在线录音，仅支持localhost和https环境，需要开启浏览器麦克风权限。

Demo

点击[完成]，将base64数据进行预览播放

<template>
  <button class="btn" @click="startRecoreder" :disabled="showRecorder">开始录音</button>
  <div class="recorder-container">
    <recorder v-model:show="showRecorder" v-if="showRecorder" @src="getRecord" showCanvas>
      <template #send>
        <button class="btn">发送</button>
      </template>
      <template #cancel>
        <button class="btn">取消</button>
      </template>
    </recorder>
    <audio :src="src" controls v-if="src"></audio>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import recorder from './recorder/recorder.vue'

const showRecorder = ref(false) // 录音
const src = ref<any>(null)

function startRecoreder () {
  showRecorder.value = true
  src.value = ''
}

/**
 * 获取录音数据
 * @param {string} base64 录音base64
 */
function getRecord (base64: string) {
  src.value = base64
}

</script>

<style scoped>
.recorder-container {
  width: 100%;
  height: 54px;
}
</style>

Props

参数	类型	说明
v-model:show	Boolean	是否显示录音界面，默认false
showCanvas	Boolean	是否显示波形图，非必须｜

Events

名称	参数	说明
src	src	录音base64

Slots

名称	说明
cancel	取消按钮
send	完成按钮