dogayuksel/webkeyfinder

Musical Key Detection in the browser

Introduction

webKeyFinder is a browser application for musical key detection. webKeyFinder works with an audio stream or audio files.

Audio Stream / Live Detection

Using an AudioWorkletProcessor, incoming audio stream is recorded in pulse-code modulation format. Once roughly one second of audio is recorded, the chuck is sent to a web worker running the key finder WebAssembly module. Message passing and analysis repeats until key detection is ended.

Audio File / File Analysis

To prepare for analysis, audio files are first decoded into pulse-code modulation format. Once decoding is done, one second chunks are sent to the web worker running the key finder WebAssembly module. Message passing and analysis repeats until whole audio file is exhausted.

In contrast to live analysis, key detection workload for audio files can be processed in parallel. Once decoding is completed on the main thread, each audio file in the queue works with a dedicated web worker.

Refer to system overview for more details.

Instructions

webKeyFinder consists of two packages. key-finder-wasm provides the web worker for audio key analysis. key-finder-web consumes key-finder-wasm and provides the interfaces to run the key analysis on audio streams and audio files.

key-finder-wasm already includes the built artifacts, key-finder-web can be run without compiling the wasm module.

key-finder-wasm

Prerequisites

emscripten

• installation instructions using emsdk
• make sure emsdk is available on your path

source ./<emsdk-directory>/emsdk.env.sh

curl

sudo apt-get update
sudo apt-get install curl

Installation

Following command will fetch FFTW3 and libKeyFinder and compile it using emscripten.

yarn build:wasm

key-finder-web

Prerequisites

yarn

• yarn installation

Install dependencies

yarn install

Build

yarn build:web

Serve Locally

yarn serve

Acknowledgments

This project is possible thanks to the emscripten library which allowed me to compile, libKeyFinder (originally written by Ibrahim Sha’ath) and its dependency FFTW for the browser.

webkeyfinder's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update dependency typescript to v5.4.5
• Update dependency preact to v10.20.2
• Update dependency husky to v9
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• Update Yarn to v3.8.1

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency lint-staged to v15.2.2
• Update dependency cypress to v13.8.1
• Update dependency prettier to v3.2.5
• Update docker/dockerfile Docker tag to v1.7
• Update Yarn to v4
• Update actions/upload-artifact action to v4
• Update dependency rollup to v4
• Update dependency serve to v14
• Update docker/setup-buildx-action action to v3
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

dockerfile

Dockerfile

• docker/dockerfile 1.4

github-actions

.github/workflows/build-and-test.yml

• docker/setup-buildx-action v2
• actions/checkout v4
• cypress-io/github-action v6
• actions/upload-artifact v3

.github/workflows/clean-old-packages.yml

• snok/container-retention-policy v2

npm

package.json

• cypress 13.6.1
• husky 8.0.3
• lint-staged 15.2.0
• prettier 3.1.1
• yarn 3.6.4

packages/key-finder-wasm/package.json

• yarn 3.6.4

packages/key-finder-web/package.json

• @rollup/plugin-node-resolve 15.2.3
• @rollup/plugin-typescript 11.1.6
• @surma/rollup-plugin-off-main-thread 2.2.3
• normalize.css 8.0.1
• preact 10.19.6
• preact-router 4.1.2
• rollup 2.79.1
• rollup-plugin-css-only 4.5.2
• serve 13.0.4
• tslib 2.6.2
• typescript 5.4.2
• uuid 9.0.1
• yarn 3.6.4

---

• Check this box to trigger a request for Renovate to run again on this repository

Inconsistent live detection results on Safari

Live results on Safari are consistently inconsistent. While playing the test song, Firefox and Chrome quickly converge on Gm, but Safari lands on A♭m. Audio levels on Safari waveform is also suspiciously low.

Key analysis on files seems work fine for all the browsers. It is likely that the AudioWorklet for Safari needs an adjustment. Testing with gain adjusted sources yields the same results. Perhaps there is an index mismatch regarding the inputs of the process method.

safari-firefox-chrome-results-gain-adjusted.mov