---
title: HTML5 spectrogram on canvas with pitch estimation
canonical: https://0110.be/posts/HTML5_spectrogram_on_canvas_with_pitch_estimation
markdown_url: https://0110.be/posts/HTML5_spectrogram_on_canvas_with_pitch_estimation.md
id: 459
published_at: '2018-01-25T00:00:00Z'
updated_at: '2018-03-07T10:46:11Z'
author: Joren
tags:
- name: UGent
  markdown_url: https://0110.be/tags/UGent.md
---

# HTML5 spectrogram on canvas with pitch estimation

To present my research in an accessible way I needed a reliable way to visualize audio, audio feature extraction and processing of audio features into a higher level representation. Canvas, HTML5, javascript and the [Reveal.js](https://revealjs.com) presentation framework offered a solution.

I often need audio and video material embedded into presentations. I have had bad experiences with powerpoint/keynote and especially the LaTeX beamer package and multimedia: audio/video material does not start playing or at the wrong moment, finicky on codecs, limited compatibility, a clunky UX (whoever came up with the idea to show multimedia controls while hovering over e.g. an audio thumbnail should be reoriented towards back-end programming) all contribute to errors while handling audio/video. Moreover the interactive capabilities are limiting.

<div style="width:100%">
<iframe height="550px" width="100%" style="border:none;width:100%,height:550px"  src="https://0110.be/phd/presentation/spectrogram/index.html">
</iframe>
</div>
The component above is an interactive spectrogram which combines HTML5's web audio API capabilities with the canvas element and some Javascript to glue things together. Note that this has been tested on Chrome and Firefox only.

To experiment with the capabilities you can either [drag and drop mp3 files](https://0110.be/phd/presentation/spectrogram/file.html) or [analyse live audio from your microphone](https://0110.be/phd/presentation/spectrogram/live.html)

This is based on the [spectrogram implementation by GitHub user Boris Smus](https://github.com/borismus/spectrogram). The live pitch tracking is implemented by [Peter Hayes](https://github.com/peterkhayes/pitchfinder) which again is based on my own Java code.