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

Question

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

除了我似乎无法找到改变波形png颜色的方法（例如http://w1.sndcdn.com/ek9l31pY98LB_m.png）...这甚至有可能吗？

感谢

::埃德

Answer 1

对不起，我们的API不改变波形颜色提供任何机制。

Answer 2

您可以使用后端处理（例如：用于PHP，GD或ImageMagick库）或甚至在前端，使用Javascript和<canvas>以您喜欢的任何风格重新创建波形，但正如Paul所说，无需为您预包装解决方案。

Answer 3

你可以在你的CSS文件改变波形的填充，只需找到

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

，并切换到任何你喜欢的颜色。

不知道如果这是你想要的，虽然

Answer 4

有一个JS库，这将帮助您处理该什么：http://waveformjs.org/。

它使用webservice来分析波形，返回峰值并为您绘制它们，所以它只能与支持Canvas的浏览器一起使用。

Answer 5

是的，这是绝对有可能的。

正如其他人所建议的有关使用服务器端脚本重新上色，我已经建立了一个解决方案，它具有以下功能：

1. 使用JavaScript来听取的SoundCloud播放器发出的onPlayerTrackSwitch.scPlayer事件当赛道改变时。

2. 抢波形的IMG SRC

3. 的URL与服务器上的自定义PHP脚本的URI替换波形IMG SRC。

4. 自定义PHP脚本获取原始波形图像url以及RGB颜色值，并使用GD图像库加载它并重新着色。

5. PHP脚本最终呈现带有Content-Type: image/png标题的重彩图像。

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