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
- Install the Radio Browser binding from the marketplace and add a radio thing.
- If not already done, setup an item for the
Play URIchannel from any Chromecast, or thestreamchannel from a Squeezebox. You may need to clickshow advancedto see the channel. - 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.
- Install this widget and setup the items using the radio thing’s equipment group item.
- 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
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 21, 2024, 9:37:22 PM
component: oh-list-card
config:
accordionList: true
colorTheme: "=themeOptions.dark === 'dark' ? 'gray' : 'black'"
outline: true
style:
border: none
margin: none
padding: none
slots:
default:
- component: oh-list-item
config:
accordionItemOpened: false
accordionList: true
after: =`Show/Hide Controls`
mediaItem: true
style:
border: none
margin: none
padding: none
title: Radio Browser
slots:
accordion:
- component: oh-list
slots:
default:
- component: f7-row
slots:
default:
- component: f7-col
config:
style:
padding: 0px
padding-left: 0%
padding-right: 0%
width: 20%
slots:
default:
- component: oh-image
config:
item: =props.radioBrowser+'_Icon'
style:
border: 0px
border-radius: 6px
margin: 0px
padding: 0px
width: 108%
- component: f7-col
config:
style:
- width: 80%
slots:
default:
- component: f7-row
config:
class:
- justify-content-left
style:
border: none
margin: none
padding: 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: 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:
class:
- justify-content-left
style:
margin: none
padding: none
padding-left: 10px
padding-right: 0px
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: 20
style:
padding: 0px
visible: =(props.volume !== UNDEF)
- 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: 20
style:
padding: 0px
- component: oh-button
config:
action: options
actionItem: =props.radioBrowser+'_Recent'
iconF7: music_albums
iconSize: 20
style:
padding: 0px
- component: oh-button
config:
action: variable
actionVariable: showSearch
actionVariableValue: =!(vars.showSearch === true)
color: "=(vars.showSearch) ? 'blue' : 'gray'"
iconF7: search
iconSize: 20
style:
padding: 0px
- 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: f7-row
config:
style:
border: none
margin: none
margin-right: 6px
padding: none
padding-left: 2px
padding-right: 0px
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:
color: blue
item: =props.volume
style:
margin-left: 10px
margin-top: 0px
width: 95%
visible: =(props.volume !== UNDEF && vars.showVolume === true)
- component: oh-input
config:
clearButton: true
inputmode: text
item: =props.radioBrowser+'_Station'
outline: true
placeholder: Enter your search here, then press the tick.
sendButton: true
type: text
visible: =(vars.showSearch === true)