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

Question

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

示例：

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

Answer 1

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

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

Waveform.js - Algorithm for thicker lines in the waveform

javascript

algorithm

canvas

soundcloud

waveform