M5 Atom Echo web radio player

Place your projects here
Post Reply
User avatar
cicciocb
Site Admin
Posts: 1900
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 407 times
Been thanked: 1269 times
Contact:

M5 Atom Echo web radio player

Post by cicciocb »

Hi all,
some time ago I posted a video on youtube showing a little radio project based on the M5 Atom Echo, that is essentially an ESP32 with an audio DAC integrated with an amplifier and a little speaker.



The video shows how it can be controlled using a web page, but since the module also has a button, it can also be controlled with this one

It has 2 functions :
- pressed rapidly - change to the next station
- pressed and hold - Reduce / Increase the volume (alternatively at each press reduce or increase)

The internal RGB led is also supported, it follows the audio output with a random color.

This is the code

Code: [Local Link Removed for Guests]

bluetooth.delete 'recover around 40KB of RAM if the BLE is not used
data "Beatles Radio", "http://www.beatlesradio.com:8000/stream/1/"
data "Radio Funky", "http://streaming.hotmixradio.fm/hotmixradio-funky-128.mp3"
data "Classis Rock", "http://classicrock.stream.ouifm.fr/ouifm3.mp3"
data "Blue Rock", "http://bluesnrock.stream.ouifm.fr/ouifmbluesnrock-128.mp3"
data "Jazz Radio Funk", "http://jazz-wr06.ice.infomaniak.ch/jazz-wr06-128.mp3"
data "Latina", "http://start-latina.ice.infomaniak.ch/start-latina-high.mp3"
data "Radio Marte", "http://onair18.xdevel.com:8212/"
data "Rai Radio 1", "http://icestreaming.rai.it/1.mp3"
data "Funky", "http://allzic08.ice.infomaniak.ch/allzic11.mp3"
data "Italo Disco", "http://streams.80s80s.de/italohits/mp3-192/streams.80s80s.de/"
data "end"

But = 39
pin.mode But, input  ' it is active low
But_p = 1
cnt = 0
vol_dir = 1 ' 1= vol up, -1 = vol down
' defines after how many time the button is
' recognised as volume change
CNT_TRESHOLD = 15

onerror goto reset
neo.setup 27, 1 ' set the neo rgb led on the pin 27
neo.pixel 0, 12345
play.setup 1 'use external DAC
vol = 50 ' default volume 50

dim radio$(100,2) ' max 100 radios
read r$
p = 0
while r$ <> "end"
  radio$(p, 0) = r$
  read radio$(p, 1)
  read r$
  p = p + 1
wend
nb_radios = p
wlog "nb radios "; nb_radios 

gosub web_page
onHtmlReload web_page
onHtmlChange change_volume
timer0 50, update_led
wait

web_page:
cls
cssexternal "/w3.css"
cssexternal "/html_obj.css"

r$ = ""
a$ = ""
a$ = a$ + "<h2 style='text-align:center'>Demo of Web Radio<br> using an M5 Atom Echo</h1>"
a$ = a$ + "<h3 style='text-align:center'>Running Annex32 WiFi RDS</h1>"
a$ = a$ + |<table class="w3-auto">|
for z = 0 to nb_radios - 1
  do_button  z, radio$(z, 0), r$
  if (z mod 3) = 0 then a$ = a$ + "<tr>"
  a$ = a$ + "<td>" + r$ 
  'if (z mod 4) = 3 then a$ = a$ + "</tr>"
next z
a$ = a$ + "</table>"
' add the slider
a$ = a$ + |<div class="w3-center">Volume<br>|
a$ = a$ + |<input data-var="vol" class="slider w3-blue" value="50" oninput="cmdChange(event)" type="range" min="0" max="200">|
a$ = a$ + |</div>|
html a$
return

change_radio:
' myRadio is a variable returned from the html;
' it is defined in the html code
  wlog myRadio 
  play.stream radio$(myRadio, 1), 30000
return

change_volume:
  play.volume vol
return

' simple create a button with the given index and text
sub do_button idx, text$, ret$
if (idx mod 2) = 0 then
  ret$ = |<button class='w3-button w3-green w3-small w3-round-xxlarge' style='border:2px solid #999'| 
else
  ret$ = |<button class='w3-button w3-red w3-small w3-round-xxlarge' style='border:2px solid #999'| 
end if 
ret$ = ret$ + | onclick="connection.send('cmd:gotoMyRadio=| + str$(idx) + | : gosub change_radio')">|
ret$ = ret$ +  text$ + |</button>|
end sub

update_led:
neo.pixel 0, (play.VU_L + play.VU_R) << rnd(16)

if pin(But) = 0 then cnt = cnt + 1

if (cnt > CNT_TRESHOLD) and (pin(But) = 0) then 
  vol = vol + vol_dir 
  if vol < 0 then vol = 0
  if vol > 100 then vol = 100
  play.volume vol
  'print "vol change "; vol
end if
  
if (pin(But) = 1) and (But_p = 0)  then  ' release button
  if (cnt > CNT_TRESHOLD) then
     vol_dir = - vol_dir ' change the direction of the volume control
  else
    ' change radio
    myRadio = myRadio + 1
    if (myRadio >= nb_radios) then myRadio = 0
    gosub change_radio
  end if
  cnt = 0
end if

But_p = pin(But)
return

reset:
reboot
return
The program make use of external CSS libraries that must be uploaded in the module.
I included a simple .zip file that contains all the files. It can be simply uploaded to the module with the Annex Toolkit.
radio5.zip
You do not have the required permissions to view the files attached to this post.
DeepCoder
Posts: 2
Joined: Tue Nov 01, 2022 7:32 pm
Has thanked: 2 times

Re: M5 Atom Echo web radio player

Post by DeepCoder »

It just doesn't work! I open the .bas file from the zip and have all the necessary files! I click a radio station and it just doesn't work! Please help
User avatar
cicciocb
Site Admin
Posts: 1900
Joined: Mon Feb 03, 2020 1:15 pm
Location: Toulouse
Has thanked: 407 times
Been thanked: 1269 times
Contact:

Re: M5 Atom Echo web radio player

Post by cicciocb »

[Local Link Removed for Guests] wrote: [Local Link Removed for Guests]Thu Nov 03, 2022 7:45 pm It just doesn't work! I open the .bas file from the zip and have all the necessary files! I click a radio station and it just doesn't work! Please help
I just tested with the version 1.47.2 (the version online) and it works very well.
Does your module is connected to your local router (to have the wifi access) ?

I suppose that you are using it in AP mode with the address 192.168.4.1 ... in this case will not work as it requires an internet connection
User avatar
PeterN
Posts: 366
Joined: Mon Feb 08, 2021 7:56 pm
Location: Krefeld, Germany
Has thanked: 171 times
Been thanked: 203 times
Contact:

Re: M5 Atom Echo web radio player

Post by PeterN »

Hi DeepCoder
Did you keep in mind to select the right module (M5 ATOM Echo) at the Annex config page?
Or are you using an external I2S-sound module an did not wire it like described at [Local Link Removed for Guests] ?
Post Reply