This project aims to create a Web Application using my original works: PSG Lite¹, Audio Worker Stream Library, and FBD Sequencer. In simple terms, it emulates the PSG (AY-3-8910) sound chip and plays old game music using the Web Audio API. It does not have the capability to play arbitrary music².

• Using Nuxt3 as the web framework.
• Using Vuetify3 as the UI design framework.
• Converting fbdplay implemented in Rust to WebAssembly.
• Retrieving a list of files from the fbd_files in the FBD Sequencer repository using the GitHub API.
• Getting all .fbd files and reflecting the titles obtained from their contents in the list.
• Starting playback by selecting a file.
• Implementing a settings dialog to change the clock rate, sample rate, and usage crate.
• Deploying to Vercel.

https://fbdplay-wasm.vercel.app/

(Rarely, but it may happen)if the GitHub API rate limit is reached, it may not function properly. In such cases, please wait for a while and try again.

• rustc and node should be operational
• wasm-pack installed

Includes configuration files for Dev container. Use them if necessary.

1. Clone the repository.

   git clone https://github.com/ain1084/fbdplay_wasm.git
   

2. Obtain a personal access token from GitHub and grant it Read access to code and metadata.

3. Paste the token into the .env file in the format GITHUB_TOKEN=token.

   fbdplay_wasm/.env

   GITHUB_TOKEN=github_pat_123456789aaaa.......
   

4. Modify the runtimeConfig section of nuxt.config.ts as needed. The following configuration retrieves .fbd files from https://github.com/ain1084/rust_fbd_sequencer/tree/main/fbd_files.

   export default defineNuxtConfig({
     ...
     runtimeConfig: {
       ...
       public: {
         github: {
           owner: "ain1084",
           repo: "rust_fbd_sequencer",
           path: "fbd_files",
         },
       },
     },
     ...
   });
   

5. Run the following commands to start the development server.

   npm install
   npm run dev
   

6. Access the URL displayed at startup (e.g., http://localhost:3000/) in your browser.

How to deploy and operate on Vercel.

1. Fork the repository.
2. Refer to the "Starting the Nuxt Development Server Locally" section above and make the necessary changes.
   • Change the target repository if necessary.
   • Adding the token to .env is not required for deployment.
3. Obtain a personal access token. You can reuse the token generated for the development server or create a new one.

From here, operate on Vercel.

1. Import the GitHub repository worked on above.
2. Change Project Settings.
   • Environment Variables: Add environment variables
     • Name: GITHUB_TOKEN, Value: personal access token.
3. Build.

This project uses Font "DSEG" by keshikan. If you're using this font in your project, the author appreciates a link to thir GitHub repository: keshikan/DSEG

Licensed under either of

• Apache License, Version 2.0 (LICENSE-APACHE or http://www.apache.org/licenses/LICENSE-2.0)
• MIT license (LICENSE-MIT or http://opensource.org/licenses/MIT) at your option.

Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in the work by you, as defined in the Apache-2.0 license, shall be dual licensed as above, without any additional terms or conditions.