声波云波形节点

Question

今天，我在soundcloud上读了一篇关于它们的波形的文章，以及它们是如何通过将最高音量点转换为0-1之间的INT来生成它们的。

在那之后，我打开了chrome上的控制台，然后在Soundcloud上打开了一个跟踪，遍历了networks (所有文件)，没有一个文件返回一个数据数组来生成html5波形，所以我的问题是，他们如何做到这一点而不请求数据呢？

Answer 1

据我所知这个过程。

SoundCloud在上传后直接创建图像。

您可以通过轨道端点访问它。

SC.get('/tracks/159966669', function(sound) {
$('#result').append('<img src="' +sound.waveform_url+'"/>' );
});

即http://jsfiddle.net/iambnz/fzm4mckd/

然后，他们使用这样的脚本，由(前) SoundCloud开发人员( http://waveformjs.org )编写，该脚本将图像转换为浮点数。

示例呼叫：

http://www.waveformjs.org/w?url=https%3A%2F%2Fw1.sndcdn.com%2FzVjqZOwCm71W_m.png&callback=callback_json1

示例响应(摘录)

callback_json1([0.07142857142857142,0.5428571428571428,0.7857142857142857,0.65,0.6142857142857143,0.6357142857142857,0.5428571428571428,0.6214285714285714,0.6357142857142857,0.6571428571428571,0.6214285714285714,0.5285714285714286,0.6642857142857143,0.5714285714285714,0.5,0.5,0.6,0.4857142857142857,0.4785714285714286,0.5714285714285714,0.6642857142857143,0.6071428571428571,0.6285714285714286,0.5928571428571429,0.6357142857142857,0.6428571428571429,0.5357142857142857,0.65,0.5857142857142857,0.5285714285714286,0.55,0.6071428571428571,0.65,0.6142857142857143,0.5928571428571429,0.6428571428571429,...[....]

参见这里的示例，更详细地介绍waveform.js

HTML

<div class="example-waveform" id="example2">
<canvas width="550" height="50"></canvas>
</div>

JS

SC.get('/tracks/159966669', function(sound) {
  var waveform = new Waveform({
    container: document.getElementById("example2"),
    innerColor: "#666666"
  });
  waveform.dataFromSoundCloudTrack(sound);
});

http://jsfiddle.net/iambnz/ro1481ga/

见这里的文档：http://waveformjs.org/#endpoint

我希望这能对你有所帮助。

Answer 2

有趣的问题:)我不是HTML5 5画布方面的专家，但我确信这与此有关。

如果您查看DOM，您将看到这样的结构：

<div class="sound__body">
    <div class="sound__waveform">
        <div class="waveform loaded">
            <div class="waveform__layer waveform__scene">
                <canvas aria-hidden="true" class="g-box-full sceneLayer" width="453" height="60"></canvas>
                <canvas aria-hidden="true" class="g-box-full sceneLayer waveformCommentsNode loaded" width="453" height="60"></canvas>
                <canvas aria-hidden="true" class="g-box-full sceneLayer" width="453" height="60"></canvas>
            </div>
            <div class="commentPlaceholder g-z-index-content">...</div>
            <div class="commentPopover darkText smallAvatar small">...</div>
        </div> 
    </div>
</div>

在我的页面上我有四个声音。在我的网络面板中，我还有四个：

https://wis.sndcdn.com/iGZOEq0vuemr_m.png

它们是作为JSON发送的，而不是以PNG的形式发送的！并包含以下内容：

{"width":1800,"height":140,"samples":
[111,116,118,124,121,121,116,103,119,120,118,118,119,123,128,128,119,119,119,120,117,116,123,127,124,119,115,120,120,121,120,120,121,121,117,116,117,120,123,119,121,125,128,126,122,99,119,120,121,117,122,120,125,125,134,135,130,126,122,123,120,124,126,124,114,111,119,120,120,118,119,132,133,128,127,
...much more
...much more
122,120,125,125,134,135,130]}

我很确定这是使用画布绘制波形的数据。