Magicmirror: Sonos integration

[moenchmeier]

Idea: Display Album art, Titel etc. of the currently playing song on the rooms Sonos speaker.

[anned20]

Well, since I don't have a magic mirror (yet!) and don't really have time to do it, I think it would be fairly easy to implement it.

Looking at this library: https://github.com/jishi/node-sonos-http-api
Maybe with this (when done): #76

It would be pretty darn useful and nice!

[Vaggan]

I started playing with the Sonos api yesterday and got it to work.
It did not take much to get the rooms and the current playing song.

Now I just need to make it work with module system, #80

And add some styling.

The only thing that bothers me is that a separate service needs to run in the background.

[mrmichaelfowler]

That would be Awesome!!
How would it work with multiple zones?
Would I need to specify which zones zone the mirror is in?

[Vaggan]

I did not think about that you might have a mirror in each zone.
I display all zones and the current song playing.
With the option to hide zones that are not currently playing any song.
I haven't been working on this in a while. How is the module system progressing?

[CFenner]

@Vaggan could you share the sonos coding, I also would like to display the current playing song. A separate module would be great.

[Vaggan]

Hi @CFenner
I created a branch called sonos-module in my fork.
Look in the modules folder.
I´m new to github so I think I screwed up my commit (I´ll fix it later) but i think you will find the code there.
It might work out of the box. If not, I might have changed a line or two in controllers/modules.php file in my main branch.

Edit: I created a separate repo for my sonos-module

[CFenner]

looks good, but you call http://localhost:5005/zones and i think you didn't commit this service.

[Vaggan]

Sorry, I forgot to tell you that I´m using node-sonos-http-api as mentioned above.
So you need to have that running in order to get this to work.
Maybe in a future version we can integrate this in to the module in some way.

[CFenner]

Good idea, I suppose as you are just using /zones we should be able to cut down the service to a small part.

[Vaggan]

Yes, but I have been looking at #76 (Voice recognition) as well.
And I have implemented it for the Sonos system.
I can control the volume, play/paus music and send voice messages. And for this I need the API.
Do you have any suggestion for how to implement these separate modules using the API without duplication the Sonso API in the modules.
I think it is easier to just use the existing API.

[CFenner]

Maybe you could just create a "sonos-connection-module" which does basically nothing on the mirror but enables the api calls. Then you can create a "sonos-display-module" which displays the zone info calling the service provided by the "sonos-connection-module".
For the voice controll you could create another module which again calls the service provided by the "sonos-connection-module".

@MichMich is working on a new module system and I think I read something about event handling, this could simplify inter module communication.

[Vaggan]

Sound good.
I really appreciate the feedback.

[djsunrise19]

Great idea! A few days ago I bought a sonos play 1. Actually I try to get this module working, but I have a few problems. I installed the SONOS HTTP API (copy all files to /home/pi; following the "usage" points). After that I copied the sonos folder from (https://github.com/Vaggan/MagicMirror/tree/sonos-module) in my modules folder. Did I forgot something? My programming skills are not the best, I understand most, but I've not so much experience in it.

Perhaps anybody can help? Thanks :+1:

[Vaggan]

Hi @djsunrise19
You only need to copy the sonos-module folder from this folder.
I will try to create a new repo and add a readme with som more info when i got the time.

Did you get the SONOS HTTP API working by 'npm install --production' and 'npm start'?
You need to run 'npm start' and have the API running i order to get the module to work.

Tell me if you do not get it to work and I'll see if I can help.

Edit: I created a separate repo for my sonos-module

[djsunrise19]

Hi @Vaggan,

thanks for answering :).
I copied the "sonos-module" folder in my "modules" folder.

If I type npm install --productions I get this: http://prntscr.com/ajw1io
Where I have to copy the files from SONOS HTTP API?

Thanks for your help, i really appreciate it.

Regards
Maurice

[Vaggan]

I´m not sure but it looks like you are in your home folder when running the command.
You need to be inside the "node-sonos-http-api" folder. In this folder there should be a file called package.json. It is this one that NPM is looking for when you run npm install --production

This is where you should be when running npm start as well.

[djsunrise19]

Oh, I see! That looks way better: http://prntscr.com/ajxvjf
But as you can see I have a message with "{ [Error: Cannot find module './settings.json'] code: 'MODULE_NOT_FOUND' }". Is that a Problem?

How can I start the server on every reboot? @reboot command in crontab -e?

Regards
Maurice

Edit: After a reboot (and ´npm start´ again), no sonos informations on the interface, mh... .

[Vaggan]

I don´t think it matters. It will use the default settings.
You can just test the api by entering http://localhost:5005/zones in the browser. if you are not on the PI change "localhost" to the IP-address of your PI (looks like 192.168.0.33).

If it does not work you can try to create a settings.json file in the root directory. My file only contains the voicerss settting and my specific key. It is only used for the say command so it is not mandatory.

[Vaggan]

I don´t know about the reboot stuff but i found a blog post (Check out nr.5) that looks like it fixes what you are after.

[CFenner]

did you encounter cross origin resource sharing issues?

can't access localhost:5005 with JS, works in browser with localhost:5005/zones. Any ideas?

[Vaggan]

Yes! I found a fix for that, Let me check. I will edit this comment if I find something.

In the node-sonos-http-api project in the file /lib/sonos-http-api.js on line 67.
Enter:
res.setHeader("Access-Control-Allow-Origin", "http://localhost");
res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");

Between
res.setHeader('Content-Type', 'application/json;charset=utf8');
And
res.write(new Buffer(jsonResponse));

[djsunrise19]

@Vaggan: http://192.168.0.33:5005/zones -> ERR_CONNECTION_REFUSED

Edit: Start with npm start again, I see a few text blocks. But nothing on the mirror. Perhaps I have to start npm first, and then the website?!

[Vaggan]

Maybe you get the CORS error that CFenner got?
Can you se any info in the browsers developer tools (console)?

Edit: I got the same error when i tested http://192.168.0.33:5005/zones and had no API running.
If your API is running maybe you have the wrong ip or port.

[CFenner]

@Vaggan: thanks, that did the trick.

[djsunrise19]

@Vaggan, I made the changes above, too and add the script in my init.d. http://192.168.0.33:5005/zones works fine: http://prntscr.com/ak6zut

But I see nothing on the mirror. Your "sonos-module" folder is in my "/modules" folder. I only copied it and changed nothing. Is that correct? I'm not sure...

[Vaggan]

Do you have your sonos playing? (Looks like it from the screenshot)
I configured minbe to not display anything if i´m not playing.

No errors in the browser console?

I might have changed a line or two in controllers/modules.php file
change line 18 to:
print_r('<script src="'.$module.'/'.$file.'"></script>'."\xA");
and line 29 to:
`print_r(''."\xA");``

[djsunrise19]

Ah, sorry, I forgot to upload the screenshot. There are some errors: http://prntscr.com/ak77p0

Edit: Yes, Sonos plays some Spotify tracks.

[Vaggan]

Well...

The api is upp and running and you get a response from http://192.168.0.33:5005/zones.
But you can´t see anything in the mirror?
Did you fix the CORS thing?
Maybe try to change localhost to 192.168.0.33. If you do, you might have to change the url in to CORS settings as well.
I can´t think of anything else right now.

[djsunrise19]

Yes I'd fixed the CORS thing. However, after a restart again it works! Now I'll make a litte CSS Box with a few sonos parameters (image, ...).

Thank you so much for your help!!

[Vaggan]

Nice!
No problem.Happy to help.
You are welcome to share your results.
Interesting to see what people do with this module

[CFenner]

In my Sonos-Module repo I enhanced your module to fit the new module system and also did some styling.

As I still didn't finished my mirror, I'm not sure how the album art looks like behind the glass :)

[MichMich]

Guys, if you are feeling adventurous: you might want to try out to built a v2 module for this. I don't have any documentation ready, but you might be able to find out how things work by looking at the default modules.

[MichMich]

Can I close this issue?

[Vaggan]

I have created a sonos module.
And with help from CFenner there is also a version for MagicMirror v2-beta

You can close this issue.