README.md

## README.md

      
        

          Raw
        
        
          
            
          
          
            
              README.md
            
          
        
      
    
  
    Web Audio API to apply music frequency as the data to fuel the visualisation – based on Gary Smith's terrific post.

  

  

## app.js
(function() {
    'use strict';

    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    var audioElement = document.getElementById('audioElement');
    var audioSrc = audioCtx.createMediaElementSource(audioElement);
    var analyser = audioCtx.createAnalyser();

    // bind our analyser to the media element source.
    audioSrc.connect(analyser);
    audioSrc.connect(audioCtx.destination);

    // var frequencyData = new Uint8Array(analyser.frequencyBinCount);
    var frequencyData = new Uint8Array(200);

    var svgHeight = 600,
        svgWidth = 960;

    var svg = d3.select('body').append('svg')
        .attr({
            height: svgHeight,
            width: svgWidth
        });

    // continuously loop and update chart with frequency data.
    function renderChart() {
        requestAnimationFrame(renderChart);

        // copy frequency data to frequencyData array.
        analyser.getByteFrequencyData(frequencyData);
        // console.log(frequencyData);

        // scale things to fit
        var radiusScale = d3.scale.linear()
            .domain([0, d3.max(frequencyData)])
            .range([0, svgHeight/2 -10]);

        var hueScale = d3.scale.linear()
            .domain([0, d3.max(frequencyData)])
            .range([0, 360]);

       // update d3 chart with new data
       var circles = svg.selectAll('circle')
           .data(frequencyData);

        circles.enter().append('circle');

        circles
            .attr({
                r: function(d) { return radiusScale(d); },
                cx: svgWidth / 2,
                cy: svgHeight / 2,
                fill: 'none',
                'stroke-width': 4,
                'stroke-opacity': 0.4,
                stroke: function(d) { return d3.hsl(hueScale(d), 1, 0.5); }
           });

        circles.exit().remove();
    }

    // run the loop
    renderChart();

    // just for blocks viewer size
    d3.select(self.frameElement).style('height', '700px');

}());

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>d3 | visualise audio</title>
    <style>
      body {
        font-family: monospace;
        line-height: 1.5;
        background-color: #130C0E;
        padding: 20px;
      }
      button {
        font-size: 14px;
        background: #130C0E;
        color: #7AC143;
        border: none;
        outline:none;
        padding: 4px 8px;
        letter-spacing: 1px;
      }
      button:hover {
        background: #7AC143;
        color: #130C0E;
      }
    </style>
  </head>

  <body>
    <audio id="audioElement" src="shakuhachi.mp3"></audio>
    <div>
      <button onclick="document.getElementById('audioElement').play()">Play &#9658;</button>
      <button onclick="document.getElementById('audioElement').pause()">Pause ||</button>
      <button onclick="document.getElementById('audioElement').volume+=0.1">Vol +</button>
      <button onclick="document.getElementById('audioElement').volume-=0.1">Vol -</button>
    </div>

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="app.js"></script>
  </body>
</html>

## shakuhachi.mp3

      
        

          Raw
        
        
          
            
          
          
            
              shakuhachi.mp3
            
          
        
      
    
    
      This file has been truncated, but you can view the full file.
    

  
      
          View Raw
      
  

  

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png