Soundcloud 波形节点答案

【问题标题】：Soundcloud waveform nodesSoundcloud 波形节点
【发布时间】：2014-09-29 22:10:00
【问题描述】：

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

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

【问题讨论】：

【解决方案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]}

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

【讨论】：

是的，你是对的，这些节点已经完成（我昨晚也进行了一些搜索）：p thx

【解决方案2】：

据我了解这个过程。

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

您可以通过 track 端点访问它。

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>

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

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

【讨论】：