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" @listenEventsRecord="listenEventsRecord" @listenEventsPlayer="listenEventsPlayer">
          <!-- 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)
}
const listenEventsRecord = (data:any)=>{
  console.log("listen record",data)
}
const listenEventsPlayer = (data:any)=>{
  console.log("listen player",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" @listenEventsPlayer="listenEventsPlayer">
        <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...."

const listenEventsPlayer = (data:any)=>{
  console.log("listen player",data)
}
</script>

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

Subir Archivo de Audio

En la parte superior derecha se tiene un boton para subir un archivo de audio, ni bien se suba un archivo este llamara al evento saveRecord y devolvera el base64