Svelte Elementary Template

Overview

The Svelte Elementary Template is a template for building Elementary Audio web apps. It provides various features and components to create audio-based applications easily.

Features

• Audio Engine: Utilizes the Elementary + Web Audio core engine for audio processing.
• Starter Synth: Includes a simple synth with pan and gain controls.
• MIDI and Keyboard Controllers: Allows users to play the synth using their computer keyboard or MIDI device.
• Knobs: Provides unipolar and bipolar knobs with a custom knob component from the webaudio-controls library.
• Microtunings: Supports five equal temperaments and makes it easy to add more.
• Dark and Light Themes: Built with daisyUI, the template includes default dark and light themes that can be customized.
• App Publishing with Fission: Offers a simple process for publishing the app to the web using the Fission CLI and the Fission GH publish action.

Installation

To set up the Svelte Elementary Template, follow these steps:

1. Install dependencies.
2. Develop the application in local development by navigating to localhost:3000 in your web browser.
3. Build the app and export a static build. The output will be stored in the build directory.
4. Customize the app by updating the src/app.html file with your title and social preview tags. Replace the static/preview.png image with a preview image for your app.
5. Customize themes by updating the tailwind.config.cjs file with your colors and styles for the dark and light themes.
6. Customize knobs by replacing them with knobs from the WebKnobMan gallery. Adjust the styles and size of the webaudio-param in the src/components/controls/Knob.svelte file to match your knob.
7. Publish the app using either the Fission CLI or the GitHub publish action. For the Fission CLI, install the CLI, set up a Fission account, build the app, register a new Fission app, and publish it to the web. For the GitHub publish action, register the app with the CLI, export the machine key, add it as a GH Repository secret, and update the publish.yml file with the app’s name.

Summary

The Svelte Elementary Template is a powerful tool for building Elementary Audio web apps. With features like an audio engine, starter synth, MIDI and keyboard controllers, customizable knobs, and support for microtunings, it provides developers with the necessary components to create rich audio applications. Additionally, the template offers easy app publishing using the Fission CLI and the Fission GH publish action. Overall, it streamlines the development process and empowers users to build and publish audio apps efficiently.