This script is designed to work with SoundCloud's widget in order to enable remote text buttons. I am attempting to modify it so that it functions as a remote for an image button that toggles between different pictures for pause and play, rather than text. Any suggestions on how to achieve this?
$(function () {
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe),
img_on_pause = 'image-url-for-pause-button',
img_on_play = 'image-url-for-play-button';
widget.bind(SC.Widget.Events.READY, function () {
$(".sc-toggle").attr("src", img_on_pause);
});
widget.bind(SC.Widget.Events.PAUSE, function () {
$(".sc-toggle").attr("src", img_on_pause);
});
widget.bind(SC.Widget.Events.PLAY, function () {
$(".sc-toggle").attr("src", img_on_play);
});
$(".sc-toggle").click(function (e) {
e.preventDefault();
widget.toggle();
});
});