https://github.com/chuikoffru/qwik-media-recorder
Qwik hook for recording audio from microphone
https://github.com/chuikoffru/qwik-media-recorder
hooks media-recorder microphone qwik
Last synced: about 2 months ago
JSON representation
Qwik hook for recording audio from microphone
- Host: GitHub
- URL: https://github.com/chuikoffru/qwik-media-recorder
- Owner: chuikoffru
- Created: 2023-08-11T07:14:43.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-30T19:55:57.000Z (over 1 year ago)
- Last Synced: 2024-04-23T21:43:35.490Z (about 1 year ago)
- Topics: hooks, media-recorder, microphone, qwik
- Language: TypeScript
- Homepage:
- Size: 356 KB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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.
[](https://github.com/chuikoffru/qwik-media-recorder/actions/workflows/npm-publish.yml)
## 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 (
{statusRecording.value === "ready" ? (
Start
) : statusRecording.value === "paused" ? (
Resume
) : (
Pause
)}
{formattedDuration.value}{" "}
{isPlaying.value ? "Pause" : "Play"}
{statusRecording.value === "ready" && audioUrl.value ? (
Reset
) : (
Stop
)}
);
});
```
# 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 (
Play
);
});
```
# 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 (
{transcript.value}
);
});
```