qwik-media-recorder
v1.2.0
Published
Qwik hook for record audio from microphone
Downloads
397
Readme
Qwik Media Recorder
This is a simple media recorder hook for Qwik application. It allows users to record audio from their device's microphone.
Also, it displays a recording indicator and provides a simple UI to stop/pause recording.
How to use it?
export default component$(() => {
const {
startRecording,
stopRecording,
pauseRecording,
resumeRecording,
statusRecording,
getPreview,
clearRecording,
audioBlob,
formattedDuration,
audioUrl,
} = useMediaRecorder();
const { play, isPlaying, stop, load } = useSound(audioUrl.value);
useVisibleTask$(({ track, cleanup }) => {
track(() => audioBlob.value);
console.log("audioBlob :>> ", audioBlob.value);
});
const preview = $(async () => {
if (isPlaying.value) {
stop();
return;
}
const blob = await getPreview();
const url = URL.createObjectURL(blob);
load(url);
play();
});
return (
<div style={{ display: "flex", justifyContent: "space-between" }}>
{statusRecording.value === "ready" ? (
<button onClick$={startRecording}>Start</button>
) : statusRecording.value === "paused" ? (
<button onClick$={resumeRecording}>Resume</button>
) : (
<button onClick$={pauseRecording}>Pause</button>
)}
<div>
{formattedDuration.value}{" "}
<button disabled={statusRecording.value !== "paused"} onClick$={preview}>
{isPlaying.value ? "Pause" : "Play"}
</button>
</div>
{statusRecording.value === "ready" && audioUrl.value ? (
<button onClick$={clearRecording}>Reset</button>
) : (
<button onClick$={stopRecording} disabled={statusRecording.value === "ready"}>
Stop
</button>
)}
</div>
);
});
useSound() hook for Qwik
This hook just play a sound from audiofile.
import { component$ } from "@builder.io/qwik";
import { useSound } from "qwik-media-recorder";
import sound from "../assets/sound.mp3";
export const App = component$(() => {
const { play, stop, isPlaying, time, undo, redo, seek, duration } = useSound(sound);
return (
<button onClick$={play}>Play</button>
);
});
Transcript voice to text (SpeechRecognition)
export default component$(() => {
const {
startRecording,
stopRecording,
statusRecording,
transcript,
formattedDuration,
analyser
} = useMediaRecorder({ enableAnalyser: true, transcipt: { enable: true }});
useVisibleTask$(({ track }) => {
const text = track(() => transcript.value);
console.log("text :>> ", text);
});
return (
<div>
{transcript.value}
<MediaButton
status={statusRecording}
analyser={analyser}
onStart={startRecording}
onStop={stopRecording}
formattedDuration={formattedDuration}
/>
</div>
);
});