feat: add react sample for audio

glzr-io · Nov 30, 2024 · 6d377c7 · 6d377c7
1 parent 001951b
commit 6d377c7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/examples/boilerplate-react-buildless/index.html b/examples/boilerplate-react-buildless/index.html
@@ -37,6 +37,7 @@
         memory: { type: 'memory' },
         weather: { type: 'weather' },
         media: { type: 'media' },
+        audio: { type: 'audio' },
       });
 
       createRoot(document.getElementById('root')).render(<App />);
@@ -50,8 +51,24 @@
 
         return (
           <div className="app">
+            {output.audio?.defaultPlaybackDevice && (
+              <div class="chip">
+                {output.audio.defaultPlaybackDevice.name}-
+                {output.audio.defaultPlaybackDevice.volume}
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  step="2"
+                  value={output.audio.defaultPlaybackDevice.volume}
+                  onChange={e =>
+                    output.audio.setVolume(e.target.valueAsNumber)
+                  }
+                />
+              </div>
+            )}
             <div class="chip">
-              Media: {output.media?.currentSession?.title} -
+              Media: {output.media?.currentSession?.title}-
               {output.media?.currentSession?.artist}
               <button onClick={() => output.media?.togglePlayPause()}>
                 ⏯

diff --git a/examples/boilerplate-solid-ts/src/index.tsx b/examples/boilerplate-solid-ts/src/index.tsx
@@ -37,7 +37,7 @@ function App() {
         </div>
       )}
       <div class="chip">
-        Media: {output.media?.currentSession?.title} -
+        Media: {output.media?.currentSession?.title}-
         {output.media?.currentSession?.artist}
         <button onClick={() => output.media?.togglePlayPause()}>⏯</button>
       </div>