Пользовательский проигрыватель soundcloud, изменить цвет формы волны png?

Я создаю собственный проигрыватель/оболочку из звукового API js ( http://developers.soundcloud.com/docs/custom-player).

Все хорошо, за исключением того, что я не могу найти способ изменить цвет волны png (например, http://w1.sndcdn.com/ek9l31pY98LB_m.png )... это вообще возможно?

Спасибо

:: Ed


soundcloud
person smirny    schedule 17.05.2012    source источник

Ответы (5)


arrow_upward
2
arrow_downward

Вы можете изменить заливку волны в файле CSS, просто найдите

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

и измените цвет на любой, который вы предпочитаете.

Хотя не уверен, что это то, что ты хотел

person kapslol    schedule 21.09.2012

arrow_upward
1
arrow_downward

Вы можете использовать внутреннюю обработку (например: для PHP, библиотеку GD или ImageMagick) или даже во внешнем интерфейсе использовать Javascript и <canvas> для воссоздания сигнала в любом стиле, который вам нравится, но, как сказал Пол, нет готовых пакетов. решение для вас.

person nickf    schedule 22.05.2012
comment
Это действительно крутая идея, меня всегда немного расстраивало отсутствие возможности окрашивания волновой формы. Я думаю, что я мог бы написать небольшую библиотеку, когда у меня будет шанс сделать это. - person deweydb; 14.08.2012

arrow_upward
1
arrow_downward

Для этого существует библиотека JS: http://waveformjs.org/.

Он использует веб-сервис для анализа формы сигнала, возврата пиков и их рисования для вас, поэтому он будет работать только с браузерами, поддерживающими Canvas.

person Undistraction    schedule 07.12.2012

arrow_upward
0
arrow_downward

К сожалению, наш API не предоставляет никакого механизма для изменения цвета сигнала.

person Paul Osman    schedule 21.05.2012

arrow_upward
0
arrow_downward

Да, это определенно возможно.

Поскольку другие предлагали использовать сценарий на стороне сервера для его перекраски, я создал решение, которое делает следующее:

  1. используйте javascript для прослушивания события onPlayerTrackSwitch.scPlayer, создаваемого проигрывателем soundcloud при смене трека.

  2. получить URL-адрес img src сигнала

  3. замените сигнал img src на URI пользовательского PHP-скрипта на вашем сервере.

  4. Пользовательский PHP-скрипт берет исходный URL-адрес изображения сигнала, а также значения цвета RGB и использует библиотеку изображений GD для его загрузки и перекрашивания.

  5. PHP-скрипт, наконец, отображает перекрашенное изображение с заголовком Content-Type: image/png.

Полный пример: https://snipt.net/plong0/custom-soundcloud-waveform-png/

person plong0    schedule 29.07.2016