Using HTML and CSS to create a custom audio waveform

Audio waveforms are visual representations of the audio signal that can be used to analyze the different frequencies present in the audio file. These waveforms can also be used to add visual interest to audio players on websites. In this blog post, we will learn how to use HTML and CSS to create a custom audio waveform.

Prerequisites

Before we start, you will need a basic understanding of HTML, CSS, and JavaScript. You will also need a code editor, such as Visual Studio Code, and an audio file to use as an example.

Step 1: Setting up the HTML

First, we will set up the HTML structure. We will create a container div with an audio element inside it. The audio element will have a source attribute that links to the audio file.

<div class="audio-container">
    <audio controls>
        <source src="audio-file.mp3" type="audio/mpeg">
    </audio>
</div>

We have added the "controls" attribute to the audio element so that users can play, pause, and control the volume of the audio.

Step 2: Styling the Audio Player

Next, we will style the audio player using CSS. We will add a background color, some padding, and a border radius to make it look more visually appealing.

.audio-container {
    background-color: #f2f2f2;
    padding: 20px;
    border-radius: 10px;
}

Step 3: Creating the Audio Waveform

To create the audio waveform, we will use JavaScript to analyze the audio file and generate a canvas element with the waveform drawn on it. We will add the canvas element to the HTML and position it over the audio player.

<div class="audio-container">
    <audio controls>
        <source src="audio-file.mp3" type="audio/mpeg">
    </audio>
    <canvas id="audio-waveform"></canvas>
</div>

We have added a canvas element with the ID "audio-waveform" inside the audio container.

.audio-container {
    position: relative;
}

#audio-waveform {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
}

We have positioned the canvas element at the bottom of the audio container and set its width to 100% and height to 50 pixels.

Step 4: Generating the Audio Waveform

To generate the audio waveform, we will use the Web Audio API, which allows us to analyze and manipulate audio in the browser. We will create a function called "createWaveform" that takes in the audio file and generates the waveform using the Web Audio API.

function createWaveform(audioFile) {
  // Create a new audio context
  const audioContext = new AudioContext();

  // Load the audio file into a buffer
  const audioBuffer = await audioContext.decodeAudioData(audioFile);

  // Create a new canvas element
  const canvas = document.getElementById("audio-waveform");
  const canvasContext = canvas.getContext("2d");

  // Set the canvas width and height
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;

  // Set the canvas line width and stroke color
  canvasContext.lineWidth = 2;
  canvasContext.strokeStyle = "#000000";

  // Create a new waveform analyzer
  const waveformAnalyzer = audioContext.createAnalyser();
  waveformAnalyzer.fftSize = 2048;
  const bufferLength = waveformAnalyzer.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);

  // Connect the audio buffer to the waveform analyzer
  const source = audioContext.createBufferSource();
  source.buffer = audioBuffer;
  source.connect(waveformAnalyzer);
  waveformAnalyzer.connect(audioContext.destination);
  // Draw the waveform on the canvas
  function drawWaveform() {
    requestAnimationFrame(drawWaveform);
    waveformAnalyzer.getByteTimeDomainData(dataArray);
    canvasContext.clearRect(0, 0, canvas.width, canvas.height);
    canvasContext.beginPath();

    const sliceWidth = canvas.width / bufferLength;
    let x = 0;

    for (let i = 0; i < bufferLength; i++) {
      const v = dataArray[i] / 128.0;
      const y = (v * canvas.height) / 2;

      if (i === 0) {
        canvasContext.moveTo(x, y);
      } else {
        canvasContext.lineTo(x, y);
      }

      x += sliceWidth;
    }

    canvasContext.stroke();
  }

  // Start drawing the waveform
  drawWaveform();
}

We have added an event listener to the audio element that listens for the "canplaythrough" event, which is triggered when the audio is loaded and can be played without interruption.

Conclusion

In this blog post, we have learned how to use HTML, CSS, and JavaScript to create a custom audio waveform. We used the Web Audio API to analyze the audio file and generate the waveform data, and then used the canvas API to draw the waveform on the canvas element. This technique can be used to add visual interest to audio players on websites and create a more engaging user experience.