August 5, 2021

Playify is a prototype, aiming to assist users in learning how to play the guitar. The technical foundation of this app involves the integration of a WebAssembly (WASM) Rust library, which computes the Fast Fourier Transform (FFT) using the Harmonic Product Spectrum technique. Additionally, a dynamic SVG (Scalable Vector Graphics) generator is employed to create and update guitar tabs in real-time.

Key Technical Features:

  • WASM Rust Library for FFT: The core of Playify's technical functionality lies in a WebAssembly (WASM) library implemented in Rust. This library is dedicated to computing the Fast Fourier Transform (FFT) using the Harmonic Product Spectrum technique. The utilization of Rust and WASM enhances computational efficiency and allows for seamless integration with web applications.

  • Harmonic Product Spectrum: The choice of Harmonic Product Spectrum in the FFT computation is a specific technique that helps identify fundamental frequencies and harmonic components in the guitar's sound spectrum. This enhances the app's ability to provide accurate feedback and insights for learning purposes.

  • Dynamic SVG Guitar Tabs: Playify incorporates dynamic SVG generation for creating and updating guitar tabs. This feature allows users to visualize and follow guitar tablature in real-time, facilitating a practical and interactive learning experience.

Learning Experience:

  • Interactive Guitar Learning: The app aims to offer an interactive and engaging learning experience for individuals aspiring to play the guitar. The combination of FFT analysis and dynamic SVG tab generation contributes to a comprehensive tool for users at various skill levels.

Example WASM with Rust

here's a simple example of a WebAssembly (WASM) code written in Rust. This example demonstrates a basic function that adds two numbers.

Create a new Rust project using Cargo:

cargo new --lib add_numbers
cd add_numbers
Open the src/ file and replace its contents with the following Rust code:
pub extern "C" fn add_numbers(a: i32, b: i32) -> i32 {
    a + b

This code defines a function named add_numbers that takes two i32 parameters and returns their sum.

To generate the WebAssembly binary, build the project with the following command:

cargo build --target wasm32-unknown-unknown

After building, the compiled WebAssembly module will be in the target/wasm32-unknown-unknown/debug directory. You can use tools like wasm2wat to inspect the generated WebAssembly text representation:

wasm2wat target/wasm32-unknown-unknown/debug/add_numbers.wasm -o add_numbers.wat

This step is optional and just provides a human-readable representation of the WebAssembly module.

Screenshot Screenshot Screenshot of the website