# qwik-media-recorder

> Qwik hook for record audio from microphone

Latest version **1.2.0** (published 2023-11-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install qwik-media-recorder
pnpm add qwik-media-recorder
yarn add qwik-media-recorder
bun add qwik-media-recorder
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2023-11-30 |
| First published | 2023-08-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18.0.0 |
| Dependencies | 0 |
| Unpacked size | 35 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Konstantin Chuykov |
| Maintainers | chuikoff |

## Links

- npm: https://www.npmjs.com/package/qwik-media-recorder
- Repository: https://github.com/chuikoffru/qwik-media-recorder
- npm.io page: https://npm.io/package/qwik-media-recorder

## Recent versions

- 1.2.0 (latest) — 2023-11-30
- 1.1.1 — 2023-11-30
- 1.1.0 — 2023-11-29
- 1.0.1 — 2023-11-19
- 0.1.0 — 2023-10-26
- 0.0.2 — 2023-09-22
- 0.0.1 — 2023-08-14

## 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.

[![Publish to NPM](https://github.com/chuikoffru/qwik-media-recorder/actions/workflows/npm-publish.yml/badge.svg)](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 (
    <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>
  );
});
```

---
_Source: https://npm.io/package/qwik-media-recorder · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._