Audioverse banner

Audioverse

7 devlogs
31h 24m 18s

Updated Project: CraftySound is new, Midi DAW With Ideas is massively updated, Audioverse DAW just changed UI.
A collection of web-based super super sick audio tools, built on vanilla JavaScript and third party js frameworks such as Tone.js. Audi…

Updated Project: CraftySound is new, Midi DAW With Ideas is massively updated, Audioverse DAW just changed UI.
A collection of web-based super super sick audio tools, built on vanilla JavaScript and third party js frameworks such as Tone.js. Audioverse DAW is a playground for audio recording, editing, applying FXs and more. Midi_DAW_With_Ideas is a playground for writing and playing midi files with Tone.js instruments. CraftySound is an highly customiziable audio synthesis tool, capable of oscillating multiple wavetypes at once, and includes a feature to custom draw a single wavelength at high resolution, and oscillate it to get a truly unique sound. Includes a lot of other audio tools (mostly for experimentation and fun). Banner image shows the landing page featuring a three.js solar system and cannon simulation, where users have to shoot themselves out of a cosmic cannon and land on one of the planets, in order to be redirected to the audio tools.

This project uses AI

Used Github Copilot for code completion of complicated tasks

Demo Repository

Loading README...

guitarfan

Massive Improvements for Midi DAW with Ideas:
-Falling Keys Piano Mode: every midi note in the workspace will fall and explode into particles when it collides with the piano keys; like you see in Sheet Music Boss
-Multi-Track Workflow:
+Automatically parses midi file into multiple tracks if present
-Robust tree system undo/redo function:
+Has a history log so you can revert to any edit you made
-Midi Writing tools are expansive now. Just right click on one or many midi notes to try them out!
Midi DAW is now truly a website music lovers can dream of melodies and themes in!
*Video: I uploaded Wilhelm Tell Overture midi file in the demonstration

0
guitarfan

DEVLOG FOR SHIP REVIEWERS


IMPORTANT INFO: In order to get the most out of Audioverse Tools:
-Have a few audio / music files and midi files at hand
+You can obtain mp3 files of your favorite songs from internet archive
+Search (some classical piano piece, popular songs, Undertale Megolovania) + midi file to obtain a midi sequencing file
-The tools you should try in order are Audioverse DAW (use audio files), Midi_DAW_With_Ideas (use midi files), then CraftySound (don’t need any files)
*If you are unable to obtain files, try CraftySound first, record in AudioVerse DAW, write notes in Midi_DAW_With_Ideas
*PLS READ THE INSTRUCTIONS, REFERENCE DEVLOG VIDEOS


I tried learning to code in C++ WASM; added some beta tools:
-Pro Plugin Interface (mostly just audio analysis; frequency spectrum analyzer, waveform, professional plugin like GUI)


For Audioverse DAW:
-Created a interactive tutorial for Audioverse DAW
+Copied similar tutorial from the one I made in Midi DAW
+Added animations to “Riff” the guitar character narrating the tutorial
-Metronome, tempo, zoom, and settings controls have been re-added
+They disappeared when I refactored the GUI to look like Reaper
+I moved the new toolbar down and added sufficient margin


Improved newcomer friendliness of Cosmic Cannon Landing Page:
-Added multiple slide welcome dialogue box to convey more info
-Redesigned planets to have complex geometry

1

Comments

sl4shed
sl4shed about 2 months ago

this is kinda interesting

guitarfan

Shipped this project!

Hours: 20.49
Cookies: 🍪 560
Multiplier: 27.32 cookies/hr

I made a collection of web-based audio tools. Once you land on the landing page, choose a planet you are interested in visiting, position your mouse cursor on the planet, and press spacebar (hold for power). Then, just try out and experience using the audio tools. My project is a playground for audio and music, with tons of features (it would take so long to list them all). I learned a lot about the capabilities of javascript and web languages through this project.

guitarfan

I created a exciting new audio synthesis tool called CraftySound. CraftySound lets users craft their own synth preset. CraftySound allows users to add as many oscillators as they want to create a super unique polyphonic sound, which you can export as a Json file and import back into CraftySound for further editing. Using the built in synthesizers functions of Tone.js, each oscillator can have largely different audio properties:

-Instrument type (Selects the base tone.js function instrument, )
-Waveform (17+ types of waves you can choose from)
+Choosing different waveforms unlocks a personalized set of controls for that waveform
+Detune and Volume controls (self-explantory)
+Phase dial (delays wave in microscopic amounts of time, which causes increases and decreases in amplitude in certain harmonics with other waves)
+Envelope, filters and resonance controls
-3 live visualizers: waveform, spectogram and harmonic analyzer
-Virtual Midi keyboard to trigger notes
-CUSTOM DRAW WAVEFORM (this is my favorite feature, although it doesn’t behave consistantly)
-Tone.js audio FXs, imported the code from ToneJSDeepExploration tool
+Each FX has its own custom set of parameters

*Context: I’ve been wanting to create an audio tool to allow user to customize a sound preset at a low level.
I created other tools like ParameterAudioEditor and Wavetable_Synth to achieve this, but they didn’t work like
I wanted it to. It was only till I learned to incorporate the audio synthesis capabilities of Tone.js, Meyda.js and Essentia.js, that allowed me to add the feature of custom drawing a waveform.

Video demonstrates me going through most of the features of CraftySound, exporting the json and importing it back.

0
guitarfan

This is Audioverse DAW (Digital Audio Workstation), an extensive playground for working with audio.
Comprehensive Features List currently includes:
-Record, upload and playback audio - Multiple track support
+Play multiple audio blobs simultaneously
+Intuitive playback and transport controls
-Multi-Track workflow
+Solo, mute, arm recording buttons for each track
+Customize track with renaming and changing track colored
-Mixer view
+Each track/channel has its own VOLUME FADER, applied FXs, STEREO PANNING
+Mixer view has decent aesthetics, animation and organized layout (especially with faders)
-Audio FXs collection
+9 Audio FXs, each with its own custom user interface
+Reverbs, Delay, Chorus, Distortion, EQ, Compressors (I spent a lot of time on these FXs)
-Interactive Audio Editor (Modeled after Edison plugin from FL Studio)
+Big, detailed waveform visualization
+PITCH SHIFT any selected part of the audio blob
+Volume automation (that doesn’t currently work)
-Audio blob editing context menu
+Right click audio blob editing: Copy, paste, duplicate, SPLIT AT PLAYHEAD/CENTER, Quantize, rename, move to new track
+Advanced audio blob editing: REVERSE, TIME WARP
-Placeholder features: Audio analysis, dynamic tempo map, etc…
-Access animated quick guide by clicking Audioverse animated logo
Newly added features
*Massive UI overhaul to look similar to Reaper DAW
*Live visualization of audio being recorded

CAPTILIZED words are features I think are the most exciting of Audioverse DAW!
Video shows comparison of Pre-Flavortown Audioverse DAW and Post-Flavortown

0
guitarfan

Turned the 2d Audioverse Universe links page into a full-blown 3D space cannon simulation:
-Every tool is now a 3d planet orbiting a sun (which is the DAW)
+Drag your mouse to fly around the universe
+Use the new time-warp buttons in the corner to make the planets zoom or crawl at your own pace
+Check out the “Planet Bank” on the right to see exactly what each tool does before you launch
-Added a “Cosmic Cannon” because clicking links is for boomers
+Aim with the cursor crosshair, hold Space to charge your power, and blast yourself toward a planet to open it
+You can shoot from any position in the universe
+If you miss and get lost in the void, just hit ‘R’ to reset and try again
+Watch out for the particle explosions when you finally nail a landing — it’s super satisfying
*Redid TonejsInst planet’s GUI with nice blue and red colors. TonejsInst main feature is the drum sequencer.
*Video shows space cannon links page demonstration and TonejsInst drum sequencer

0
guitarfan

Created ToneJS_Deep_exploration planet;
-Made 10 core instruments built into Tone.js available to use in this tool
+10 synthesizers, all built from code, not audio samples
+Subjectively, the most interesting ones are Duosynth and AM synth
-18 Audio FXs are all good to use
+Reverbs, compressors, distortion, delays, experimentation FXs
-All “plugins” have parameters users can tweak
+Double click any plugin to modify related parameters
-Use D3 javascript library to make visual diagram routing GUI of FXs and instruments.
+Inspired by Patcher plugin from FL Studio
+Drag instruments and FXs from navigation bank on left, into workspace
+Visually connect inputs and output nodes with adaptive arrows to route the audio chain
-Press Virtual Midi Keyboard to trigger audio
+Sleek GUI and animation of virtual keyboard
+Error stopping note after releasing key, but page still produces audible sound
-Placeholder signal processors, modulators, analyzers, utilities, sequencers and so many more features coming.
-Consulted official Tone.js documentation to properly implement tone.js features
In video, I load AM synth with Freeverb FX and show GUI and features.

0
guitarfan

Made several improvements to Midi_DAW_With_Ideas html.
-Added a selection of ToneJS instruments to be triggered by midi arrangement
+Included a plugin UI quality pop up windows to adjust instrument parameters such as wave type, envelope, etc…
-Midi DAW now allows users to skip ahead or behind to wherever they want on timeline
+Pre-flavortown, users would always have to play the midi arrangement from beginning
+Auto-scrolling was available pre-flavortown, now improved syncing with playhead and triggers earlier so user can see what’s ahead
-Added multiple midi notes actions
+User can now select any number of notes using selection tool to drag a blue, dashed rectangle around desired notes
+Implemented sleek right-click menu for selected notes: delete, move up/down a semitone/octave
+Deleting notes is now available; backspace or right-click menu
-Added fun interactive tutorial demo
+Coded a guitar character named “Riff” as the guide person, who can speak via dialogue bubbles
+Has moving yellow boxes and arrows to point out every feature
*Video shows Midi DAW with an already uploaded Willhem Tell Overture midi file. I go through most features of the Midi DAW. Video is 2x sped up as video was too long to upload.
*I also did other things: modified TonejsInst and created another html called ToneJS_Deep_exploration, but I’ll talk about that next devlog, where I can upload a dedicated video for that

0