我正在从 soundcloud js api ( http://developers.soundcloud.com/docs/custom-player ) 创建一个自定义播放器/皮肤。
一切都很好,除了我似乎找不到改变波形png颜色的方法(例如http://w1.sndcdn.com/ek9l31pY98LB_m.png)......这甚至可能吗?
谢谢
:: 埃德
我正在从 soundcloud js api ( http://developers.soundcloud.com/docs/custom-player ) 创建一个自定义播放器/皮肤。
一切都很好,除了我似乎找不到改变波形png颜色的方法(例如http://w1.sndcdn.com/ek9l31pY98LB_m.png)......这甚至可能吗?
谢谢
:: 埃德
您可以在 CSS 文件中更改波形的填充,只需找到
.sc-scrubber .sc-played {
background-color: #333;
opacity: 0.4;
}
并将颜色更改为您喜欢的任何颜色。
不确定这是否是您想要的
您可以使用后端处理(例如:对于 PHP、GD 或 ImageMagick 库),甚至在前端,使用 Javascript 并<canvas>
以您喜欢的任何样式重新创建波形,但正如 Paul 所说,没有预先打包的解决方案为你。
有一个 JS 库可以为您处理这个问题:http ://waveformjs.org/ 。
它使用 Web 服务来分析波形、返回峰值并为您绘制它们,因此它仅适用于支持 Canvas 的浏览器。
抱歉,我们的 API 不提供任何更改波形颜色的机制。
是的,这绝对是可能的。
正如其他人建议使用服务器端脚本重新着色它一样,我构建了一个解决方案,它执行以下操作:
当音轨改变时,使用 javascript 来监听onPlayerTrackSwitch.scPlayer
soundcloud 播放器发出的事件。
获取波形的 img src 的 URL
将波形 img src 替换为服务器上自定义 PHP 脚本的 URI。
自定义 PHP 脚本获取原始波形图像 url 以及 RGB 颜色值,并使用 GD 图像库加载它并重新着色。
Content-Type: image/png
PHP 脚本最终呈现带有标题的重新着色的图像。
完整示例:https ://snipt.net/plong0/custom-soundcloud-waveform-png/