同下,但使用canvasjs:
示例:http://seapip.com/canvas/visualizer4/
var speed = 10000;
var refresh = 30;
audioElement = document.getElementById('audioElement');
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var audioSrc = audioCtx.createMediaElementSource(audioElement);
var analyser = audioCtx.createAnalyser();
audioSrc.connect(analyser);
audioSrc.connect(audioCtx.destination);
var frequencyData = new Uint8Array(analyser.frequencyBinCount);
var animation;
var dps = [];
var chart = new CanvasJS.Chart("chart", {
interactivityEnabled: false,
width: 500,
height: 200,
axisX: {
title: "Time",
valueFormatString: "mm:ss"
},
axisY: {
title: "dB"
},
data: [{
type: "line",
dataPoints: dps
}]
});
chart.render();
audioElement.onplay = function() {
animation = setInterval(function() {
drawWave();
}, refresh);
};
audioElement.onpause = function() {
clearInterval(animation);
};
audioElement.onended = function() {
clearInterval(animation);
time = 0;
dps = [];
audioElement.pause();
};
var max = analyser.maxDecibels;
var min = analyser.minDecibels;
var time = 0;
function drawWave() {
analyser.getByteFrequencyData(frequencyData);
var totalLoudness = 0;
for(var i = 0; i < frequencyData.length; i++) {
totalLoudness += frequencyData[i];
}
var averageLoudness = totalLoudness / frequencyData.length / 255;
var decibels = min + averageLoudness * Math.abs(min - max);
time += refresh;
dps.push({
x: new Date(time),
y: decibels
});
if(dps.length > speed / refresh) {
dps.shift();
}
chart.render();
}
<audio id="audioElement" src="audio/Odesza - Above The Middle.mp3"></audio>
<div id="chart"></div>
<div>
<button onclick="audioElement.play()">Play the Audio</button>
<button onclick="audioElement.pause()">Pause the Audio</button>
<button onclick="audioElement.volume+=0.1">Increase Volume</button>
<button onclick="audioElement.volume-=0.1">Decrease Volume</button>
</div>
请记住,#chart是一个div而不是canvas元素,我花了几分钟才弄清楚为什么图表一开始没有显示:P
与下面的代码相同,但从右到左绘制。stepSize变量设置动画速度和步长大小,如果要绘制更大的步骤,则需要移动更快,如果要绘制更小的步骤,则需要移动更慢。
演示:http://seapip.com/canvas/visualizer3
var stepSize = 0.5;
audioElement = document.getElementById('audioElement');
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var audioSrc = audioCtx.createMediaElementSource(audioElement);
var analyser = audioCtx.createAnalyser();
audioSrc.connect(analyser);
audioSrc.connect(audioCtx.destination);
var frequencyData = new Uint8Array(400);
var canvas = document.getElementById("wave");
canvas.style.width = "500px";
canvas.style.height = "100px";
canvas.width = parseInt(canvas.style.width) * 2;
canvas.height = parseInt(canvas.style.height) * 2;
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "#ffff00";
ctx.lineWidth = 2;
var drawY = [canvas.height];
var animation;
audioElement.onplay = function() {
animation = setInterval(function() {
drawWave();
}, 20);
};
audioElement.onpause = function() {
clearInterval(animation);
};
audioElement.onended = function() {
clearInterval(animation);
drawY = [canvas.height];
audioElement.pause();
};
function drawWave() {
analyser.getByteFrequencyData(frequencyData);
var totalLoudness = 0;
for(var i = 0; i < frequencyData.length; i++) {
totalLoudness += frequencyData[i];
}
var averageLoudness = totalLoudness / frequencyData.length;
var y = averageLoudness / 255;
y *= canvas.height;
y = canvas.height - y;
drawY.push(y);
ctx.clearRect(0, 0, canvas.width, canvas.height);
for(var i = drawY.length; i > 0; i--) {
var x1 = canvas.width - (drawY.length - i - 1) * stepSize;
var x2 = canvas.width - (drawY.length - i) * stepSize;
if(!x2) {
break;
}
ctx.beginPath();
ctx.moveTo(x1, drawY[i - 1]);
ctx.lineTo(x2, drawY[i]);
ctx.stroke();
}
}
<audio id="audioElement" src="audio/Odesza - Above The Middle.mp3"></audio>
<canvas id="wave"></canvas>
<div>
<button onclick="audioElement.play()">Play the Audio</button>
<button onclick="audioElement.pause()">Pause the Audio</button>
<button onclick="audioElement.volume+=0.1">Increase Volume</button>
<button onclick="audioElement.volume-=0.1">Decrease Volume</button>
</div>
以下是我认为您所需的内容,x轴代表时间,y轴代表所有频率的平均响度。请注意,像Chrome这样的浏览器在后台标签页中可能无法正确绘制图形,因为它会限制刷新间隔和音频分析器输出。
演示: http://seapip.com/canvas/visualizer2
audioElement = document.getElementById('audioElement');
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var audioSrc = audioCtx.createMediaElementSource(audioElement);
var analyser = audioCtx.createAnalyser();
audioSrc.connect(analyser);
audioSrc.connect(audioCtx.destination);
var frequencyData = new Uint8Array(400);
var canvas = document.getElementById("wave");
canvas.style.width = "1000px";
canvas.style.height = "100px";
canvas.width = parseInt(canvas.style.width) * 2;
canvas.height = parseInt(canvas.style.height) * 2;
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "#ffff00";
ctx.lineWidth = 2;
var drawX = 0;
var drawY = 0;
var duration;
var animation;
audioElement.oncanplaythrough = function() {
duration = audioElement.duration;
audioElement.onplay = function() {
drawWave();
};
audioElement.onpause = function() {
cancelAnimationFrame(animation);
};
audioElement.onended = function() {
cancelAnimationFrame(animation);
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawX = 0;
drawY = 0;
audioElement.pause();
};
};
function drawWave() {
var currentTime = audioElement.currentTime;
analyser.getByteFrequencyData(frequencyData);
var totalLoudness = 0;
for(var i = 0; i < frequencyData.length; i++) {
totalLoudness += frequencyData[i];
}
var averageLoudness = totalLoudness / frequencyData.length;
var previousDrawX = drawX;
drawX = currentTime / duration;
drawX *= canvas.width;
var previousDrawY = drawY;
drawY = averageLoudness / 255;
drawY *= canvas.height;
drawY = canvas.height - drawY;
ctx.beginPath();
ctx.moveTo(previousDrawX, previousDrawY);
ctx.lineTo(drawX, drawY);
ctx.stroke();
animation = requestAnimationFrame(drawWave);
}
<audio id="audioElement" src="audio/Odesza - Above The Middle.mp3"></audio>
<canvas id="wave"></canvas>
<div>
<button onclick="audioElement.play()">Play the Audio</button>
<button onclick="audioElement.pause()">Pause the Audio</button>
<button onclick="audioElement.volume+=0.1">Increase Volume</button>
<button onclick="audioElement.volume-=0.1">Decrease Volume</button>
</div>
Canvas可视化示例
演示:http://seapip.com/canvas/visualizer/
audioElement = document.getElementById('audioElement');
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var audioSrc = audioCtx.createMediaElementSource(audioElement);
var analyser = audioCtx.createAnalyser();
audioSrc.connect(analyser);
audioSrc.connect(audioCtx.destination);
var frequencyData = new Uint8Array(400);
var canvas = document.getElementById("wave");
canvas.style.width = "500px";
canvas.style.height = "100px";
canvas.width = parseInt(canvas.style.width) * 2;
canvas.height = parseInt(canvas.style.height) * 2;
var ctx = canvas.getContext("2d");
ctx.strokeStyle = "#ffff00"
ctx.lineWidth = 2;
var animation;
audioElement.onplay = funtion() {
drawWave();
};
audioElement.onpause = funtion() {
cancelAnimationFrame(animation);
};
audioElement.onended = funtion() {
cancelAnimationFrame(animation);
};
function drawWave() {
analyser.getByteFrequencyData(frequencyData);
ctx.clearRect(0, 0, canvas.width, canvas.height);
for(var i = 1; i < frequencyData.length; i++) {
var x1 = canvas.width / (frequencyData.length - 1) * (i - 1);
var x2 = canvas.width / (frequencyData.length - 1) * i;
var y1 = canvas.height - frequencyData[i - 1] / 255 * canvas.height;
var y2 = canvas.height - frequencyData[i] / 255 * canvas.height;
if(x1 && y1 && x2 && y2) {
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
}
}
animation = requestAnimationFrame(drawWave);
}
<audio id="audioElement" src="audio/Odesza - Above The Middle.mp3"></audio>
<canvas id="wave"></canvas>
<div>
<button onclick="document.getElementById('audioElement').play()">Play the Audio</button>
<button onclick="document.getElementById('audioElement').pause()">Pause the Audio</button>
<button onclick="document.getElementById('audioElement').volume+=0.1">Increase Volume</button>
<button onclick="document.getElementById('audioElement').volume-=0.1">Decrease Volume</button>
</div>
关于音频可视化的插件和教程:
https://wavesurfer-js.org/
http://waveformjs.org/#weird
https://www.bignerdranch.com/blog/music-visualization-with-d3-js/
https://github.com/wayou/HTML5_Audio_Visualizer
https://www.patrick-wied.at/blog/how-to-create-audio-visualizations-with-javascript-html
https://p5js.org/examples/examples/Sound_Frequency_Spectrum.php