用波形js重绘画布

我必须让一个像soundcloud播放器的声音播放器。，所以我使用了Ubuntu的基于软件的搭建使用JSON数据waveformjs.org jQuery库这部分工作良好，并有我的形象的这样一个帆布：用波形js重绘画布

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

canvas

但问题是当我必须显示音乐播放过程状态。像soudcloud每秒画布颜色的一部分，必须改变但wavweforjs这部分的内部函数，（optionsForSyncedStream）不工作对我来说...

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

谢谢

来源

2014-05-16 roozgar

其可以使用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);

这不是一个干净的方式，但工作在我到底好不好..

来源

2014-05-16 20:34:29

要稍微详细一点：当您第一次创建新的波形时，您可以将自定义函数传递给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音频元素。

来源

2014-07-17 18:56:31

用波形js重绘画布

回答

相关问题