HTML File Input to Audio Buffer in JavaScript

Question

I'm struggling to write just a simple HTML page with a form that takes an audio file as an input and passes it to a JavaScript file for manipulation.

What I Have

index.html

<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body>
    <main role="main" class="container">
      <form action="#" method="POST" enctype="multipart/form-data" class="audio-input-form">
          <label>Audio File:</label>
          <input accept="audio/*" type="file" name="audio_file"/>
          <input type="submit" value="Get BPM" />
      </form>
    </main>
     <script type="text/javascript" src="app.js"></script>
  </body>
</html>

app.js

// Package from NPM I import
import { analyze } from 'web-audio-beat-detector';

## here I want to be able to get and manipulate the audio data

Desired Result

When the form is submitted, I just want the actual file data to be available in the JavaScript file (I guess as an arraybuffer). I wish to turn it into an AudioBuffer using this tutorial but it's unclear to me how to actually pass the data off.

I tried making the form action a function in my JS file and using an onClick function as well but neither seemed to work. Would I need some form of an XHR? I'm confused as to their purpose, I don't want any kind of server running for this, just an HTML page and a JavaScript file that runs with it in the browser.

I think you can go from here stackoverflow.com/questions/10520899/… — FistyTries
– FistyTries, Commented Dec 4, 2019 at 16:35
I think that's correct as well but I think my JS file setup isn't correct. Right now, after my </body> tag I import my file called index.js as <script src="/index.js"/>. In that file I have like function onSubmit(formData) { ... } but when I set the button to call that with action="javascript:onSubmit(this)" I get onSubmit is not defined — AJwr
– AJwr, Commented Dec 4, 2019 at 17:07

chrisguttandin · Accepted Answer · 2019-12-05 01:17:31Z

I created a little example which doesn't even use a form. If you only have one input you can listen to its onchange event. This works at least for the purpose of this demo.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <input id="audio-file" accept="audio/*" disabled type="file"/>
        <script>
            import('https://dev.jspm.io/web-audio-beat-detector')
                .then(({ default: { analyze }}) => {
                    const $audioFileInput = document.getElementById('audio-file');

                    $audioFileInput.disabled = false;
                    $audioFileInput.onchange = async () => {
                        const file = $audioFileInput.files[0];

                        if (file !== undefined) {
                            $audioFileInput.disabled = true;

                            const arrayBuffer = await file.arrayBuffer();
                            const audioContext = new AudioContext();
                            const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);

                            alert(await analyze(audioBuffer));

                            $audioFileInput.disabled = false;
                        }
                    };
                });
        </script>
    </body>
</html>

I also loaded web-audio-beat-detector via jspm.io but in a real application you probably want to bundle it with something like webpack.

Creating an AudioContext each time you want to decode some audio data as I did it here is very wasteful. If you plan to decode multiple files it would make more sense to reuse one AudioContext.

Please also note that I only tested this in the latest version of Firefox and Chrome. Unfortunately it won't work in Safari though. Making it work in Safari would require much more code which is why I omitted it.

anthumchris · Accepted Answer · 2019-12-20 17:14:49Z

0

How big is the file? Ideally, you would analyze the first part of the file without requiring the entire file to be uploaded. Not sure how the beat detection algorithm works, but you could create a read buffer to obtain the first N bytes/seconds of the file to be analyzed.

answered Dec 20, 2019 at 17:14

anthumchris

9,2462 gold badges35 silver badges60 bronze badges

Collectives™ on Stack Overflow

HTML File Input to Audio Buffer in JavaScript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related