JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<div id="mp3_player">
  <div id="audio_box"></div>
  <canvas id="analizer"></canvas>
</div>

CSS

div#mp3_player{
  width:500px;
  height:60px;
  background:#000;
  padding:5px;
  margin:50px auto;
}
div#mp3_player > div > audio{
  width:500px;
  background:#000;
  float:left;
}
div#mp3_player > canvas{
  width:500px;
  height:30px;
  background:#002D3C;
  float:left;
}

JavaScript

var audio = new Audio();
audio.src = "https://dl.dropboxusercontent.com/u/33538012/6.mp3";
audio.controls = true;
audio.loop = true;
audio.autoplay = false;
var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;

//$(window).load(function() {
  initMp3Player();
//});

function initMp3Player(){
		$("#audio_box").append(audio);
    context = new AudioContext();
    analyser = context.createAnalyser();
    canvas = $("#analizer");
    ctx = canvas.getContext('2d');
    
}