的SoundCloud波形節點

Question

我在讀今天的SoundCloud一篇關於他們的波形，以及他們如何通過量最高點轉換成0之間的INT產生他們 - 1

後，我開了鍍鉻中控臺，然後Soundcloud上的一個軌跡，通過網絡選項卡（所有文件）沒有文件返回一組數據來生成html5波形，所以我的問題是他們如何做到這一點而不要求數據？

Answer 1

據我瞭解這個過程。

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

我希望這將幫助你一點。

Answer 2

有趣的問題:)我不是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]} 

我敢肯定，這是正在使用的數據繪製使用Canvas波形。