Create an Audio Visualizer with React and Canvas: Part 1 of 3

From the app that you’ll be building. When you pause the audio it will also freeze the current render frame.

Recently I felt compelled to take on my friends new mix and create an audio visualizer using canvas and React. I had so much fun, figuring this out, that I wanted to create a tutorial and also my very first technology blog.

You’ll need some exposure Javascript and React to follow this tutorial.

Objectives for Part 1:

• Generate a repository using Create React App
• Import a wav/mp3 file and add Play/Pause controls (You’ll need to find your own audio files)
• Create a frequency array from the audio file using the browsers AudioContext

Objectives for Part 2:

• Mount HTML’s canvas node to the DOM using React class Component
• Create an animation looper function -> animationLooper()
• Create a draw function -> drawBar()

Objectives for Part 3:

• Patience young Padawan

Step 1: Generate a repository using Create React App

If you’ve never used Create React App, click here to visit facebooks github to learn how to.

$ npx create-react-app my-audio-visualizer

Let’s spin up the server and get coding!

$ yarn start

Create two sibling folders in the src directory called Visualizer and audio. Add an audio file in the audio directory.

Now create an index.js file inside the Visualizer folder. This will serve as a basic parent component wrapper. And I’ve written my code utilizing CRC’s out of the box styles.

Your browser should be throwing errors at this point. We’ll need to feed the app what it needs — a Canvas component.

Import Visualizer component as a child component for App.js component. Remove all other child components. You’ll now render a blank screen, but that’s okay, the goal is music.

Step2: Let’s add music to our App

Create a sibling file to index.js, which will hold the core of our code. Perhaps after this tutorial you’d like to modularize the logic further. For simplicity, one file will do the trick. Create a react component named Canvas and export it as default.

Import your song and in the constructor of your class component instantiate a HTMLAudioElement.

import songFile from ‘../audio/sample.wav
...
   constructor(props){
      this.audio = new Audio(songFile);
   }
...

The ‘new Audio()’ constructor will create HTMLAudioElement, load the song on to the DOM and will provide play and pause functionality.

Create a class method named togglePlay to pass to the ‘onClick’ event. Use an if-else conditional statement to toggle play and pause. Inside the render function add a button element and use our new togglePlay method.

...
  if(audio.paused) {
    audio.play();
  } else {
    audio.paused();
  }
...
render() {
  return <>
     <button onClick={this.togglePlay}>Play/Pause</button>
   </>
 }

Part 1 Complete

Congratulations my-audio-visualizer app should be playing and pausing the song file you imported.

Click here for Part 2: https://medium.com/@luciano_5082/create-an-audio-visualizer-with-react-and-canvas-part-2-of-3-d6f389198f3a