How to build a (guitar) tuner in Javascript ? - Part 3

app/
└── wasm/
    └── auto-correlate/
        ├── src/
        │   ├── lib.rs
        │   └── utils.rs
        ├── tests/
        ├── Cargo.toml
        ├── LICENSE_APACHE
        ├── LICENSE_MIT
        ├── README.md
        ├── .gitignore
        ├── .github/
        └── .travis.yml

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

pkg/
├── .gitignore
├── auto_correlate_bg.js
├── auto_correlate_bg.wasm
├── auto_correlate_bg.wasm.d.ts
├── auto_correlate.d.ts
├── auto_correlate.js
├── package.json
└── README.md

import init, { greet } from '../../../wasm/auto-correlate/pkg/auto_correlate'
import React, { useEffect, useState } from 'react'

export default function WorkingWasm() {
  const [greeting, setGreeting] = useState('');

  useEffect(() => {
    (async () => {
      await init()
      setGreeting(greet('Marin'))
    })()
  }, [])

  return <p>{greeting}</p>
}

use wasm_bindgen::prelude::*;
use js_sys::*;
extern crate console_error_panic_hook;

#[path = "utils.rs"] mod utils;

// Extract functions from javascript
#[wasm_bindgen]
extern "C" {
    // console.log is polymorphic so we have to declare one for each type we need
    #[wasm_bindgen(js_namespace = console, js_name = log)]
    fn log_usize(s: usize);

    #[wasm_bindgen(js_namespace = console, js_name = log)]
    fn log_f64(s: f64);

    #[wasm_bindgen(js_namespace = console, js_name = log)]
    fn log_f32(s: f32);
}

fn root_mean_square(vec: &Vec<f32>) -> f32 {
  let total_sum: f32 = vec.iter().sum();
  // casting is mandatory since rust only allows
  // operations between variables of the same type
  let vec_len: f32 = vec.len() as f32;
  (total_sum / vec_len).sqrt()
}

fn apply_buffer_threshold(vec: &Vec<f32>) -> Vec<f32> {
  let mut r1: usize = 0;
  let mut r2: usize = vec.len() - 1;
  let threshold: f32 = 0.2;

  for i in 0..vec.len()/2 {
    if vec[i].abs() < threshold {
      r1 = i;
      break;
    }
  }

  for i in 1..vec.len()/2 {
    let current_index:usize = vec.len() - i;
    if vec[current_index].abs() < threshold {
      r2 = current_index;
      break;
    }
  }

  // We need to create a new vector with the capacity required
  // before copying the slice into it
  let mut new_vec: Vec<f32> = Vec::with_capacity(r2 - r1);
  new_vec.extend_from_slice(&vec[r1..r2]);
  new_vec
}

#[wasm_bindgen]
pub fn auto_correlate(buffer: &Float32Array, sample_rate: i32) -> f32 {
  // This is to have rust errors showing up in console.
  utils::set_panic_hook();
  // Convert buffer to Vector
  let vec: Vec<f32> = buffer.to_vec();
  let rms: f32 = root_mean_square(&vec);

  if rms < 0.01 {
    -1 as f32
  } else {
    let new_buffer: Vec<f32> = apply_buffer_threshold(&vec);
    // create a correlation_array with the same size as the new_buffer
    let mut correlation_array: Vec<f32> = vec![0.0;new_buffer.len()];
    
    for i in 0..correlation_array.len() {
      // Here is a tweak to speed up rust. Do not access vector every iteration
      // create a variable and assign it at the vector index at the end
      let mut sum: f32 = 0.0;
      let item_correlation_len = correlation_array.len() - i;
      for j in 0..item_correlation_len {
        sum += new_buffer[j] * new_buffer[j+i];
      }
      correlation_array[i] = sum;
    }

    let mut d: usize = 0;

    for i in 0..correlation_array.len()-1 {
      if correlation_array[i] > correlation_array[i+1] {
        d += 1;
      } else {
        break;
      }
    }

    log_usize(d);

    let mut max_val: f32 = -1.0;
    let mut max_pos: usize = usize::MIN;

    for i in d..new_buffer.len() {
      if correlation_array[i] > max_val {
        max_val = correlation_array[i];
        max_pos = i;
      }
    }
  
    let y1: f32 = correlation_array[max_pos - 1];
    let y2: f32 = correlation_array[max_pos];
    let y3: f32 = correlation_array[max_pos + 1];

    let a: f32 = (y1 + y3 - 2.0 * y2) / 2.0;
    let b: f32 = (y3 - y1) / 2.0;
    
    let corrected_abscissa: f32 = max_pos as f32 - (b / (2.0 * a));

    sample_rate as f32 / corrected_abscissa
  }
}

#[wasm_bindgen]
pub fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

import { Note } from "@repo/mtts"
import init, { auto_correlate } from '../../../wasm/auto-correlate/pkg';

const AVERAGE_FLUCTUATION = 0.3

const notes = [
  Note.fromSPN('E2'),
  Note.fromSPN('A2'),
  Note.fromSPN('D3'),
  Note.fromSPN('G3'),
  Note.fromSPN('B3'),
  Note.fromSPN('E4'),
]

function findClosestNote(searchedFrequency: number, notesInRange: Note[]): Note {
  if (notesInRange.length <= 3) {
    let noteFound = notesInRange[0]
    let closest = Math.abs(searchedFrequency - noteFound.frequency)
    for (let i = 1; i < notesInRange.length; i++) {
      const frequencyDifference = Math.abs(searchedFrequency - notesInRange[i].frequency)
      if (closest > frequencyDifference) {
        noteFound = notesInRange[i]
        closest = frequencyDifference
      }
    }
    return noteFound
  }

  const secondHalf = notesInRange.slice(notesInRange.length / 2, notesInRange.length)

  if (searchedFrequency < secondHalf[0].frequency) {
    return findClosestNote(searchedFrequency, notesInRange.slice(0, (notesInRange.length / 2) + 1))
  }

  return  findClosestNote(searchedFrequency, notesInRange.slice((notesInRange.length / 2) - 1, notesInRange.length))
}

const TunerContainer = ({ audioStream }: TunerContainerProps) => {
  const [analyser] = useAnalyser(audioStream, 2048)
  const [guessedFrequency, setGuessedFrequency] = useState(-1)
  const [guessedNote, setGuessedNote] = useState<Note>()
  const [isLoadingWebAssembly, setIsLoadingWebAssembly] = useState<boolean>(false)

  useEffect(() => {
    if (guessedFrequency > 0) {
      setGuessedNote(findClosestNote(guessedFrequency, notes))
    } else {
      setGuessedNote(undefined)
    }

    return undefined
  }, [setGuessedNote, guessedFrequency])

  useEffect(() => {
    (async () => {
      setIsLoadingWebAssembly(true)
      try {
        await init()
        setIsLoadingWebAssembly(false)
      } catch (err) {
        console.error(err)
      }
    })()
  }, [])

  function stop() {
    clearInterval(guessingInterval)
  }

  function start() {
    if (analyser) {
      const interval = setInterval(() => {
        const buffer = new Float32Array(analyser.fftSize)
        analyser.getFloatTimeDomainData(buffer)
        if (!isLoadingWebAssembly) {
          setGuessedFrequency(autoCorrelate(buffer, analyser.context.sampleRate))
          setGuessedFrequency(auto_correlate(buffer, analyser.context.sampleRate))
        }
      }, 500) as unknown as number
      setGuessingInterval(interval)
    }
  }

  const inTune = Math.abs(guessedFrequency - guessedNote?.frequency) < AVERAGE_FLUCTUATION
  const sharp = Math.abs(guessedFrequency - guessedNote?.frequency) > AVERAGE_FLUCTUATION && (guessedFrequency - guessedNote?.frequency) > 0
  const flat = Math.abs(guessedFrequency - guessedNote?.frequency) > AVERAGE_FLUCTUATION && (guessedFrequency - guessedNote?.frequency) < 0

  <>
    { inTune && <p>it's a flat...</p> }
    <p>{guessedNote?.SPN}</p>
    { inTune && <p>in tune !</p> }
    { sharp && <p>...but it's sharp</p> }
    { isLoadingWebAssembly && <p>(loading...)</p> }
    { !isLoadingWebAssembly && (
      <>
        <button onClick={() => start()}>start</button>
        <button onClick={() => stop()}>stop</button>
      </>
    )}
  </>
}