SergProduction · July 9, 2017 22:50
diff --git a/d3AudioChart.js b/d3AudioChart.js
 var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var audioElement = document.getElementById('myAudio');
 var audioSrc = audioCtx.createMediaElementSource(audioElement);
 var analyser = audioCtx.createAnalyser();


 document.getElementById('file').addEventListener('change', function(event){
  audioElement.src = URL.createObjectURL(this.files[0]);
 });

 audioSrc.connect(analyser);
 audioSrc.connect(audioCtx.destination);

 analyser.fftSize = 256
 var bufferLength = analyser.fftSize
 var frequencyData = new Float32Array(analyser.frequencyBinCount);
 var currentTimeData = new Float32Array(analyser.frequencyBinCount);

 var svgHeight = 300;
 var svgWidth = 1200;
 var barPadding = '1';
 var animation;

 function createSvg(parent, height, width) {
  return d3.select(parent)
    .append('svg')
    .attr('height', height)
    .attr('width', width);
 }

 var svg = createSvg('body', svgHeight, svgWidth);
 var g = svg.append("g")
 var path = g.append('path')
 var circles = g.selectAll('circle')
    .data(frequencyData)
    .enter()
    .append("circle")
    .attr("cx", (d, i) => i * (svgWidth / frequencyData.length) )

 function addAxis(){
  var xScale = d3.scaleLinear()
      .domain([0, 500])
      .range([0, svgWidth]);
  
  var xAxis = d3.axisTop(xScale)
  svg.append('g')
      .attr("class", "x axis")
      .attr("transform", "translate(0, " + (svgHeight - 1) + ")")
      .call(xAxis);
  
  var yScale = d3.scaleLinear()
      .domain([svgHeight / 2 , - svgHeight / 2])
      .range([0, svgHeight]);
  
  var yAxis = d3.axisRight(yScale)
  svg.append('g')
      .attr("class", "y axis")
      .call(yAxis)
 }
 addAxis()

 function renderChart() {
   animation = requestAnimationFrame(renderChart);
   // console.log(audioElement.currentTime)
   analyser.getFloatFrequencyData(frequencyData);
   analyser.getFloatTimeDomainData(currentTimeData)

  var line = d3.line()
    .x((d, i) => i * (svgWidth / frequencyData.length) )
    .y(d => d === -Infinity ? svgHeight : (svgHeight/2) - Number(d.toFixed(5)) )

   path
    .datum(frequencyData)
    .attr("fill", "none")
    .attr("stroke", "#000")
    .attr("d", line)

    circles
    .data(frequencyData)
    .attr("cy", d =>  d === -Infinity ? svgHeight : (svgHeight/2) - Number(d.toFixed(5)) )
    .attr("r", '2')
    .style("fill", 'none')
    .style("stroke", '#f00')

 }

 d3.select('#play')
  .on('click', (e) => {
    renderChart();
    audioElement.play()
  })

 d3.select('#pause')
  .on('click', (e) => {
    cancelAnimationFrame(animation)
    audioElement.pause()
  })

 d3.select('#stop')
  .on('click', (e) => {
    cancelAnimationFrame(animation)
    audioElement.pause()
    audioElement.currentTime = 0;
  })
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Voice equal</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/d3.min.js"></script>
 </head>
 <body>
  <audio src="check.mp3" id="myAudio"></audio>
  <input type="file" name="mp3" accept="mp3" id="file">
  <button id="play">play</button>
  <button id="pause">pause</button>
  <button id="stop">stop</button>
  <div id="root"></div>
  <script type="text/javascript" src="js/voice.js"></script>
  <script type="text/javascript" src="dev/voice.js"></script>
 </body>
 </html>
	var audioCtx = new (window.AudioContext \|\| window.webkitAudioContext)();
	var audioElement = document.getElementById('myAudio');
	var audioSrc = audioCtx.createMediaElementSource(audioElement);
	var analyser = audioCtx.createAnalyser();


	document.getElementById('file').addEventListener('change', function(event){
	audioElement.src = URL.createObjectURL(this.files[0]);
	});

	audioSrc.connect(analyser);
	audioSrc.connect(audioCtx.destination);

	analyser.fftSize = 256
	var bufferLength = analyser.fftSize
	var frequencyData = new Float32Array(analyser.frequencyBinCount);
	var currentTimeData = new Float32Array(analyser.frequencyBinCount);

	var svgHeight = 300;
	var svgWidth = 1200;
	var barPadding = '1';
	var animation;

	function createSvg(parent, height, width) {
	return d3.select(parent)
	.append('svg')
	.attr('height', height)
	.attr('width', width);
	}

	var svg = createSvg('body', svgHeight, svgWidth);
	var g = svg.append("g")
	var path = g.append('path')
	var circles = g.selectAll('circle')
	.data(frequencyData)
	.enter()
	.append("circle")
	.attr("cx", (d, i) => i * (svgWidth / frequencyData.length) )

	function addAxis(){
	var xScale = d3.scaleLinear()
	.domain([0, 500])
	.range([0, svgWidth]);

	var xAxis = d3.axisTop(xScale)
	svg.append('g')
	.attr("class", "x axis")
	.attr("transform", "translate(0, " + (svgHeight - 1) + ")")
	.call(xAxis);

	var yScale = d3.scaleLinear()
	.domain([svgHeight / 2 , - svgHeight / 2])
	.range([0, svgHeight]);

	var yAxis = d3.axisRight(yScale)
	svg.append('g')
	.attr("class", "y axis")
	.call(yAxis)
	}
	addAxis()

	function renderChart() {
	animation = requestAnimationFrame(renderChart);
	// console.log(audioElement.currentTime)
	analyser.getFloatFrequencyData(frequencyData);
	analyser.getFloatTimeDomainData(currentTimeData)

	var line = d3.line()
	.x((d, i) => i * (svgWidth / frequencyData.length) )
	.y(d => d === -Infinity ? svgHeight : (svgHeight/2) - Number(d.toFixed(5)) )

	path
	.datum(frequencyData)
	.attr("fill", "none")
	.attr("stroke", "#000")
	.attr("d", line)

	circles
	.data(frequencyData)
	.attr("cy", d => d === -Infinity ? svgHeight : (svgHeight/2) - Number(d.toFixed(5)) )
	.attr("r", '2')
	.style("fill", 'none')
	.style("stroke", '#f00')

	}

	d3.select('#play')
	.on('click', (e) => {
	renderChart();
	audioElement.play()
	})

	d3.select('#pause')
	.on('click', (e) => {
	cancelAnimationFrame(animation)
	audioElement.pause()
	})

	d3.select('#stop')
	.on('click', (e) => {
	cancelAnimationFrame(animation)
	audioElement.pause()
	audioElement.currentTime = 0;
	})
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Voice equal</title>
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<script src="js/d3.min.js"></script>
	</head>
	<body>
	<audio src="check.mp3" id="myAudio"></audio>
	<input type="file" name="mp3" accept="mp3" id="file">
	<button id="play">play</button>
	<button id="pause">pause</button>
	<button id="stop">stop</button>
	<div id="root"></div>
	<script type="text/javascript" src="js/voice.js"></script>
	<script type="text/javascript" src="dev/voice.js"></script>
	</body>
	</html>