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 btn-transparent" @click="ControllerRecord.cancelRecord">
              <IconClose/>
            </button>
        </template>
        <template #btnRecord="{ControllerRecord}">
            <button class="btn btn-primary" @click="ControllerRecord.playAudio">
              <IconMic v-if="!ControllerRecord.record"/>
              <IconPause color="#ffffff" v-else-if="!ControllerRecord.pause" />
              <IconPlay color="#ffffff" v-else/>
            </button>
        </template>
        <template #btnStopRecord="{ControllerRecord}">
            <button class="btn btn-sm btn-transparent" @click="ControllerRecord.stopRecord">
              <IconStop/>
            </button>
        </template>
        <!-- control de player -->
        <template #btnPlayerCancel="{ControllerPlayer}">
            <button class="btn btn-sm btn-transparent" @click="ControllerPlayer.cancelPlay">
              <IconClose/>
            </button>
        </template>
        <template #btnPlayer="{ControllerPlayer}">
            <button class="btn btn-primary" @click="ControllerPlayer.playRecord">
              <IconPause color="#ffffff" v-if="ControllerPlayer.play"/>
              <IconPlay color="#ffffff" v-else-if="ControllerPlayer.pause" />
              <IconPlay color="#ffffff" v-else/>
            </button>
        </template>
        <template #btnPlayerStop="{ControllerPlayer}">
            <button class="btn btn-sm btn-transparent" @click="ControllerPlayer.stopPlay">
              <IconStop/>
            </button>
        </template>
      </RecordsAudio>
    </div>
</template>

<script setup lang="ts">
import { RecordsAudio,IconClose,IconStop,IconMic,IconPlay,IconPause,IconDeVol,IconInVol } from "vue-record-audio"
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 :playAudioBase64="playAudioBase64" :justPlay="true">
        <template #btnPlayerCancel="{ControllerPlayer}">
            <button class="btn btn-sm btn-transparent" @click="ControllerPlayer.cancelPlay">
              <IconClose/>
            </button>
        </template>
        <template #btnPlayer="{ControllerPlayer}">
            <button class="btn btn-primary" @click="ControllerPlayer.playRecord">
              <IconPause color="#ffffff" v-if="ControllerPlayer.play"/>
              <IconPlay color="#ffffff" v-else-if="ControllerPlayer.pause" />
              <IconPlay color="#ffffff" v-else/>
            </button>
        </template>
        <template #btnPlayerStop="{ControllerPlayer}">
            <button class="btn btn-sm btn-transparent" @click="ControllerPlayer.stopPlay">
              <IconStop/>
            </button>
        </template>
    </RecordAudio>
    </div>
</template>

<script setup lang="ts">
import { RecordsAudio,IconClose,IconStop,IconMic,IconPlay,IconPause,IconDeVol,IconInVol} from "vue-record-audio"
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/*