music_note: Tone

chen56 · Sep 11, 2023 · d4a951a · d4a951a
1 parent 57b0662
commit d4a951a
Show file tree

Hide file tree

Showing 5 changed files with 103 additions and 14 deletions.
diff --git a/spaces/music_note/package-lock.json b/spaces/music_note/package-lock.json
diff --git a/spaces/music_note/package.json b/spaces/music_note/package.json
@@ -23,8 +23,7 @@
     "test.unit": "vitest components",
     "test.unit.ui": "vitest --ui components",
     "qwik": "qwik",
-    "preview.deno":"qwik build && deno run --allow-env --allow-read --allow-sys --allow-net npm:http-server ./dist/ --port 8000 -g --brotli"
-
+    "preview.deno": "qwik build && deno run --allow-env --allow-read --allow-sys --allow-net npm:http-server ./dist/ --port 8000 -g --brotli"
   },
   "devDependencies": {
     "@builder.io/qwik": "^1.2.10",
@@ -46,5 +45,8 @@
     "vite": "4.4.7",
     "vite-tsconfig-paths": "4.2.0",
     "vitest": "^0.33.0"
+  },
+  "dependencies": {
+    "tone": "^14.7.77"
   }
 }
diff --git a/spaces/music_note/src/routes/layout.tsx b/spaces/music_note/src/routes/layout.tsx
@@ -43,8 +43,9 @@ export default component$(() => {
           <div class="drawer-side">
             <label for="my-drawer-left" class="drawer-overlay"></label>
             <ul class="menu p-4 w-80 min-h-full bg-base-200 text-base-content">
-              <li><Link href="/">muisc_note (root)</Link></li>
-              <li><Link href="/music_basic">muisc_basic (prefered)</Link></li>
+              <li><Link href="/">muisc_note home</Link></li>
+              <li><Link href="/music_basic">muisc_basic</Link></li>
+              <li><Link href="/temp">temp</Link></li>
             </ul>
           </div>
         </div>

diff --git a/spaces/music_note/src/routes/music_basic/index.tsx b/spaces/music_note/src/routes/music_basic/index.tsx
@@ -1,17 +1,24 @@
-import { component$ } from "@builder.io/qwik";
+import { component$, useSignal, $ } from '@builder.io/qwik';
 import type { DocumentHead } from "@builder.io/qwik-city";
+
+import * as Tone from 'tone';
+
 export default component$(() => {
+
+  const increment = $(() => {
+
+    const now = Tone.now()
+
+    //play a middle 'C' for the duration of an 8th note
+    const synth = new Tone.Synth().toDestination();
+    synth.triggerAttackRelease("C4", "8n", now)
+    synth.triggerAttackRelease("E4", "8n", now + 0.5)
+    synth.triggerAttackRelease("G4", "8n", now + 1)
+  });
+
   return (
     <>
-      <div class="">Github GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub Github v</div>
-      <div class="">Github GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub Github v</div>
-      <div class="">Github GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub Github v</div>
-      <div class="">Github GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub Github v</div>
-      <div class="">Github GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub Github v</div>
-      <div class="">Github GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub Github v</div>
-      <div class="">Github GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub Github v</div>
-      <div class="">Github GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub Github v</div>
-      <div class="">Github GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub GithubGithub Github v</div>
+      <div onClick$={increment} class="btn"></div>
     </>
   );
 });

diff --git a/spaces/music_note/src/routes/temp/index.tsx b/spaces/music_note/src/routes/temp/index.tsx
@@ -0,0 +1,24 @@
+import { component$, useSignal, $, noSerialize, type NoSerialize } from '@builder.io/qwik';
+import * as Tone from 'tone'
+
+export default component$(() => {
+  return (
+    <>
+      <section>Example1: <Synth></Synth></section>
+    </>
+  );
+});
+
+export const Synth = component$(() => {
+  //pure js browser code , look like too complex
+  const synth = useSignal<Tone.Synth | undefined>();
+  const playAudio = $(() => {
+    synth.value ??= noSerialize(new Tone.Synth().toDestination());
+    synth.value!.triggerAttackRelease("C4", "8n");
+  });
+  return (
+    <>
+      <button onClick$={playAudio}>playAudio</button>
+    </>
+  );
+});