vue-record-audio
v0.1.19
Published
Paquete para la grabacion de contenido con el microfono por defecto del navegador
Downloads
158
Readme
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