<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: zheng</title>
    <description>The latest articles on DEV Community by zheng (@zheng_9094a855fc59df623af).</description>
    <link>https://dev.to/zheng_9094a855fc59df623af</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4135817%2Fda29bc88-8506-4aa5-9949-00a01e9d9ee5.png</url>
      <title>DEV Community: zheng</title>
      <link>https://dev.to/zheng_9094a855fc59df623af</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/zheng_9094a855fc59df623af"/>
    <language>en</language>
    <item>
      <title>Shipping a polyphonic audio-to-MIDI converter that runs entirely in the browser</title>
      <dc:creator>zheng</dc:creator>
      <pubDate>Mon, 21 Sep 2026 13:17:54 +0000</pubDate>
      <link>https://dev.to/zheng_9094a855fc59df623af/shipping-a-polyphonic-audio-to-midi-converter-that-runs-entirely-in-the-browser-2dim</link>
      <guid>https://dev.to/zheng_9094a855fc59df623af/shipping-a-polyphonic-audio-to-midi-converter-that-runs-entirely-in-the-browser-2dim</guid>
      <description>&lt;p&gt;Almost every "audio to MIDI" tool follows the same shape: upload the file, wait, download a &lt;code&gt;.mid&lt;/code&gt;. That is&lt;br&gt;
fine until you notice what you just handed over — a demo, an unfinished song, a client's reference track.&lt;/p&gt;

&lt;p&gt;So the constraint I set for Tonera was: &lt;strong&gt;the standard conversion must never upload the audio.&lt;/strong&gt; Everything&lt;br&gt;
below is what that constraint costs, and what I got for paying it.&lt;/p&gt;

&lt;h2&gt;
  
  
  What actually runs in the page
&lt;/h2&gt;

&lt;p&gt;The transcription model is Spotify's &lt;a href="https://github.com/spotify/basic-pitch" rel="noopener noreferrer"&gt;Basic Pitch&lt;/a&gt; — an open-source&lt;br&gt;
polyphonic pitch-detection model. It does not need a GPU cluster; it needs a fixed input shape and a bounded&lt;br&gt;
amount of memory, which makes it a candidate for running client-side instead of behind an API.&lt;/p&gt;

&lt;p&gt;The pipeline in the browser is deliberately boring:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;decode the file the user dropped (AudioContext / WebAudio),&lt;/li&gt;
&lt;li&gt;downmix to &lt;strong&gt;22.05 kHz mono&lt;/strong&gt; — the sample rate the model expects,&lt;/li&gt;
&lt;li&gt;run the model, which returns pitch/onset/contour estimates,&lt;/li&gt;
&lt;li&gt;turn those estimates into notes the user can inspect and edit,&lt;/li&gt;
&lt;li&gt;export.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Steps 1, 2, 4 and 5 are ordinary deterministic code. Only step 3 is a model. Keeping that line sharp matters:&lt;br&gt;
it means the &lt;em&gt;editable&lt;/em&gt; part of the result (note boundaries, quantisation, notation) can be recomputed&lt;br&gt;
instantly and reproducibly, while the model runs exactly once per file.&lt;/p&gt;

&lt;h2&gt;
  
  
  The ceiling nobody advertises: memory
&lt;/h2&gt;

&lt;p&gt;The honest reason there is a ten-minute cap is RAM, not licensing. Decoded 22.05 kHz mono audio plus the&lt;br&gt;
model's intermediate tensors have to fit in a browser tab; a phone and a desktop are very different budgets.&lt;br&gt;
Instead of silently failing on a long rehearsal recording, the limit is stated up front.&lt;/p&gt;

&lt;p&gt;The practical workaround is the same one audio engineers already use: &lt;strong&gt;split around musical sections and&lt;br&gt;
convert the passage you actually need.&lt;/strong&gt; You rarely want MIDI for the four minutes of tuning and talking at&lt;br&gt;
the start of a rehearsal take.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where transcription actually goes wrong
&lt;/h2&gt;

&lt;p&gt;Not where people assume. It is not "MP3 bad, WAV good" — converting an MP3 to WAV before uploading changes&lt;br&gt;
the container and restores nothing that the encoder already discarded.&lt;/p&gt;

&lt;p&gt;What breaks transcription is &lt;em&gt;evidence&lt;/em&gt;, not bitrate:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;compression artefacts&lt;/strong&gt; — short, blurred attacks in the high end look like note onsets;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;reverb and room sound&lt;/strong&gt; — tails smear note boundaries;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;overlapping harmonics&lt;/strong&gt; — a dense mix asks the model to separate instruments it was never told to separate;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;quiet grace notes&lt;/strong&gt; — the first thing an encoder spends fewer bits on.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That is why the result view is not a download button. It is a note map plus five controls: onset threshold,&lt;br&gt;
frame threshold, minimum note length, and a low/high frequency range — with the discarded candidates still&lt;br&gt;
visible, so raising a threshold is a decision you can see rather than trust.&lt;/p&gt;

&lt;p&gt;Post-processing does the rest of the cleanup: quantise to a grid at the detected tempo, split into left/right&lt;br&gt;
hand, smooth velocities, transpose. All of it re-runs instantly and free, because none of it touches the model.&lt;/p&gt;

&lt;h2&gt;
  
  
  Exports are where the tool earns its place in a workflow
&lt;/h2&gt;

&lt;p&gt;One detection pass, several outputs, because the next step differs by person:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;MIDI&lt;/strong&gt; — straight into a DAW;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;MusicXML&lt;/strong&gt; — into notation software with real engraving;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;PDF&lt;/strong&gt; — for reading, printing, handing to a player;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;ABC notation&lt;/strong&gt; — for text-based / folk workflows;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;chord chart&lt;/strong&gt; — for the "I just need the changes" case.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;MusicXML→MIDI, MIDI preview and WAV synthesis are deterministic converts, not generative: if you ask for the&lt;br&gt;
same file twice you get byte-comparable behaviour, not a new opinion.&lt;/p&gt;

&lt;h2&gt;
  
  
  When server-side work is justified
&lt;/h2&gt;

&lt;p&gt;Dense mixes are a genuine hard case, and pretending otherwise would be dishonest. So there is an optional&lt;br&gt;
high-precision mode that runs &lt;strong&gt;HTDemucs&lt;/strong&gt; stem separation before transcription — the audio &lt;em&gt;is&lt;/em&gt; uploaded for&lt;br&gt;
that path, it is labelled before it happens, and it costs credits because it consumes real compute.&lt;/p&gt;

&lt;p&gt;Retention is stated rather than implied: temporary source objects are covered by a one-day lifecycle rule and&lt;br&gt;
generated stems by a seven-day rule. If a workflow does not need that mode, nothing leaves the device at all.&lt;/p&gt;

&lt;h2&gt;
  
  
  Four things I would tell anyone building this
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Do not promise one accuracy number.&lt;/strong&gt; Results depend on instrumentation, room, compression and overlap.
Publish the limits next to the tool; it is the difference between a demo and something a musician trusts.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Test on real material&lt;/strong&gt; — phone memos, 128 kbps downloads, full mixes. A clean studio solo makes every
model look good.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Expose the uncertainty.&lt;/strong&gt; Discarded notes are as informative as kept ones; a threshold without visible
consequences is just a slider.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Keep the model at one end of the pipeline.&lt;/strong&gt; The moment transcription output is frozen into notes, the
rest should be cheap, fast and reversible.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Tonera is where I put this together — it runs in the browser, the standard conversion is free and needs no&lt;br&gt;
account, and the accuracy trade-offs are documented rather than buried:&lt;br&gt;
&lt;strong&gt;&lt;a href="https://tonera.app" rel="noopener noreferrer"&gt;https://tonera.app&lt;/a&gt;&lt;/strong&gt; · method and limits: &lt;a href="https://tonera.app/blog/basic-pitch-accuracy-guide" rel="noopener noreferrer"&gt;https://tonera.app/blog/basic-pitch-accuracy-guide&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;If you try it on something and the result is bad, that is useful information — the failure modes above are&lt;br&gt;
exactly what I want to hear about.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>audio</category>
      <category>midi</category>
    </item>
  </channel>
</rss>
