用波形js重绘画布

Question

我必须制作一个像soundcloud播放器一样的声音播放器。 所以我使用基于ubuntu的软件来构建json数据，以便在waveformjs.org jquery库中使用 这部分工作得很好，我的图像画布如下：

waveform = new Waveform({
  container: document.getElementById("test"),
  data: newJ,
  innerColor:"#f60",
});

但问题是当我必须显示音乐播放过程状态时。 就像soudcloud每秒一样，画布颜色的一部分必须改变 但是wavweforjs这个部分的内部功能，（optionsForSyncedStream）对我不起作用......

你知道我怎么能实现这个部分？！ 如何手动重绘画布???是否有可能通过x和y位置改变淹没画布的一部分的颜色？！？

谢谢

Answer 1

可以使用innerColor来更改waveformjs插件的一部分。

为此必须：

innerColor: function(x, y){
if (typeof(i)=='undefined'){i=0;}
i++;
  if(i>audioElement.currentTime){
      return 'gray';
  }else{
      return '#f60';
  }
}

然后应该每X秒检查一次位置并像这样更新波形：

setInterval(function(){
    waveform.update({data:data}); 
    i=0;
}, 100); 

这不是一个干净的方式，但在我的最终工作良好..

Answer 2

更详细一点：首次创建新波形时，可以将自定义函数传递给innerColor。

看一下Waveform.js库的source，你可以看到他们检查你是否已经传入了innerColor的函数，如果是这样，他们会将一些项目传递给你的函数生成颜色：

// The source is in Coffeescript
i = 0
for d in @data
  t = @width / @data.length
  // This line is the one I'm referring to...
  @context.fillStyle = @innerColor(i/@width, d) if typeof(@innerColor) == "function"
  @context.clearRect t*i, middle - middle * d, t, (middle * d * 2)
  @context.fillRect t*i, middle - middle * d, t, middle * d * 2
  i++

因此，它们遍历波形中的每个“线”，i/@width（传递给你的innerColor函数）基本上是波形的位置（表示为从开始的百分比）目前正在尝试绘制颜色。如果您取出该百分比并确定音频曲目的currentTime是否高于/低于该数字，您可以将“线”赋予特定颜色：

waveform = new Waveform({
   container: document.getElementById('waveform'),
   innerColor: function(percentageOfWaveform, d) {
     // We don't need d
     var songPercentage = yourAudioElement.currentTime / yourAudioElement.duration;
     if (percentageOfWaveform > songPercentage) {
       return 'gray';
     } else {
       return '#f60';
     }
   }
});

然后你必须编写一些逻辑来经常重绘波形，以便更新。

waveform.redraw()

*应该注意的是，我使用HTML5音频而不是SDK的标准SC.stream方法，因此yourAudioElement是HTML5音频元素。