Question

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

之后我在chrome上打开控制台，然后在Soundcloud上打开一个轨道，通过网络选项卡（所有文件），没有文件返回数据数据以生成html5波形，所以我的问题是他们是怎么做的它没有请求数据？

Answer 1

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

如果你看看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]}

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

Answer 2

据我了解这个过程。

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

您可以通过曲目终端访问它。

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

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

然后他们使用这样的脚本，由（前）SoundCloud devs编写，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

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

Soundcloud波形节点

2 个答案: