qwik的函数提取需要 $()语法

chen56 · Aug 15, 2023 · 6f470b7 · 6f470b7
1 parent 0645977
commit 6f470b7
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 18 deletions.
diff --git a/spaces/music_note/src/routes/index.tsx b/spaces/music_note/src/routes/index.tsx
@@ -5,15 +5,12 @@ import { Link } from '@builder.io/qwik-city';
 export default component$(() => {
   return (
     <>
-      <h1>Hi 👋</h1>
+      <h1>Home 👋</h1>
       <p>
         Can't wait to see what you build with qwik!
         <br />
         Happy coding.
       </p>
-
-      <p><a href="/webaudio" class="my-link"> webaudio </a></p>
-      <p><a href="/web_audio_api" class="my-link"> web audio api  </a></p>
     </>
   );
 });

diff --git a/spaces/music_note/src/routes/layout.tsx b/spaces/music_note/src/routes/layout.tsx
@@ -16,7 +16,7 @@ export default component$(() => {
   return <>
     <header>
       <ul>
-        <li>  <a href="/webaudio" class="my-link"> webaudio </a>  </li>
+        <li>  <a href="/music" class="my-link"> music </a>  </li>
         <li> <a href="/web_audio_api" class="my-link"> web audio api  </a>  </li>
       </ul>
     </header>

diff --git a/spaces/music_note/src/routes/music/index.tsx b/spaces/music_note/src/routes/music/index.tsx
@@ -6,8 +6,8 @@ export default component$(() => {
   const playState = useSignal(false);
 
   return <div>
-    <h1>tonejs</h1>
-    <h2>example 1</h2>
+    <h1>music</h1>
+    <h2>example: 播放音符</h2>
     play:
     <button
       onClick$={() => {

diff --git a/spaces/music_note/src/routes/web_audio_api/index.tsx b/spaces/music_note/src/routes/web_audio_api/index.tsx
@@ -1,22 +1,21 @@
-import { component$, type Signal, useSignal } from '@builder.io/qwik';
+import { component$, type Signal, useSignal, $ } from '@builder.io/qwik';
 import * as Tone from 'tone'
 
+
 export default component$(() => {
 
   const playState = useSignal(false);
 
+  const play = $(() => {
+    const synth = new Tone.Synth().toDestination();
+    const now = Tone.now();
+    synth.triggerAttackRelease("C4", "8n");
+    playState.value = !playState.value;
+  });
+
   return <div>
     <h1>web audio api</h1>
-
     <h2>example 1</h2>
-    play <button
-      onClick$={() => {
-        const synth = new Tone.Synth().toDestination();
-        const now = Tone.now()
-        synth.triggerAttackRelease("C4", "8n");
-        playState.value = !playState.value;
-      }}>
-      ▶︎
-    </button>
+    play <button onClick$={play}> ▶︎ </button>
   </div>;
 });