Waveform.js - 波形中较粗线的算法

Question

我正在寻找有助于教http://waveformjs.org/库以现代Soundcloud风格绘制波形的解决方案。

示例：

我认为这可以通过Waveform.js接受并绘制here的数据（浮点数组）来实现，但在这种图形算法中我是绝对的noob。任何建议都会有所帮助。谢谢！

Answer 1

波形.js文件中的

，就在返回Waveform.prototype.interpolateArray函数之前添加

  

newData = renderWaveform（newData）;

像这样：

Waveform.prototype.interpolateArray = function(data, fitCount) {

  *
  *
  *    
  newData = renderWaveform(newData);

  return newData;
}

然后在js中任意位置定义函数， 你可以玩var'plan'和'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
            });