Subsonic REST API and Javascript

[peter123]

Hi,

I've recently played around with Javascript and the Subsonic REST API.

Have someone on this forum successfully been able to use the range of Subsonic API functions using Javascript?


I have no problems accessing the API to retrieve index, search for songs or similar. This is easily done using XMLHttpRequest. For instance:

Code: Select all

[var url = "...../rest/getIndexes.view?v=1.2.0&c=myapp";
var client = new XMLHttpRequest();
client.open("GET", url, false, user, pass);  // With HTTP Basic Authentication
client.send(null);
// process XML response

But how do I go about using the parts of the Subsonic API that fetches binary data? For a simple example lets refer to fetching album cover art using "...../rest/getCoverArt.view"

According to the Subsonic API spec a valid cover art request would look like this:

Code: Select all

"...../rest/getCoverArt.view?v=1.2.0&c=myapp&id=123456789"

and sent with coded "Authorization" header containing user and pass


If I go about fetching binary data using XMLHttpRequest the Subsonic server responds just fine but as far as I know there is no way I can reinterpret and force this data into DOM element.

A more natural use case would instead be to update the src attribute of the DOM for an image element such as:

Code: Select all

<img src='' id='coverimage'/>

and let the element download the image from the URL and populate the area. But with this approach I can not make it work.
How the heck would I be able to authorize (following the HTTP Authentication as with the XMLRequest example) fetching data from the Subsonic server via an element URL request?


It seems to me the API is somewhat limited? Or am I just interpreting it wrong?

Any ideas appreciated, I'm totally stuck.

Thanks,
Petter

[brett]

It sounds like it should be working, what is the code you're using to actually update the src url of the img?

I actually started out trying to use only javascript to pull the data but it would not send it because the web server hosting the html was on a different port (I never thought to put the html's inside of the subsonic dir).

I eventually used php to interface with the rest api, and then used jquery to pull the data through an ajax call after it's been parsed by php. I've posted a shot of my UI so far, using the above methods described here

[peter123]

There are a couple of ways of updating the image URL. None of them working with Subsonic REST API URL but working fine for any other random valid image URL.

Code: Select all

1) For the case you have a <div> element in which you want to add an image
var url = "image URL...";
var divElem = document.getElementById("divSection");
divElem.innerHTML = "<img src='" + url + "' />";

Code: Select all

2) For the case you already have an image element in the DOM (preloading)
var myImg = new Image();
myImg.src = "image URL...";
var imgElem = document.getElementById("testimage");
imgElem.src = myImg.src;

For Subsonic cover art image URL I use for instance

Code: Select all

"...../rest/getCoverArt.view?v=1.2.0&c=myapp&id=123456789"

I also tried adding "suffix=.jpg" as part of the subsonic request. Same result, does not work.


BTW. Nice UI!!!

/Petter