Old school D3 from simpler times

All examples By author By category About

vlandham

Full window Github gist

spectrogram

Interactive Spectrogram in the browser!

Same as example in: https://github.com/vlandham/spectrogramJS - but in blocks.

Click 'analyze' to play the sound and create spectrogram.

Uses web audio api.

Also uses D3 with canvas to display the main visualization.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>SpectrogramJS</title>
    <style>
canvas, svg {
  position: absolute;
  top: 0;
  left: 0;
}

.spectrogram {
  position: relative;
}

.axis {
  font: 14px sans-serif;
}

.axis path,
.axis line {
  fill: none;
}

.axis line {
  shape-rendering: crispEdges;
  stroke: #444;
  stroke-width: 1.0px;
  stroke-dasharray: 2,4;
}

</style>
  </head>
  <body>
    <h1>SpectrogramJS</h1>
    <p>Visualize sounds using a spectrogram - right in your browser!</p>

<div id="vis" class="spectrogram"></div>

<p><a href="https://github.com/vlandham/spectrogramJS">See how to use SpectrogramJS</a></p>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="spectrogram.js"></script>
    <script>
      var sample = new Spectrogram('bird_short.ogg', "#vis", {width:500, height:200, maxFrequency:8000});
    </script>
  </body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>SpectrogramJS</title>
    <style>
canvas, svg {
  position: absolute;
  top: 0;
  left: 0;
}
​
.spectrogram {
  position: relative;
}
​
.axis {
  font: 14px sans-serif;
}
​
.axis path,
.axis line {
  fill: none;
}
​
.axis line {
  shape-rendering: crispEdges;
  stroke: #444;
  stroke-width: 1.0px;
  stroke-dasharray: 2,4;
}
​
    </style>
  </head>
  <body>
    <h1>SpectrogramJS</h1>
    <p>Visualize sounds using a spectrogram - right in your browser!</p>
​
    <div id="vis" class="spectrogram"></div>
​
    <p><a href="https://github.com/vlandham/spectrogramJS">See how to use SpectrogramJS</a></p>
    
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="spectrogram.js"></script>
    <script>
      var sample = new Spectrogram('bird_short.ogg', "#vis", {width:500, height:200, maxFrequency:8000});
    </script>
  </body>
</html>
​
    

Modified http://d3js.org/d3.v3.min.js to a secure url

https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js

https://d3js.org/d3.v3.min.js