Custom Widget: Music Control

Thought I’d put together a Music Control Widget that had everything in one widget.

It uses two items

Dimmer Kitchen_Volume "Volume"
Player Kitchen_Music "Music"

Widget settings are

action_item = Kitchen_Music
status_item = Kitchen_Music
my_name = String value (Speaker Location/Name)
volume = Kitchen_Volume
step = Number value (volume increments)

Credit to @ysc lot of the widget code is from one of his screen shots in a post
Custom widgets: feature walkthrough

Hope it is of use to someone.

MusicControl.widget.json (3.3 KB)

11 Likes

Wow, it looks great!
What’s the player you use in the iFrame? Is that volumio?
I need to figure out my way to handle multiroom audio :slight_smile:

Awesome work!

Hey @kubawolanin

Spotify Web player is in the iframe you can use https://open.spotify.com

I use chromecasts around the house so you just need to select one on your phone app or windows app for switching and then the web player and widget can control the chromecast(I use &7" touch screens around the house). It’s not shown in the gif but the chromecast binding works groups and you can link a group item to the widget also.

Only thing with the Widget and spotify is the forward and reverse buttons don’t seem to change song but think this is due to the chromecast binding not being able to control spotify’s forward and reverse actions.

Widget Volume does control chromecast

1 Like

Looks good!

Just so I’m understanding this correctly, the widget controls items linked to Chromecast channels?

Thanks @danielwalters86,

The widget will control anything that is linked your Dimmer and Player Items. Mine are;

Dimmer Kitchen_Volume "Volume"
Player Kitchen_Music "Music"

I have chromecast linked to my Player and Dimmer

Thanks. I meant specifically in your spotify example but I think you’ve answered my question.

@Murpher I just noticed the previous button sends an invalid command. It sends REV instead of PREV.

Thanks @danielwalters86 for bring that to my attention.

I’ve just had a look there and the basicUI player sends PREVIOUS and NEXT. It also looks from reading sonos binding its player uses PREVIOUS and NEXT although I don’t have a sonos to test.

What I’ve done is add in 2 new string setting items for the widget one for PREV and one for NEXT. This means now anyone can send back their required command.

I’ve updated the download widget link in the first post to include the new changes.

Hello i Saw you about multiroom audio. I dont know if you already decided. Buy you van download max2play and use ons server. Its free and workshop great. Also with the plugin of squeeze server. And the sync is awsome! :slight_smile:

1 Like

Hi

I´m also playing around with habpanel an I was wondering if it is possible to control my Amazon Eco via openhab (not the other way round). I want to show, what Alexa is playing richt now, increase an decreas volume and so on.
It that possible?

THX

Hi,

Inspired by the fantastic work of @Murpher I use his Music Control Widget for controlling Spotify Connect on my Onkyo TX-NR616.

Since the Onkyo has several item-channels I made some adaptions to @Murpher 's great original widget. So many thanks to @Murpher

Extra item-channels (available on the Onkyo) that I added:

  • Song Title
  • Song Artist & Album
  • Song Playing Time

Configurable display of items
Since displaying all these channels can make the widget too big on my UI, I made all the items also configurable. So I can choose what to hide or display, even the (volume) controls ( when ever that would make sense… :fearful:). Perhaps this can make the widget also useable on other receivers with lesser item-channels.

OnkyoMusicControlConfigurable.widget.json (5.7 KB)

Work still in process:

  • displaying the Input Source of the Onkyo as a human readable text instead of a number. I’m still trying to figure out how I can work with a mapping/transformation in the widget (instead of a mapping in a items-file) to translate the number to a text description of the audio source.
  • replacing the “Hide …” settings in the settings area with a checkboxes (instead of Strings).

Help is appreciated!

3 Likes

Nice work on the control @loovanloon. I had started one myself, based on the same controller. Mine is currently not configurable, and nowhere near as nice as yours.

I did a template that has the mapping stuff done. It’s not in a custom widget yet, but here is the code, in case it is useful:

<style>
.inputSelect {
  background-color: #FFFFFF;
  color: #111111;
  border: 1px solid;
  border-color: #999999;
  width: 150px;
  font-size: 12px;
}

</style>
<div ng-init="sourceNames={
              '1': 'DIRECTV', 
              '2': 'Game', 
              '3': 'Auxiliary', 
              '5': 'Apple TV', 
              '16': 'Bluray / DVD', 
              '34': 'Phono', 
              '35': 'TV',
              '36': 'Tuner', 
              '43': 'Network', 
              '41': 'USB', 
              '46': 'Bluetooth'}" />

<h2>Zone 1</h2>
<div class="btn-group" uib-dropdown>
    <button id="single-button" type="button" class="inputSelect" uib-dropdown-toggle>
      <table width="100%"><tr>
        <td width="100%" style="text-align: left">{{sourceNames[itemValue('Receiver_Zone1_InputSource')]}}</td>
        <td style="text-align: right"><span class="caret"></span></td>
      </tr></table>
    </button>
  <ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '1')">DIRECTV</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '2')">Game</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '3')">Auxiliary</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '5')">Apple TV</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '16')">Bluray / DVD</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '35')">TV</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '36')">Tuner</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '34')">Phono</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '43')">Network</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '41')">USB</a></li>
    <li role="menuitem"><a ng-click="sendCmd('Receiver_Zone1_InputSource', '46')">Bluetooth</a></li>
  </ul>
</div>

Thx Tim @Signal11

I’d found some way for the mapping in the widget after posting my examples (and after a break :sleeping:) , but not as nicely looking as yours. I’ll look into it tomorrow on how to integrate your contributions.

I created a quick and easy control for the Onkyo Net/USB menu stuff. I could control this using PaperUI, but I didn’t have anything in HABpanel. It is really tiny, not sure it’s even worth sharing, but with all the other music controller stuff in this thread, I figured I’d just add it here.

Onkyo NetUSB Controller.widget.json (5.0 KB)

Screenshot:

Like I said, it’s really basic, and you may want to change the colors or whatever, but it does control the menus, let you select Pandora, choose a channel, etc.

Hope it’s useful to someone.

Amazing! This would be great if someone could develop controller dedicated to use with SqueezeBox.

Hello! Did you try to use the sendURI channel to send a steam directly to Chromecast without the need to start your App on Phone first? I wanna have the possibility to start e.g. web radio directly out of my panel.

Other question: What are the PREV and NEXT commands for Spotify??

Cheers!

For sure it is worth sharing @Signal11, it has value for me. Where did you find the API documentation for your Onkyo? Because as far as I know my OnkyoTX-NR616 doesn’t support the NetUSB Menu Title item, (or this item isn’t supported by the Onkyo binding). The channel is not detected (automatically). It has a NetUSB Menu Selected " item, which I used instead. And I can still navigate through the menu and the vTuner Internet radio channels.

This is what the your Onkyo NetUSB Controller looks like on the Onkyo TX-NR616.

I am using the OH2 binding for the Onkyo receivers. The documentation is available here.

The title is listed under netmenu#title on that page, and i configured an item that is linked to that channel using PaperUI.

your widget seems very cool, been testing it
so bad the spotify iframe doesn’t scroll on iOS
does it on android?
also the music keeps running on the browser instead on going though the spotify app

I tried https://open.spotify.com/ in a Frame and it never loads, how did you get it to work?