声音波形如何存储然后显示在 SoundCloud 上？答案

【问题标题】：How are sound waveforms stored and then displayed on SoundCloud?声音波形如何存储然后显示在 SoundCloud 上？
【发布时间】：2014-01-28 22:26:13
【问题描述】：

我对 SoundCloud 如何存储和显示它们的波形特别感兴趣。当我缩放浏览器时，我注意到波形本身实际上会相应地缩放，这意味着它们没有使用预烘焙的图像。 JavaScript 中是否有可用的库来呈现它们，如果有，它们以什么格式存储数据？

【问题讨论】：

波形，根据萤火虫，是一个canvas元素。

标签： javascript audio rendering soundcloud

【解决方案1】：

他们实际上保存了一个大的 png 图像。您可以使用 soundcloud API 获取图像。这是一个示例波形图像的链接：http://w1.sndcdn.com/xleqtH0zXSlW_m.png

  SC.get(PATH
      , function(tracks, err){
        // tracks.waveform_url is the URL to a waveform png img
        $("#img").attr("src", tracks.waveform_url);
    });

您可以在此处查看如何获取和显示波形图像的示例： http://runnable.com/UuiebAIv7aAlAAB2/get-a-tracks-waveform-on-soundcloud-in-javascript

【讨论】：

【解决方案2】：

波形实际上存储为图像。 SoundCloud.com（以前称为“下一个 Soundcloud”的网站）使用从图像中提取的数据在画布上绘制波形。这种转换最初是在前端完成的，但出于性能原因，它被转移到了后端服务。

【讨论】：

知道他们如何获取 PNG 图像并将其转换为可缩放的图形吗？
基本上只分析每一列像素。一个开源实现是Waveform.js，你可能想看看。