HTML Audio Player with Visualizer

Here, we will learn how to create a custom audio player with a visualizer in HTML.

HTML Audio Player with Visualizer

HTML features include native audio and video support without the need for Flash. The below code works based on HTML, CSS, and JavaScript. You can drag and drop your local MP3 files into the container.

We recommend going through these chapters to learn about embedding audio in HTML and the <audio> tag .

Code Files to Create HTML Audio Player

Let’s look at the following example, where we are going to create a local audio visualizer

1. HTML File

try-it-yourself — CodesCompiler

Preview

Now, we are going to create a JavaScript file with the name mentioned in the above HTML file.

2. JavaScript File

HTML CODE

<script>
   (function() {
      var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      window.requestAnimationFrame = requestAnimationFrame;
   })();
   window.onload = function() {
      var element = document.getElementById('container')
      dropAndLoad(element, init, "ArrayBuffer")
   }

   function dropAndLoad(dropElement, callback, readFormat) {
      var readFormat = readFormat || "DataUrl"
      dropElement.addEventListener('dragover', function(e) {
         e.stopPropagation()
         e.preventDefault()
         e.dataTransfer.dropEffect = 'copy'
      }, false)
      dropElement.addEventListener('drop', function(e) {
         e.stopPropagation()
         e.preventDefault()
         loadFile(e.dataTransfer.files[0])
      }, false)

      function loadFile(files) {
         var file = files
         var reader = new FileReader()
         reader.onload = function(e) {
            callback(e.target.result)
         }
         reader['readAs' + readFormat](file)
      }
   }

   function init(arrayBuffer) {
      document.getElementById('instructions').innerHTML = 'Audio Loading'
      window.audioCtx = new AudioContext()
      window.analyser = audioCtx.createAnalyser()
      if (window.source) source.noteOff(0)
      audioCtx.decodeAudioData(arrayBuffer, function(buffer) {
         window.source = audioCtx.createBufferSource()
         source.buffer = buffer
         source.connect(analyser)
         analyser.connect(audioCtx.destination)
         source.start(0)
         var viz = new simpleViz()
         new visualizer(viz['update'], analyser)
         document.getElementById('instructions').innerHTML = ''
      })
   }

   function visualizer(visualization, analyser) {
      var self = this
      this.visualization = visualization
      var last = Date.now()
      var loop = function() {
         var dt = Date.now() - last
         var byteFreq = new Uint8Array(analyser.frequencyBinCount)
         analyser.getByteFrequencyData(byteFreq)
         last = Date.now()
         self.visualization(byteFreq, dt)
         requestAnimationFrame(loop)
      }
      requestAnimationFrame(loop)
   }

   function simpleViz(canvas) {
      var self = this
      this.canvas = document.getElementById('canvas')
      this.ctx = this.canvas.getContext("2d")
      this.copyCtx = document.getElementById('canvas-copy').getContext("2d")
      this.ctx.fillStyle = '#fff'
      this.barWidth = 10
      this.barGap = 4
      this.bars = Math.floor(this.canvas.width / (this.barWidth + this.barGap))
      this.update = function(byteFreq) {
         self.ctx.clearRect(0, 0, self.canvas.width, self.canvas.height)
         var step = Math.floor(byteFreq.length / self.bars)
         for (var i = 0; i < self.bars; i++) {
            var barHeight = byteFreq[i * step]
            self.ctx.fillRect(i * (self.barWidth + self.barGap), self.canvas.height - barHeight, self.barWidth, barHeight)
            self.copyCtx.clearRect(0, 0, self.canvas.width, self.canvas.height)
            self.copyCtx.drawImage(self.canvas, 0, 0)
         }
      }
   }
</script>

Complete Code to Create HTML Audio Player

Let’s combine both the file and observe the output we are going to get.

try-it-yourself — CodesCompiler

Preview

When we run the above code, it will generate an output consisting of the text applied with CSS indicating to drag the local MP3 file to play music.

HTML Audio Player with Playlist

Consider the following example, where we are allowing the user to upload the multiple local MP3s that act as a playlist.

try-it-yourself — CodesCompiler

Preview

On running the above code, the output window will pop up, allowing the user to upload multiple mp3 files and play them automatically on the webpage.