波形中厚线的Waveform.js算法

Question

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

示例：

​

​

​

​

我假设这可以通过Waveform.js接受并绘制这里的数据(即浮点数数组)来实现，但在这种图形算法中我是绝对的新手。任何建议都会有帮助。谢谢!

Answer 1

在waveform.js文件中，在返回Waveform.prototype.interpolateArray函数之前添加

newData = renderWaveform(newData)；

就像这样：

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

  *
  *
  *    
  newData = renderWaveform(newData);

  return newData;
}

然后在js中的任何地方定义函数，您可以使用var‘平原’和‘清除’。

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
            });