HTML5音乐可视化[未完成]

未完成

Audio_Visualizer

对音乐可视化毕竟感兴趣，没事找找看有没有前端实现的相关项目，找了下，果然有~

第一个：
2D版本：https://github.com/wayou/HTML5_Audio_Visualizer
3D版本：https://github.com/wayou/3D_Audio_Spectrum_VIsualizer
作者博客说明：https://www.cnblogs.com/Wayou/p/3543577.html
自己建的演示：https://yingserver.cn/AudioVisualizer/2d.html

第二个：
另一个好看的 https://github.com/h3ndrk/html5-web-audio-showcase
自己建的演示 https://yingserver.cn/AudioVisualizer/new.html

本页面使用的是第一个的，如果不能正常使用请左上角或F5刷新下本页面

嫌作者的配色太丑了=。= 于是想改下它的颜色，看了下js源码，于是就有了下面这个更换颜色的按钮

上层 中层 下层

因为Pjax的原因，音乐没播完就跳到其他页面，音乐是不会停的
嗯这个问题我也改不动2333

下面是尝试的笔记，无视掉先...求救前端大佬...

现在发现一个很奇怪的问题，下面的代码直接复制到控制台，可以成功修改颜色，但是把它封装成一个方法后就不行了???为啥???
然后就是新的问题了...在这个页面引入外部的js代码要刷新之后才能正常加载...

// 目标代码，这块复制到控制台可以直接修改频谱颜色
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(1, '#cafe61');
gradient.addColorStop(0.5, '#77FFFF');
gradient.addColorStop(0, '#23ffff');

// 上面更改颜色的按钮就是直接调用myColor()的
// 经过2broear大佬的提示+自己捣鼓，js改成这样就可以正常修改颜色辣!~
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 0, 300);
// 下面是方法区
function myColor(){
//changeColor('#23ffff', '#77FFFF', '#cafe61');
var upColor = document.getElementById("upColor").value;
var middleColor = document.getElementById("middleColor").value;
var downColor = document.getElementById("downColor").value;
changeColor(upColor , middleColor , downColor );
}
function changeColor(upColor, middleColor, downColor){
gradient = ctx.createLinearGradient(0, 0, 0, 300);
gradient.addColorStop(1, downColor);
gradient.addColorStop(0.5, middleColor);
gradient.addColorStop(0, upColor);
}