0

我正在从 soundcloud js api ( http://developers.soundcloud.com/docs/custom-player ) 创建一个自定义播放器/皮肤。

一切都很好,除了我似乎找不到改变波形png颜色的方法(例如http://w1.sndcdn.com/ek9l31pY98LB_m.png)......这甚至可能吗?

谢谢

:: 埃德

4

5 回答 5

2

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

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

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

不确定这是否是您想要的

于 2012-09-21T00:04:32.943 回答
1

您可以使用后端处理(例如:对于 PHP、GD 或 ImageMagick 库),甚至在前端,使用 Javascript 并<canvas>以您喜欢的任何样式重新创建波形,但正如 Paul 所说,没有预先打包的解决方案为你。

于 2012-05-22T20:09:00.603 回答
1

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

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

于 2012-12-07T17:23:06.277 回答
0

抱歉,我们的 API 不提供任何更改波形颜色的机制。

于 2012-05-21T22:01:17.273 回答
0

是的,这绝对是可能的。

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

  1. 当音轨改变时,使用 javascript 来监听onPlayerTrackSwitch.scPlayersoundcloud 播放器发出的事件。

  2. 获取波形的 img src 的 URL

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

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

  5. Content-Type: image/pngPHP 脚本最终呈现带有标题的重新着色的图像。

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

于 2016-07-29T21:07:51.543 回答