Prototype embedding sfz web player

pages/_app.tsx

@@ -38,6 +38,15 @@ const App = ({ Component, pageProps }: AppProps) => {
           `,
         }}
       />
+      <Script
+        strategy="beforeInteractive"
+        id="webaudio-controls-config"
+      >{`window.WebAudioControlsOptions = { useMidi: 1 };`}</Script>
+      <Script
+        strategy="beforeInteractive"
+        src="https://github.com/kmturley/webaudio-controls/releases/download/v1.0.0/webaudio-controls.min.js"
+      />
+      <Script strategy="beforeInteractive" src="https://kmturley.github.io/sfz-web-player/sfz.min.js" />
       <Component {...pageProps} />
     </>
   );

pages/instruments/[userId]/[repoId]/[pluginId].tsx

@@ -10,6 +10,12 @@ import { pluginFileUrl } from '@studiorack/core/dist/utils';
 import Dependency from '../../../../components/dependency';
 import Downloads from '../../../../components/download';
 
+declare global {
+  interface Window {
+    Sfz: any;
+  }
+}
+
 type PluginProps = {
   plugin: PluginInterface;
   router: Router;
@@ -126,6 +132,29 @@ class PluginPage extends Component<
     }
   }
 
+  // Prototype of embedded sfz web player.
+  // There are better ways to do this.
+  loadSfzPlayer(event: React.MouseEvent) {
+    const el = document.getElementById('sfzPlayer');
+    if (!el) return;
+    if (el.className === 'open') {
+      el.className = '';
+      return;
+    }
+    const name = (event.currentTarget as HTMLTextAreaElement).getAttribute('data-name') || '';
+    const id = (event.currentTarget as HTMLTextAreaElement).getAttribute('data-repo') || '';
+    console.log('loadSfzPlayer', name, id);
+    el.innerHTML = '';
+    const player = new window.Sfz.Player('sfzPlayer', {
+      audio: {},
+      instrument: { name, id },
+      interface: {},
+    });
+    window.setTimeout(() => {
+      el.className = 'open';
+    }, 0);
+  }
+
   render() {
     return (
       <Layout>
@@ -136,6 +165,7 @@ class PluginPage extends Component<
           <meta name="og:title" content={this.state.plugin.name || ''} />
         </Head>
         <article>
+          <div id="sfzPlayer"></div>
           <div className={styles.header}>
             <div className={styles.headerInner2}>
               <Crumb
@@ -146,6 +176,19 @@ class PluginPage extends Component<
               <div className={styles.media}>
                 <div className={styles.imageContainer}>
                   {this.state.plugin.files.audio ? this.getPlayButton() : ''}
+                  {this.state.plugin.tags.includes('sfz') ? (
+                    <img
+                      className={styles.sfzPlayer}
+                      data-name={this.state.plugin.name}
+                      data-repo={this.state.plugin.repo}
+                      src={`${this.state.router.basePath}/images/sfz-player.png`}
+                      alt="open in sfz player"
+                      loading="lazy"
+                      onClick={this.loadSfzPlayer}
+                    />
+                  ) : (
+                    ''
+                  )}
                   {this.state.plugin.files.image ? (
                     <img
                       className={styles.image}

styles/global.css

@@ -1,3 +1,5 @@
+@import url("https://kmturley.github.io/sfz-web-player/main.min.css");
+
 html {
   scroll-behavior: smooth;
   scroll-padding-top: 70px;
@@ -106,3 +108,19 @@ button:hover,
 .active {
   border-bottom-color:#fff !important;
 }
+
+#sfzPlayer .player {
+  display: flex;
+  flex-direction: column;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.5s ease-out;
+}
+
+#sfzPlayer.open .player {
+  max-height: calc(100vh);
+}
+
+#sfzPlayer .editor {
+  flex-grow: 1;
+}

styles/plugin.module.css

@@ -17,6 +17,15 @@
   transform: translate(-50%, -50%);
 }
 
+.sfzPlayer {
+  cursor: pointer;
+  left: 50%;
+  position: absolute;
+  top: 100%;
+  transform: translate(-50%, -50%);
+  width: 144px;
+}
+
 .title {
   margin: 0;
 }