useSound() has a new method load()

chuikoffru · Nov 30, 2023 · a040b13 · a040b13
1 parent d6cb51d
commit a040b13
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -17,19 +17,33 @@ export default component$(() => {
     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" ? (
@@ -40,15 +54,17 @@ export default component$(() => {
         <button onClick$={pauseRecording}>Pause</button>
       )}
 
-      {!audioUrl.value ? (
-        <div>{formattedDuration.value}</div>
-      ) : (
-        <audio src={audioUrl.value} controls />
-      )}
-      {statusRecording.value === "stopped" ? (
+      <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 !== "recording"}>
+        <button onClick$={stopRecording} disabled={statusRecording.value === "ready"}>
           Stop
         </button>
       )}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "qwik-media-recorder",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Qwik hook for record audio from microphone",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",

diff --git a/src/components/recorder/index.tsx b/src/components/recorder/index.tsx
@@ -1,12 +1,14 @@
-import { component$, useVisibleTask$ } from "@builder.io/qwik";
+import { component$, useVisibleTask$, $ } from "@builder.io/qwik";
 import { useMediaRecorder } from "../../hooks/useMediaRecorder";
+import { useSound } from "../../hooks/useSound";
 
 export const Recorder = component$(() => {
   const {
     startRecording,
     stopRecording,
     pauseRecording,
     resumeRecording,
+    getPreview,
     statusRecording,
     clearRecording,
     audioBlob,
@@ -15,12 +17,12 @@ export const Recorder = component$(() => {
     transcript,
   } = useMediaRecorder({ transcipt: { enable: true }, enableAnalyser: true });
 
+  const { play, isPlaying, stop, load } = useSound(audioUrl.value);
+
   useVisibleTask$(({ track }) => {
     const blob = track(() => audioBlob.value);
 
     console.log("audioBlob :>> ", blob);
-
-    //cleanup(() => clearRecording());
   });
 
   useVisibleTask$(({ track }) => {
@@ -29,6 +31,17 @@ export const Recorder = component$(() => {
     console.log("text :>> ", text);
   });
 
+  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" ? (
@@ -39,15 +52,17 @@ export const Recorder = component$(() => {
         <button onClick$={pauseRecording}>Pause</button>
       )}
 
-      {!audioUrl.value ? (
-        <div>{formattedDuration.value}</div>
-      ) : (
-        <audio src={audioUrl.value} controls />
-      )}
-      {statusRecording.value === "stopped" ? (
+      <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 !== "recording"}>
+        <button onClick$={stopRecording} disabled={statusRecording.value === "ready"}>
           Stop
         </button>
       )}

diff --git a/src/hooks/useMediaRecorder.ts b/src/hooks/useMediaRecorder.ts
@@ -219,7 +219,7 @@ export const useMediaRecorder = (options?: Options): HookReturn => {
     const url = URL.createObjectURL(data);
 
     // Меняем статус записи
-    statusRecording.value = "stopped";
+    statusRecording.value = "ready";
 
     // Записываем url в хранилище
     audioUrl.value = url;

diff --git a/src/hooks/useSound.ts b/src/hooks/useSound.ts
@@ -1,6 +1,6 @@
 import {noSerialize, useSignal, useVisibleTask$, $, type NoSerialize} from "@builder.io/qwik";
 
-export const useSound = (url: string) => {
+export const useSound = (url?: string) => {
   const audioRef = useSignal<NoSerialize<HTMLAudioElement>>();
   const isPlaying = useSignal(false);
   const time = useSignal(0);
@@ -41,5 +41,14 @@ export const useSound = (url: string) => {
     }
   });
 
-  return {play, stop, isPlaying, time, undo, redo, seek, duration};
+  const load = $((newUrl: string) => {
+    if (!audioRef.value) {
+      return;
+    }
+    audioRef.value.src = newUrl;
+    audioRef.value.load();
+  });
+
+
+  return {play, stop, load, isPlaying, time, undo, redo, seek, duration};
 }