Page 1 of 1

M5 Atom Echo web radio player

Posted: Sun Apr 25, 2021 4:56 pm
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

Re: M5 Atom Echo web radio player

Posted: Thu Nov 03, 2022 7:45 pm
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

Re: M5 Atom Echo web radio player

Posted: Thu Nov 03, 2022 8:54 pm
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

Re: M5 Atom Echo web radio player

Posted: Thu Nov 03, 2022 10:00 pm
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] ?