---
title: Acoustic fingerprinting in the browser with Olaf
canonical: https://0110.be/posts/Acoustic_fingerprinting_in_the_browser_with_Olaf
markdown_url: https://0110.be/posts/Acoustic_fingerprinting_in_the_browser_with_Olaf.md
id: 506
published_at: '2023-09-27T00:00:00Z'
updated_at: '2023-10-03T13:06:53Z'
author: Joren
tags:
- name: Code
  markdown_url: https://0110.be/tags/Code.md
- name: UGent
  markdown_url: https://0110.be/tags/UGent.md
---

# Acoustic fingerprinting in the browser with Olaf

The recent version of the OLAF (Overly Lightweight Acoustic Fingerprinting) audio fingerprinting system also includes an updated WASM build which deserves a bit more attention.

The browser version of Olaf enables [audio fingerprinting in the browser](https://0110.be/attachment/cors/2023.09.olaf-wasm-demo/basic.html). This can be used to e.g. react to music playing in the environment, so called *second screen applications* or to synchronize several devices to an audio stream.

The goal of the demo below is to play music aloud - not using headphones - using the controls on the left. You can either play the reference track or an unrelated distractor. Next, the Olaf fingerpinter system needs to be started using the button on the right which captures the microphone of your device. Then Olaf tries match the incoming sound of the microphone and the reference track. Once a match is found the exact time in the match is displayed until the sound matches no more. Note that there is no direct information flowing between the left and right part. You can also play the reference on another device to be sure.

<div style="display:grid;grid-template-columns: 1fr 1fr;grid-gap:1.5rem;align-items: center;">
<div style="border-right:1px solid gray;padding-right:1.5rem">
Reference:<br>

<audio style="width:100%" preload="false" src="https://0110.be/files/attachments/506/reference.ogg" controls>
</audio>
<br>\
Distractor:<br>

<audio style="width:100%" preload="false" src="https://0110.be/files/attachments/506/147199.mp3" controls>
</audio>
</div>
<iframe style="width:100%;border:none;height:15rem" src="https://0110.be/attachment/cors/2023.09.olaf-wasm-demo/basic.html">
</iframe>
</div>
To get this demo working with the Web Audio API and use `AudioWorklet` objects, to process audio in the background an not on the main browser thread. There is surprisingly little info to find on how to combine WASM libraries - I used both [Olaf](https://github.com/JorenSix/Olaf) and [libsamplerate-js](https://github.com/aolsenjazz/libsamplerate-js) - and the AudioWorklet environment. Thanks to one of the very few resources on [combining WASM, emscripten and AudioWorklets](https://timdaub.github.io/2021/02/25/emscripten-wasm/) led me in the right direction.

For more information, check the [Olaf acoustic fingerpinter system](https://github.com/JorenSix/Olaf) source code repository.