update useSound hook

README.md

@@ -62,7 +62,7 @@ import { useSound } from "qwik-media-recorder";
 import sound from "../assets/sound.mp3";
 
 export const App = component$(() => {
-  const [play] = useSound(sound);
+  const { play, stop, isPlaying, time, undo, redo, seek, duration } = useSound(sound);
 
   return (
     <button onClick$={play}>Play</button>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "qwik-media-recorder",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "Qwik hook for record audio from microphone",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",
@@ -44,18 +44,18 @@
     "qwik": "qwik"
   },
   "devDependencies": {
-    "@builder.io/qwik": "1.2.12",
-    "@types/eslint": "8.44.2",
-    "@types/node": "^20.6.3",
-    "@typescript-eslint/eslint-plugin": "6.7.2",
-    "@typescript-eslint/parser": "6.7.2",
-    "eslint": "8.49.0",
+    "@builder.io/qwik": "1.2.15",
+    "@types/eslint": "8.44.6",
+    "@types/node": "^20.8.9",
+    "@typescript-eslint/eslint-plugin": "6.9.0",
+    "@typescript-eslint/parser": "6.9.0",
+    "eslint": "8.52.0",
     "eslint-plugin-qwik": "latest",
     "np": "8.0.4",
     "prettier": "3.0.3",
     "typescript": "5.2.2",
-    "undici": "5.25.1",
-    "vite": "4.4.9",
+    "undici": "5.27.0",
+    "vite": "4.5.0",
     "vite-tsconfig-paths": "4.2.1"
   }
 }

src/hooks/useSound.ts

@@ -1,14 +1,45 @@
 import {noSerialize, useSignal, useVisibleTask$, $, type NoSerialize} from "@builder.io/qwik";
 
-export const useSound = (sound: string) => {
+export const useSound = (url: string) => {
   const audioRef = useSignal<NoSerialize<HTMLAudioElement>>();
+  const isPlaying = useSignal(false);
+  const time = useSignal(0);
+  const duration = useSignal(0);
 
   useVisibleTask$(async () => {
-    const audio = new Audio(sound);
+    const audio = new Audio(url);
+    audio.addEventListener("play", () => isPlaying.value = true);
+    audio.addEventListener("ended", () => isPlaying.value = false);
+    audio.addEventListener("pause", () => isPlaying.value = false);
+    audio.addEventListener("timeupdate", () => {
+      time.value = audio.currentTime;
+    })
+    audio.addEventListener("loadedmetadata", () => {
+      duration.value = audio.duration;
+    })
     audioRef.value = noSerialize(audio);
   });
 
   const play = $(() => audioRef.value?.play());
+  const stop = $(() => audioRef.value?.pause());
 
-  return [play];
+  const undo = $((offset: number = 10) => {
+    if (audioRef.value) {
+      audioRef.value.currentTime -= offset
+    }
+  });
+
+  const redo = $((offset: number = 10) => {
+    if (audioRef.value) {
+      audioRef.value.currentTime += offset
+    }
+  });
+
+  const seek = $((newTime: number) => {
+    if (audioRef.value) {
+      audioRef.value.currentTime = newTime;
+    }
+  });
+
+  return {play, stop, isPlaying, time, undo, redo, seek, duration};
 }