voice-of-chunk
v0.1.23
Published
A library for singing voice information extraction writen in C++, compiled to TypeScript and WASM
Downloads
4
Readme
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>
);
};