自定義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/