Waveform.js - 用於波形中較粗線條的算法

Question

我正在尋找有助於教導http://waveformjs.org/庫以現代Soundcloud風格繪製波形的解決方案。

實例：

我認爲這可能是可能與該數據來實現（這是浮子的陣列），該Waveform.js接受並繪製here但我m絕對noob在這樣的圖形算法。任何建議都會有所幫助。謝謝！

在waveform.js文件

Answer 1

，所述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; 
} 

希望它有幫助;）

----------------------------------------- -------------------

編輯

它不是問題，但如果你想everythink喜歡的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 
      });