Voice Of Chunk

A library for singing voice information extraction writen in C++, compiled to TypeScript and WASM

Voice Of Who?

WASM parses data as "chunks" and this is a vocal information extraction library. Voice Of Chunk is also a phenomenal record by New York jazz/no-wave group The Lounge Lizards.

Installation

Webpack

Install the package and copy-webpack-plugin in order to copy the package's .wasm file into your development and production builds.

yarn add voice-of-chunk
yarn add copy-webpack-plugin --dev

Then you can specify the following in your webpack.config.js, something along the lines of this...

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ... other webpack configuration ...

  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
                from: 'voice-of-chunk/dist/voice-of-chunk.wasm',
                to: '[name].[ext]', // Automatically preserve the original filename and extension
                context: 'node_modules',
        },
      ],
    }),
    // ... other plugins ...
  ],
};

Make sure you have the proper rules for loading in TypeScript as well...

module: {
        rules: [
            {
                test: /\.(ts|tsx)$/, // Handle TypeScript files
                use: {
                    loader: 'ts-loader',
                }, // Use ts-loader for TypeScript files
                exclude: /node_modules/,
            },
        ],
    },

Usage

Voice Of Chunk exports a single module called "Chunk" which you can import like any other React component

import Chunk from 'voice-of-chunk'

You'll need an asyncronous function to load Chunk and its functions. Below is an example of a React functional component that loads in Chunk and calculates a magnitude spectrum on a window of random samples...

import { useEffect, useState, FC } from 'react';
import * as React from 'react';
import Chunk from 'voice-of-chunk';

export const FFT: FC = () => {
    const [fftResult, setFFTResult] = useState<null | Float32Array>(null);

    useEffect(() => {
        // Generate an array of random float values
        function generateRandomFloatArray(length: number): Float32Array {
            const arr = new Float32Array(length);
            const min = -328750;
            const max = 328750;
            for (let i = 0; i < length; i++) {
                arr[i] = Math.fround(min + Math.random() * (max - min));
            }
            return arr;
        }

        async function loadAndRunFibWasm() {
            const Module = await Chunk;
            // Assuming you have a Float32Array named "inputArray" with data
            const inputArray = generateRandomFloatArray(100);
            console.log('Input Array: ' + inputArray);
            const len = inputArray.length;
            const inputPtr = (Module as any)._fft_audio(
                inputArray.byteOffset,
                len
            );

            // Convert the returned pointer to a Float32Array
            const magnitudeSpectrum = new Float32Array(
                (Module as any).HEAPF32.buffer,
                inputPtr,
                len
            );

            return magnitudeSpectrum;
        }
        loadAndRunFibWasm().then((result) => {
            setFFTResult(result);
        });
    }, []);

    return (
        <div>
            <h1>Magnitude Spectrum</h1>
           {fftResult}
        </div>
    );
};