Wednesday, February 2, 2011

A Do-It-Yourself (DIY) Sonos Controller (Web Page) on iPad

iPad Web Page Displaying Sonos Content


(The code on this page was last checked and verified in June 2014.)

Warning this is not an elegant solution, however, it may interest those curious about Sonos and ways to get more interesting information displays about what Sonos is playing. Start from the post, A Simple Sonos JavaScript and Java Application. Use the HTML page (with JavaScript code) that is given in that post or here on GitHub, exactly as is.

The trick to this whole process is to host the page (with the JavaScript functionality that does all the magic) locally on the iPad. The way I did that is put the page in Dropbox and then using the Atomic Web Browser I could save the page locally. When the page is rendered locally the URL looks like this (in Atomic) “file:///var/mobile/Applications....”.

The following images are taken from an iPad (hold the Home button and power button simultaneously).

1. Open up the Atomic Browser.
Navigate to www.dropbox.com and sign in. Make sure you have uploaded the file (WhatSonosIsPlaying.html) to DropBox.



2. Select file in Dropbox and Get the File Locally


3. Select the Local File in Atomic Web Browser

The page should show metadata about what's playing. Clicking the Google or Bing search buttons should open into a new window.

8 comments:

  1. Have you managed to do the discovery of devices from the browser?

    ReplyDelete
  2. No I haven't. I looked at how a program like DeviceSpy (e.g. running on Win7) discovers uPnP devices on the network by using NetMon and could see it that is sends a UDP announcement (?) to all devices on the subnet and then waits for responses back. (I might be off in my explanation.) Anyhow it seemed a little bit beyond what I could figure out how to do with JavaScript at this time without the right library support.

    The second thing I looked into are apps on the iPhone/iPad that list uPnP devices (like uPnPPeek) but these have not worked so far. (In fact they crash or do nothing...) My thought here was to let an app designed for the purpose of querying uPnP devices provide the information and then you would only have to copy the IP address of one Sonos control and input into it the Sonos web page. Then you would have to modify the JavaScript to take just one controller's IP and find the others or really just be able to provide the metadata for display.

    ReplyDelete
  3. Did recently get discovery to work in C# app. Will post something about it in May.

    ReplyDelete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. Hi, thanks for your site. It helped me to turn an old juke box into a SONOS controller using a Raspberry Pi. You can see it here: wallbox.weebly.com.

    Regards
    Steve

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. Further to this, trying it out using OSX running a local apache web server. From Safari on OSX or the iPad I run into these errors:

    XMLHttpRequest cannot load http://192.168.1.185:1400/MediaRenderer/AVTransport/Control. Preflight response is not successful

    Any ideas why this would happen ?

    ReplyDelete