This is a repository to experimentally convert the FBD Sequencer into a web application.
- 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.
-
Clone the repository.
git clone https://github.com/ain1084/fbdplay_wasm.git
-
Obtain a personal access token from GitHub and grant it Read access to code and metadata.
-
Paste the token into the
.env
file in the formatGITHUB_TOKEN=token
.rust_fbdplay_wasm/.env
GITHUB_TOKEN=github_pat_123456789aaaa.......
-
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", }, }, }, ... });
-
Run the following commands to start the development server.
npm install npm run dev
-
Access the URL displayed at startup (e.g., http:https://localhost:3000/) in your browser.
How to deploy and operate on Vercel.
- Fork the repository.
- 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.
- 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.
- Import the GitHub repository worked on above.
- Change Project Settings.
- Environment Variables: Add environment variables
- Name: GITHUB_TOKEN, Value: personal access token.
- Environment Variables: Add environment variables
- 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:https://www.apache.org/licenses/LICENSE-2.0)
- MIT license (LICENSE-MIT or http:https://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.