vue-record-audio

Descripcion

Paquete para la grabacion de contenido con el microfono por defecto del navegador

Instalacion

Instalacion del paquete

npm i vue-record-audio

Configuracion para la Grabacion del Audio

<template>
    <div>
        <RecordsAudio :saveRecord="saveRecord" :iconsRecord="iconsRecord">
          <!-- control de grabador -->
          <template #btnCancelRecord="{ControllerRecord}">
              <button class="btn btn-sm" @click="ControllerRecord.cancelRecord"><i :class="ControllerRecord.iconBtn"></i></button>
          </template>
          <template #btnRecord="{ControllerRecord}">
              <button class="btn" @click="ControllerRecord.playAudio"><i :class="ControllerRecord.iconBtn"></i></button>
          </template>
          <template #btnStopRecord="{ControllerRecord}">
              <button class="btn btn-sm" @click="ControllerRecord.stopRecord"><i :class="ControllerRecord.iconBtn"></i></button>
          </template>
          <!-- control de player -->
          <template #btnPlayerCancel="{ControllerPlayer}">
              <button class="btn btn-sm" @click="ControllerPlayer.cancelPlay"><i :class="ControllerPlayer.iconBtn"></i></button>
          </template>
          <template #btnPlayer="{ControllerPlayer}">
              <button class="btn" @click="ControllerPlayer.playRecord"><i :class="ControllerPlayer.iconBtn"></i></button>
          </template>
          <template #btnPlayerStop="{ControllerPlayer}">
              <button class="btn btn-sm" @click="ControllerPlayer.stopPlay"><i :class="ControllerPlayer.iconBtn"></i></button>
          </template>
      </RecordsAudio>
    </div>
</template>

<script setup lang="ts">
import { RecordsAudio } from "vue-record-audio"
const iconsRecord = {
        iconMic:'icon-mic',
        iconPause:'icon-pause',
        iconPLay:'icon-play',
        iconClose:'icon-close',
        iconStop:'icon-stop'
    }
const saveRecord = (data:any) => {
    console.log(data)
}
</script>
<style>
 @import url(/node_modules/vue-record-audio/dist/style.css);
</style>

Configuracion reproducir audio sin grabacion

<template>
    <div>
    <RecordAudio :iconsRecord="iconsRecord" :playAudioBase64="playAudioBase64">
        <template #btnPlayerCancel="{ControllerPlayer}">
            <button class="btn btn-sm" @click="ControllerPlayer.cancelPlay"><i :class="ControllerPlayer.iconBtn"></i></button>
        </template>
        <template #btnPlayer="{ControllerPlayer}">
            <button class="btn" @click="ControllerPlayer.playRecord"><i :class="ControllerPlayer.iconBtn"></i></button>
        </template>
        <template #btnPlayerStop="{ControllerPlayer}">
            <button class="btn btn-sm" @click="ControllerPlayer.stopPlay"><i :class="ControllerPlayer.iconBtn"></i></button>
        </template>
    </RecordAudio>
    </div>
</template>

<script setup lang="ts">
import { RecordsAudio } from "vue-record-audio"
const iconsRecord = {
        iconMic:'icon-mic',
        iconPause:'icon-pause',
        iconPLay:'icon-play',
        iconClose:'icon-close',
        iconStop:'icon-stop'
    }
const playAudioBase64:"//vUxAADwAABpAAAAC...."
</script>

<style>
 @import url(/node_modules/vue-record-audio/dist/style.css);
</style>

Para los iconos

Debe copiar la carpeta icons a su carpeta public /public/icons/*