Radio Browser Basic Widget for finding internet radio streams with the UI

This widget is designed to make using the new binding called Radio Browser very easy and will start/send the streams the binding finds, to your Chromecast or other devices like Squeezebox that can accept a URL sent as a command. Please feel free to copy and adjust the code as much as you like to make nicer looking versions for a stand alone widget. Love to see what people come up with if you can post the code and images.

Show Your Thanks

If you enjoy the binding and/or widget, then please consider sponsoring or giving a once off tip as a thank you via the links.

Sponsor @Skinah on GitHub

https://github.com/sponsors/Skinah/

Paypal can also be used via

matt A-T pcmus D-O-T C-O-M

Setup

  1. Install the Radio Browser binding from the marketplace and add a radio thing.
  2. If not already done, setup an item for the Play URI channel from any Chromecast, or the stream channel from a Squeezebox. You may need to click show advanced to see the channel.
  3. Use the add equipment from thing feature to create an equipment and all the items for you from the main UI. This is to ensure all the items are named correctly for this widget to auto setup based from 1 equipment group.
  4. Install this widget and setup the items using the radio thing’s equipment group item.
  5. Start using the widget and enjoy tons of internet streams from around the world.

Some stations will block you from streaming if your not in the same country.

Screenshots

RadioBrowser

Resources

uid: Radio_Browser_Basic
tags:
  - multimedia
props:
  parameters:
    - context: item
      description: Select the Radio Browser you wish to use at an equipment item level
      label: Select Radio Browser
      name: radioBrowser
      required: true
      type: TEXT
      filterCriteria:
        - value: Group
          name: type
    - context: item
      description: Select Chromecast_PlayURI or Sqeezebox_Stream Item to send the radio URL.
      label: Chromecast_PlayURI or Sqeezebox_Stream
      name: playURI
      required: true
      type: TEXT
      filterCriteria:
        - value: String
          name: type
    - context: item
      description: Select the volume control item
      label: Volume Item
      name: volume
      required: true
      type: TEXT
  parameterGroups: []
timestamp: Feb 17, 2024, 11:58:58 PM
component: oh-list-card
config:
  accordionList: true
  colorTheme: "=themeOptions.dark === 'dark' ? 'gray' : 'black'"
  outline: true
  style:
    padding: none
    margin: none
    border: none
slots:
  default:
    - component: oh-list-item
      config:
        accordionItemOpened: false
        accordionList: true
        after: =`Show/Hide Controls`
        mediaItem: true
        title: Radio Browser
        style:
          padding: none
          margin: none
          border: none
      slots:
        accordion:
          - component: oh-list
            slots:
              default:
                - component: f7-row
                  slots:
                    default:
                      - component: f7-col
                        config:
                          style:
                              width: 16%
                              padding-left: 0%
                              padding-right: 0%
                        slots:
                          default:
                            - component: oh-image
                              config:
                                item: =props.radioBrowser+'_Icon'
                                style:
                                  width: 100%
                                  border-radius: 6px
                                  border: 6px
                                  padding: 0px
                                  margin: 0px
                            - component: f7-row
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      action: variable
                                      actionVariable: showVolume
                                      actionVariableValue: =!(vars.showVolume === true)
                                      color: "=(vars.showVolume) ? 'blue' : 'gray'"
                                      iconF7: '=(Number.parseInt(items[props.volume].state) >= 75) ? "speaker_3_fill" : (Number.parseInt(items[props.volume].state) > 50) ? "speaker_2_fill" : (Number.parseInt(items[props.volume].state) > 10) ? "speaker_1_fill" : (Number.parseInt(items[props.volume].state) > 0) ? "speaker_fill" : (Number.parseInt(items[props.volume].state) == 0) ? "speaker_slash_fill" :"speaker_slash_fill"'
                                      iconSize: 18
                                      visible: =(props.volume !== UNDEF)
                                      style:
                                        padding: 0px
                                  - component: oh-button
                                    config:
                                      action: command
                                      actionCommand: "=(items[props.playURI].state === items[props.radioBrowser+'_Stream'].state ) ? ' ' : items[props.radioBrowser+'_Stream'].state "
                                      actionItem: =props.playURI
                                      iconF7: playpause_fill
                                      iconSize: 18
                                      style:
                                        padding: 0px
                      - component: f7-col
                        config:
                          style:
                            - width: 84%
                        slots:
                          default:
                            - component: f7-row
                              config:
                                class:
                                  - justify-content-left
                                style:
                                  border: none
                                  padding: none
                                  margin: none
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      action: options
                                      actionItem: =props.radioBrowser+'_Country'
                                      iconF7: globe
                                      text: "=(items[props.radioBrowser+'_Country'].state === 'ALL') ? 'Country' : items[props.radioBrowser+'_Country'].state"
                                  - component: oh-button
                                    config:
                                      action: options
                                      actionItem: =props.radioBrowser+'_State'
                                      iconF7: globe
                                      text: "=(items[props.radioBrowser+'_State'].state === '' ) ? 'State' : items[props.radioBrowser+'_State'].state"
                            - component: f7-row
                              config:
                                class:
                                  - justify-content-left
                                style:
                                  padding: none
                                  margin: none
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      action: options
                                      actionItem: =props.radioBrowser+'_Language'
                                      iconF7: chat_bubble_text
                                      text: "=(items[props.radioBrowser+'_Language'].state === 'ALL' || items[props.radioBrowser+'_Language'].state === '' ) ? 'Language' : items[props.radioBrowser+'_Language'].state"
                                  - component: oh-button
                                    config:
                                      action: options
                                      actionItem: =props.radioBrowser+'_Genre'
                                      iconF7: music_note_list
                                      text: "=(items[props.radioBrowser+'_Genre'].state === 'ALL' || items[props.radioBrowser+'_Genre'].state === '' ) ? 'Genre' : items[props.radioBrowser+'_Genre'].state"
                            - component: f7-row
                              config:
                                style:
                                  padding: none
                                  margin: none
                                  margin-right: 6px
                                  border: none
                              slots:
                                default:
                                  - component: oh-button
                                    config:
                                      action: options
                                      actionItem: =props.radioBrowser+'_Station'
                                      iconF7: antenna_radiowaves_left_right
                                      text: =items[props.radioBrowser+'_Station'].state                                  
                - component: oh-slider
                  config:
                    visible: =(props.volume !== UNDEF && vars.showVolume === true)
                    color: blue
                    item: =props.volume
                    style:
                      margin-top: 0px
                      margin-left: 10px
                      width: 95%


6 Likes