fix: Sampler documentation (#62)

danigb · web-flow · commit 0e38c711ed6b · 2024-02-18T12:36:00.000+01:00
diff --git a/README.md b/README.md
@@ -296,16 +296,21 @@ const piano = new SplendidGrandPiano(context, { storage });
 
 ### Sampler
 
-An audio buffer sampler.
+An audio buffer sampler. Pass a `buffers` object with the files to be load:
 
 ```js
 import { Sampler } from "smplr";
 
-const samples = {
+const buffers = {
   kick: "https://danigb.github.io/samples/drum-machines/808-mini/kick.m4a",
   snare: "https://danigb.github.io/samples/drum-machines/808-mini/snare-1.m4a",
 };
-const sampler = new Sampler(new AudioContext(), { samples });
+const sampler = new Sampler(new AudioContext(), { buffers });
+```
+
+And then use the name of the buffer as note name:
+
+```js
 sampler.start({ note: "kick" });
 ```
 
diff --git a/site/package-lock.json b/site/package-lock.json
diff --git a/site/package.json b/site/package.json
@@ -17,7 +17,6 @@
     "webmidi": "^3.1.5"
   },
   "devDependencies": {
-    "@next/font": "^13.4.2",
     "@types/node": "^20.1.7",
     "@types/react": "^18.2.6",
     "@types/react-dom": "^18.2.4",
diff --git a/site/pages/index.tsx b/site/pages/index.tsx
@@ -1,4 +1,4 @@
-import { Inter } from "@next/font/google";
+import { Inter } from "next/font/google";
 import Head from "next/head";
 import { DrumMachineExample } from "src/DrumMachineExample";
 import { ElectricPianoExample } from "src/ElectricPianoExample";
diff --git a/site/pages/tests.tsx b/site/pages/tests.tsx
@@ -0,0 +1,49 @@
+import { Inter } from "next/font/google";
+import Head from "next/head";
+import { useEffect, useRef } from "react";
+import { Sampler } from "smplr";
+import { getAudioContext } from "src/audio-context";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export default function Tests() {
+  const samplerRef = useRef<Sampler | null>(null);
+
+  useEffect(() => {
+    const audioContext = getAudioContext();
+    const sampler = new Sampler(audioContext, {
+      buffers: { test: "test.mp3" },
+    });
+    samplerRef.current = sampler;
+  }, []);
+
+  return (
+    <>
+      <Head>
+        <title>smplr</title>
+        <meta name="description" content="Plug and play web instruments" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Head>
+      <main className={"max-w-4xl mx-auto my-20 p-4" + inter.className}>
+        <div className="flex items-end mb-16">
+          <h1 className="text-6xl font-bold">smplr</h1>
+        </div>
+
+        <div>
+          <button
+            onClick={() => {
+              samplerRef.current?.start({
+                note: "test",
+                loop: true,
+                loopStart: 1.0,
+                loopEnd: 9.0,
+              });
+            }}
+          >
+            Play
+          </button>
+        </div>
+      </main>
+    </>
+  );
+}
diff --git a/site/public/test.mp3 b/site/public/test.mp3

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Inter } from "@next/font/google";`
	`1`	`+import { Inter } from "next/font/google";`
`2`	`2`	`import Head from "next/head";`
`3`	`3`	`import { DrumMachineExample } from "src/DrumMachineExample";`
`4`	`4`	`import { ElectricPianoExample } from "src/ElectricPianoExample";`