Waveform.js - 波形中较粗线的算法
Waveform.js - Algorithm for thicker lines in the waveform
我正在寻找有助于教授 http://waveformjs.org/ 库以现代 Soundcloud 风格绘制波形的解决方案。
示例:
我认为这可以通过 Waveform.js 接受并绘制 here 的数据(浮点数组)来实现,但我绝对是这种图形算法的菜鸟。任何建议都会有所帮助。谢谢!
在 waveform.js 文件中,就在 Waveform.prototype.interpolateArray 函数的 return 之前添加
newData = renderWaveform(newData);
像这样:
Waveform.prototype.interpolateArray = function(data, fitCount) {
*
*
*
newData = renderWaveform(newData);
return newData;
}
然后在你的js中任何你想要的地方定义函数,
你可以玩 var 'plain' 和 'clear'
function renderWaveform(data,plain,clear){
if(data){
for(var i = 0; i < data.length; i++){
plain = plain || 2;
clear = clear || 1;
var step = plain+clear;
if (i % step == 0){
var sum=0;
for (var j = 0; j < plain; j++) {
sum += data[i+j];
};
var average = (sum/plain);
for (var j = 0; j < plain; j++) {
data[i+j]=average;
};
for (var j = plain; j < step; j++) {
data[i+j]=0;
};
}
}
return data;
}
else
return;
}
希望对您有所帮助 ;)
---------------------------------------- ------------------
编辑
这不是问题,但如果你想要像 soundcloud 一样的一切想法,请更改重绘功能(仍在 waveform.js 中):
身高:
Waveform.prototype.redraw = function() {
var d, i, middle, t, _i, _len, _ref, _results;
this.clear();
if (typeof this.innerColor === "function") {
this.context.fillStyle = this.innerColor();
} else {
this.context.fillStyle = this.innerColor;
}
middle = this.height / 2;
i = 0;
_ref = this.data;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
d = _ref[_i];
t = this.width / this.data.length;
if (typeof this.innerColor === "function") {
this.context.fillStyle = this.innerColor(i / this.width, d);
}
this.context.fillRect(i, middle - middle * d, 1, middle * d * 1.5);
_results.push(i++);
}
并在您生成波形时在您的代码中
2 种颜色:
(请注意这是我的原始代码,为了提供帮助,您可能需要自定义
var waveform = new Waveform({
container: document.getElementById("waveFormPlayer"),
});
var ctx = waveform.context;
var gradient = ctx.createLinearGradient(0, 0, 0, waveform.height);
gradient.addColorStop(0.0, "#C7AF7F");
gradient.addColorStop(0.50, "#D0BD88");
gradient.addColorStop(0.51, "rgba(0,0,0,0.25)");
gradient.addColorStop(1.0, "rgba(0,0,0,0.25)");
waveform.innerColor = gradient;
var loadedColor = ctx.createLinearGradient(0, 0, 0, waveform.height);
loadedColor.addColorStop(0.50, "rgba(0,0,0,0.50)");
loadedColor.addColorStop(0.51, "rgba(0,0,0,0.2)");
waveform.innerColor = loadedColor;
var defaultColor = ctx.createLinearGradient(0, 0, 0, waveform.height);
defaultColor.addColorStop(0.50, "rgba(0,0,0,0.35)");
defaultColor.addColorStop(0.51, "rgba(0,0,0,0.15)");
waveform.innerColor = defaultColor;
waveform.dataFromSoundCloudTrack(player.playlist.tracks[player.i]);
var defaultOptions= waveform.optionsForSyncedStream({
playedColor:gradient,
loadedColor: loadedColor,
defaultColor: defaultColor
});
我正在寻找有助于教授 http://waveformjs.org/ 库以现代 Soundcloud 风格绘制波形的解决方案。
示例:
我认为这可以通过 Waveform.js 接受并绘制 here 的数据(浮点数组)来实现,但我绝对是这种图形算法的菜鸟。任何建议都会有所帮助。谢谢!
在 waveform.js 文件中,就在 Waveform.prototype.interpolateArray 函数的 return 之前添加
newData = renderWaveform(newData);
像这样:
Waveform.prototype.interpolateArray = function(data, fitCount) {
*
*
*
newData = renderWaveform(newData);
return newData;
}
然后在你的js中任何你想要的地方定义函数, 你可以玩 var 'plain' 和 'clear'
function renderWaveform(data,plain,clear){
if(data){
for(var i = 0; i < data.length; i++){
plain = plain || 2;
clear = clear || 1;
var step = plain+clear;
if (i % step == 0){
var sum=0;
for (var j = 0; j < plain; j++) {
sum += data[i+j];
};
var average = (sum/plain);
for (var j = 0; j < plain; j++) {
data[i+j]=average;
};
for (var j = plain; j < step; j++) {
data[i+j]=0;
};
}
}
return data;
}
else
return;
}
希望对您有所帮助 ;)
---------------------------------------- ------------------
编辑
这不是问题,但如果你想要像 soundcloud 一样的一切想法,请更改重绘功能(仍在 waveform.js 中):
身高:
Waveform.prototype.redraw = function() {
var d, i, middle, t, _i, _len, _ref, _results;
this.clear();
if (typeof this.innerColor === "function") {
this.context.fillStyle = this.innerColor();
} else {
this.context.fillStyle = this.innerColor;
}
middle = this.height / 2;
i = 0;
_ref = this.data;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
d = _ref[_i];
t = this.width / this.data.length;
if (typeof this.innerColor === "function") {
this.context.fillStyle = this.innerColor(i / this.width, d);
}
this.context.fillRect(i, middle - middle * d, 1, middle * d * 1.5);
_results.push(i++);
}
并在您生成波形时在您的代码中
2 种颜色: (请注意这是我的原始代码,为了提供帮助,您可能需要自定义
var waveform = new Waveform({
container: document.getElementById("waveFormPlayer"),
});
var ctx = waveform.context;
var gradient = ctx.createLinearGradient(0, 0, 0, waveform.height);
gradient.addColorStop(0.0, "#C7AF7F");
gradient.addColorStop(0.50, "#D0BD88");
gradient.addColorStop(0.51, "rgba(0,0,0,0.25)");
gradient.addColorStop(1.0, "rgba(0,0,0,0.25)");
waveform.innerColor = gradient;
var loadedColor = ctx.createLinearGradient(0, 0, 0, waveform.height);
loadedColor.addColorStop(0.50, "rgba(0,0,0,0.50)");
loadedColor.addColorStop(0.51, "rgba(0,0,0,0.2)");
waveform.innerColor = loadedColor;
var defaultColor = ctx.createLinearGradient(0, 0, 0, waveform.height);
defaultColor.addColorStop(0.50, "rgba(0,0,0,0.35)");
defaultColor.addColorStop(0.51, "rgba(0,0,0,0.15)");
waveform.innerColor = defaultColor;
waveform.dataFromSoundCloudTrack(player.playlist.tracks[player.i]);
var defaultOptions= waveform.optionsForSyncedStream({
playedColor:gradient,
loadedColor: loadedColor,
defaultColor: defaultColor
});