自定义soundcloud播放器，改变波形png颜色？

Question

我正在使用soundcloud js api（http://developers.soundcloud.com/docs/custom-player）创建自定义播放器/皮肤。

一切都很好，除非我似乎找不到改变波形png颜色的方法（例如http://w1.sndcdn.com/ek9l31pY98LB_m.png）......这甚至可能吗？

感谢

:: Ed

Answer 1

您可以更改CSS文件中波形的填充，只需找到

.sc-scrubber .sc-played {
    background-color: #333;
    opacity: 0.4;
}

并将颜色更改为您喜欢的颜色。

不确定这是否是您想要的

Answer 2

您可以使用后端处理（例如：用于PHP，GD或ImageMagick库）或甚至在前端，使用Javascript和<canvas>以您喜欢的任何样式重新创建波形，但作为Paul说，没有预先打包的解决方案。

Answer 3

有一个JS库可以为您处理：http://waveformjs.org/。

它使用网络服务来分析波形，返回峰值并为您绘制它们，因此它只适用于支持Canvas的浏览器。

Answer 4

很抱歉，我们的API没有提供任何更改波形颜色的机制。

Answer 5

是的，这绝对是可能的。

正如其他人建议使用服务器端脚本重新着色它一样，我已经构建了一个解决方案来执行以下操作：

1. 当曲目发生变化时，使用javascript收听soundcloud播放器发出的onPlayerTrackSwitch.scPlayer事件。

2. 抓取波形的网址＆gt; img src

3. 用您服务器上自定义PHP脚本的URI替换波形img src。

4. 自定义PHP脚本采用原始波形图像URL和RGB颜色值，并使用GD图像库加载并重新着色。

5. PHP脚本最终使用Content-Type: image/png标题呈现重新着色的图像。

完整示例：https://snipt.net/plong0/custom-soundcloud-waveform-png/