<section id="overview" style="box-sizing: border-box; color: #4d4d4d; font-family: proxima-nova, helveticaneue, Helvetica, Arial, &quot;lucida grande&quot;, sans-serif; font-size: 18px; background-color: #ffffff;">
   <h1 class="hckui__typography__h1" itemprop="name" style="box-sizing: border-box; font-size: 40px; margin: 0px; font-family: inherit; line-height: 49px; color: #111111;">Simple ESP32 Internet Radio with OLED Display</h1>
   <p class="hckui__typography__bodyL hckui__layout__marginBottom15" itemprop="description" style="box-sizing: border-box; margin-top: 10px; line-height: 26px; color: #4a4a4a;">A DIY cheap one-button internet radio.</p>
   <div class="hckui__typography__bodyS project-details" style="box-sizing: border-box; font-size: 14px; line-height: 18px; color: #4a4a4a;"><span style="box-sizing: border-box; margin-right: 15px;"><a class="hckui__typography__textWithIcon project-difficulty text-warning" href="https://www.hackster.io/projects?difficulty=intermediate" style="box-sizing: border-box; background-color: transparent; color: #f0ad4e; text-decoration-line: none; align-items: center; display: inline-flex;" target="_blank"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box; line-height: 0;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-intermediate"></use></svg></i><span style="box-sizing: border-box; margin-left: 5px;">Intermediate</span></a></span><span class="hckui__typography__textWithIcon" style="box-sizing: border-box; align-items: center; display: inline-flex; margin-right: 15px;"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box; line-height: 0;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-full-instructions"></use></svg></i><span style="box-sizing: border-box; margin-left: 5px;">Full instructions provided</span></span><span class="hckui__typography__textWithIcon" style="box-sizing: border-box; align-items: center; display: inline-flex; margin-right: 15px;"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box; line-height: 0;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-time"></use></svg></i><span style="box-sizing: border-box; margin-left: 5px;">3 hours</span></span><span class="hckui__typography__textWithIcon" itemprop="interactionStatistic" itemscope="" itemtype="http://schema.org/InteractionCounter" style="box-sizing: border-box; align-items: center; display: inline-flex; margin-right: 15px;"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box; line-height: 0;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-eye"></use></svg></i><span class="impressions-stats" itemprop="userInteractionCount" style="box-sizing: border-box; margin-left: 5px;">6,726</span></span></div>
   <div class="hckui__layout__marginTop30" style="box-sizing: border-box; margin-top: 30px !important;">
      <div class="project-cover-image" itemprop="image" itemscope="" itemtype="https://schema.org/ImageObject" style="box-sizing: border-box; border: 1px solid rgb(216, 216, 216); height: 0px; padding-top: 461.25px; position: relative;"><img alt="Simple ESP32 Internet Radio with OLED Display" src="https://hackster.imgix.net/uploads/attachments/1003307/sam_6084_zBRbIQn9qH.JPG?auto=compress%2Cformat&amp;w=900&amp;h=675&amp;fit=min" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: 100%; height: 461.25px; left: 0px; position: absolute; top: 0px; width: 613px;" /></div>
      </div>
   </section>
<div class="project-section-break" style="box-sizing: border-box; border-top: 2px solid rgb(216, 216, 216); margin: 45px auto; width: 430.5px; color: #4d4d4d; font-family: proxima-nova, helveticaneue, Helvetica, Arial, &quot;lucida grande&quot;, sans-serif; font-size: 18px; background-color: #ffffff;">&nbsp;</div>
<div id="project_page_simple_ad_portal" style="box-sizing: border-box; color: #4d4d4d; font-family: proxima-nova, helveticaneue, Helvetica, Arial, &quot;lucida grande&quot;, sans-serif; font-size: 18px; background-color: #ffffff;">&nbsp;</div>
<div id="description" itemprop="articleBody" style="box-sizing: border-box; color: #4d4d4d; font-family: proxima-nova, helveticaneue, Helvetica, Arial, &quot;lucida grande&quot;, sans-serif; font-size: 18px; background-color: #ffffff;">
   <section id="things" style="box-sizing: border-box;">
      <div class="project-section-title" style="box-sizing: border-box; margin-bottom: 15px;">
         <h2 class="hckui__typography__h2 title-with-anchor" style="box-sizing: border-box; font-family: inherit; line-height: 44px; color: #111111; margin-top: 0px; margin-bottom: 0px; font-size: 34px;"><a class="anchor" href="https://www.hackster.io/mircemk/simple-esp32-internet-radio-with-oled-display-83e49d#things" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; font-size: 18px; margin-left: -21px; padding-right: 5px; opacity: 0; visibility: hidden;" target="_blank"><i class="hckui__typography__iconWrapper hckui__typography__iconBaselineFix" style="box-sizing: border-box; position: relative; top: 0.125em;"><svg class="hckui__typography__icon hckui__typography__icon20"><use xlink:href="#svg-link"></use></svg></i></a><span style="box-sizing: border-box;">Things used in this project</span></h2>
         </div>
      <div class="project-parts" style="box-sizing: border-box;">
         <div class="view-expanded" style="box-sizing: border-box;">
            <table class="project-parts-table" style="border-spacing: 0px; background-color: transparent; width: 615px;">
               <tbody style="box-sizing: border-box;">
                  <tr class="head" style="box-sizing: border-box;">
                     <td colspan="6" style="box-sizing: border-box; padding: 10px 0px; border-top: 0px;">
                        <h3 class="hckui__typography__h3" style="box-sizing: border-box; font-family: inherit; line-height: 32px; color: #111111; margin-top: 0px; margin-bottom: 0px; font-size: 24px;">Hardware components</h3>
                        </td>
                     </tr>
                  <tr style="box-sizing: border-box;">
                     <td class="part-img" style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8; width: 58px;"><img srcset="https://hackster.imgix.net/uploads/attachments/195388/ESP32.jpg?auto=compress%2Cformat&amp;w=96&amp;h=96&amp;fit=fill&amp;bg=ffffff 2x, https://hackster.imgix.net/uploads/attachments/195388/ESP32.jpg?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" alt="Generic ESP32 IC" src="https://hackster.imgix.net/uploads/attachments/195388/ESP32.jpg?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: 100%; height: 48px; width: 48px;" /></td>
                     <td style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8;">
                        <table style="border-spacing: 0px; background-color: transparent; width: 443px;">
                           <tbody style="box-sizing: border-box;">
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyL" style="box-sizing: border-box; padding: 0px; font-size: 18px; line-height: 26px; color: #4a4a4a;"><a data-ha="{&quot;eventName&quot;:&quot;Clicked link&quot;,&quot;customProps&quot;:{&quot;value&quot;:&quot;Espressif Generic ESP32 IC&quot;,&quot;href&quot;:&quot;/Espressif/products/generic-esp32-ic?ref=project-83e49d&quot;,&quot;type&quot;:&quot;part&quot;,&quot;location&quot;:&quot;things&quot;},&quot;clickOpts&quot;:{&quot;delayRedirect&quot;:true}}" class="hckui__typography__linkBlue" href="https://www.hackster.io/Espressif/products/generic-esp32-ic?ref=project-83e49d" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; cursor: pointer;" target="_blank">Espressif Generic ESP32 IC</a></td>
                                 </tr>
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyS hckui__typography__pebble hckui__typography__breakWord" style="box-sizing: border-box; padding: 0px; font-size: 14px; line-height: 18px; word-break: break-word; color: #767676 !important;"></td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     <td class="hckui__typography__bodyL times" style="box-sizing: border-box; padding: 10px; font-size: 18px; line-height: 26px; color: #4a4a4a; border-top-style: solid; border-top-color: #d8d8d8; text-align: center; vertical-align: middle;">×</td>
                     <td class="hckui__typography__bodyL quantity" style="box-sizing: border-box; padding: 10px 10px 10px 0px; font-size: 18px; line-height: 26px; color: #4a4a4a; border-top-style: solid; border-top-color: #d8d8d8; text-align: center; vertical-align: middle;">1</td>
                     <td class="actions" style="box-sizing: border-box; padding: 10px 0px 10px 20px; border-top-style: solid; border-top-color: #d8d8d8; text-align: right;">
                        <div class="hckui__buttons__group" style="box-sizing: border-box; display: inline-flex; position: relative; vertical-align: middle;"><a target="_blank" rel="nofollow noopener" class="hckui__buttons__md hckui__buttons__icon hckui__buttons__outlineBlack" title="Buy" data-ha="{&quot;eventName&quot;:&quot;Clicked part buy link&quot;,&quot;customProps&quot;:{&quot;part_id&quot;:28366,&quot;link_id&quot;:12614,&quot;retailer_id&quot;:null,&quot;link_position&quot;:0}}" href="https://www.hackster.io/products/buy/12614?s=BAhJIhMyNDgwMjcsUHJvamVjdAY6BkVG%0A" style="box-sizing: border-box; background-color: transparent; color: #4a4a4a; text-decoration-line: none; border: 1px solid rgb(74, 74, 74); border-radius: 4px; outline: none; font-size: 16px; line-height: 0; padding: 10px; cursor: pointer; display: inline-block; text-align: center;"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-cart"></use></svg></i></a></div>
                        </td>
                     </tr>
                  <tr style="box-sizing: border-box;">
                     <td class="part-img" style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8; width: 0px;"></td>
                     <td style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8;">
                        <table style="border-spacing: 0px; background-color: transparent; width: 443px;">
                           <tbody style="box-sizing: border-box;">
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyL" style="box-sizing: border-box; padding: 0px; font-size: 18px; line-height: 26px; color: #4a4a4a;">VS1053 MP3 Module Development Board</td>
                                 </tr>
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyS hckui__typography__pebble hckui__typography__breakWord" style="box-sizing: border-box; padding: 0px; font-size: 14px; line-height: 18px; word-break: break-word; color: #767676 !important;"></td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     <td class="hckui__typography__bodyL times" style="box-sizing: border-box; padding: 10px; font-size: 18px; line-height: 26px; color: #4a4a4a; border-top-style: solid; border-top-color: #d8d8d8; text-align: center; vertical-align: middle;">×</td>
                     <td class="hckui__typography__bodyL quantity" style="box-sizing: border-box; padding: 10px 10px 10px 0px; font-size: 18px; line-height: 26px; color: #4a4a4a; border-top-style: solid; border-top-color: #d8d8d8; text-align: center; vertical-align: middle;">1</td>
                     <td class="actions" style="box-sizing: border-box; padding: 10px 0px 10px 20px; border-top-style: solid; border-top-color: #d8d8d8; text-align: right;"></td>
                     </tr>
                  <tr style="box-sizing: border-box;">
                     <td class="part-img" style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8; width: 0px;"></td>
                     <td style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8;">
                        <table style="border-spacing: 0px; background-color: transparent; width: 443px;">
                           <tbody style="box-sizing: border-box;">
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyL" style="box-sizing: border-box; padding: 0px; font-size: 18px; line-height: 26px; color: #4a4a4a;">128X64 OLED Display Module For Arduino 0.96" IIC</td>
                                 </tr>
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyS hckui__typography__pebble hckui__typography__breakWord" style="box-sizing: border-box; padding: 0px; font-size: 14px; line-height: 18px; word-break: break-word; color: #767676 !important;"></td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     <td class="hckui__typography__bodyL times" style="box-sizing: border-box; padding: 10px; font-size: 18px; line-height: 26px; color: #4a4a4a; border-top-style: solid; border-top-color: #d8d8d8; text-align: center; vertical-align: middle;">×</td>
                     <td class="hckui__typography__bodyL quantity" style="box-sizing: border-box; padding: 10px 10px 10px 0px; font-size: 18px; line-height: 26px; color: #4a4a4a; border-top-style: solid; border-top-color: #d8d8d8; text-align: center; vertical-align: middle;">1</td>
                     <td class="actions" style="box-sizing: border-box; padding: 10px 0px 10px 20px; border-top-style: solid; border-top-color: #d8d8d8; text-align: right;"></td>
                     </tr>
                  <tr style="box-sizing: border-box;">
                     <td class="part-img" style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8; width: 58px;"><img srcset="https://hackster.imgix.net/uploads/attachments/838273/29C8785-40.jpg?auto=compress%2Cformat&amp;w=96&amp;h=96&amp;fit=fill&amp;bg=ffffff 2x, https://hackster.imgix.net/uploads/attachments/838273/29C8785-40.jpg?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" alt="Pushbutton Switch, Momentary" src="https://hackster.imgix.net/uploads/attachments/838273/29C8785-40.jpg?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: 100%; height: 48px; width: 48px;" /></td>
                     <td style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8;">
                        <table style="border-spacing: 0px; background-color: transparent; width: 443px;">
                           <tbody style="box-sizing: border-box;">
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyL" style="box-sizing: border-box; padding: 0px; font-size: 18px; line-height: 26px; color: #4a4a4a;">Pushbutton Switch, Momentary</td>
                                 </tr>
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyS hckui__typography__pebble hckui__typography__breakWord" style="box-sizing: border-box; padding: 0px; font-size: 14px; line-height: 18px; word-break: break-word; color: #767676 !important;"></td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     <td class="hckui__typography__bodyL times" style="box-sizing: border-box; padding: 10px; font-size: 18px; line-height: 26px; color: #4a4a4a; border-top-style: solid; border-top-color: #d8d8d8; text-align: center; vertical-align: middle;">×</td>
                     <td class="hckui__typography__bodyL quantity" style="box-sizing: border-box; padding: 10px 10px 10px 0px; font-size: 18px; line-height: 26px; color: #4a4a4a; border-top-style: solid; border-top-color: #d8d8d8; text-align: center; vertical-align: middle;">1</td>
                     <td class="actions" style="box-sizing: border-box; padding: 10px 0px 10px 20px; border-top-style: solid; border-top-color: #d8d8d8; text-align: right;">
                        <div class="hckui__buttons__group" style="box-sizing: border-box; display: inline-flex; position: relative; vertical-align: middle;"><a target="_blank" rel="nofollow noopener" class="hckui__buttons__md hckui__buttons__icon hckui__buttons__outlineBlack" title="Buy" data-ha="{&quot;eventName&quot;:&quot;Clicked part buy link&quot;,&quot;customProps&quot;:{&quot;part_id&quot;:94073,&quot;link_id&quot;:51642,&quot;retailer_id&quot;:3,&quot;link_position&quot;:0}}" href="https://www.hackster.io/products/buy/51642?s=BAhJIhMyNDgwMjcsUHJvamVjdAY6BkVG%0A" style="box-sizing: border-box; background-color: transparent; color: #4a4a4a; text-decoration-line: none; border: 1px solid rgb(74, 74, 74); border-radius: 4px; outline: none; font-size: 16px; line-height: 0; padding: 10px; cursor: pointer; display: inline-block; text-align: center;"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-cart"></use></svg></i></a></div>
                        </td>
                     </tr>
                  <tr style="box-sizing: border-box;">
                     <td class="part-img" style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8; width: 58px;"><img srcset="https://hackster.imgix.net/uploads/image/file/95945/10722-01.jpg?auto=compress%2Cformat&amp;w=96&amp;h=96&amp;fit=fill&amp;bg=ffffff 2x, https://hackster.imgix.net/uploads/image/file/95945/10722-01.jpg?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" alt="Speaker: 0.25W, 8 ohms" src="https://hackster.imgix.net/uploads/image/file/95945/10722-01.jpg?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: 100%; height: 48px; width: 48px;" /></td>
                     <td style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8;">
                        <table style="border-spacing: 0px; background-color: transparent; width: 443px;">
                           <tbody style="box-sizing: border-box;">
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyL" style="box-sizing: border-box; padding: 0px; font-size: 18px; line-height: 26px; color: #4a4a4a;">Speaker: 0.25W, 8 ohms</td>
                                 </tr>
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyS hckui__typography__pebble hckui__typography__breakWord" style="box-sizing: border-box; padding: 0px; font-size: 14px; line-height: 18px; word-break: break-word; color: #767676 !important;"></td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     <td class="hckui__typography__bodyL times" style="box-sizing: border-box; padding: 10px; font-size: 18px; line-height: 26px; color: #4a4a4a; border-top-style: solid; border-top-color: #d8d8d8; text-align: center; vertical-align: middle;">×</td>
                     <td class="hckui__typography__bodyL quantity" style="box-sizing: border-box; padding: 10px 10px 10px 0px; font-size: 18px; line-height: 26px; color: #4a4a4a; border-top-style: solid; border-top-color: #d8d8d8; text-align: center; vertical-align: middle;">1</td>
                     <td class="actions" style="box-sizing: border-box; padding: 10px 0px 10px 20px; border-top-style: solid; border-top-color: #d8d8d8; text-align: right;">
                        <div class="hckui__buttons__group" style="box-sizing: border-box; display: inline-flex; position: relative; vertical-align: middle;"><a target="_blank" rel="nofollow noopener" class="hckui__buttons__md hckui__buttons__icon hckui__buttons__outlineBlack" title="Buy" data-ha="{&quot;eventName&quot;:&quot;Clicked part buy link&quot;,&quot;customProps&quot;:{&quot;part_id&quot;:15400,&quot;link_id&quot;:277,&quot;retailer_id&quot;:2,&quot;link_position&quot;:0}}" href="https://www.hackster.io/products/buy/277?s=BAhJIhMyNDgwMjcsUHJvamVjdAY6BkVG%0A" style="box-sizing: border-box; background-color: transparent; color: #4a4a4a; text-decoration-line: none; border: 1px solid rgb(74, 74, 74); border-radius: 4px; outline: none; font-size: 16px; line-height: 0; padding: 10px; cursor: pointer; display: inline-block; text-align: center;"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-cart"></use></svg></i></a></div>
                        </td>
                     </tr>
                  <tr class="head" style="box-sizing: border-box;">
                     <td colspan="6" style="box-sizing: border-box; padding: 10px 0px; border-top: 0px;">
                        <h3 class="hckui__typography__h3" style="box-sizing: border-box; font-family: inherit; line-height: 32px; color: #111111; margin-top: 0px; margin-bottom: 0px; font-size: 24px;">Software apps and online services</h3>
                        </td>
                     </tr>
                  <tr style="box-sizing: border-box;">
                     <td class="part-img" style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8; width: 58px;"><img srcset="https://hackster.imgix.net/uploads/image/file/144203/IDE_web.jpg?auto=compress%2Cformat&amp;w=96&amp;h=96&amp;fit=fill&amp;bg=ffffff 2x, https://hackster.imgix.net/uploads/image/file/144203/IDE_web.jpg?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" alt="Arduino IDE" src="https://hackster.imgix.net/uploads/image/file/144203/IDE_web.jpg?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: 100%; height: 48px; width: 48px;" /></td>
                     <td style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8;">
                        <table style="border-spacing: 0px; background-color: transparent; width: 443px;">
                           <tbody style="box-sizing: border-box;">
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyL" style="box-sizing: border-box; padding: 0px; font-size: 18px; line-height: 26px; color: #4a4a4a;"><a data-ha="{&quot;eventName&quot;:&quot;Clicked link&quot;,&quot;customProps&quot;:{&quot;value&quot;:&quot;Arduino IDE&quot;,&quot;href&quot;:&quot;/arduino/products/arduino-ide?ref=project-83e49d&quot;,&quot;type&quot;:&quot;part&quot;,&quot;location&quot;:&quot;things&quot;},&quot;clickOpts&quot;:{&quot;delayRedirect&quot;:true}}" class="hckui__typography__linkBlue" href="https://www.hackster.io/arduino/products/arduino-ide?ref=project-83e49d" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; cursor: pointer;" target="_blank">Arduino IDE</a></td>
                                 </tr>
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyS hckui__typography__pebble hckui__typography__breakWord" style="box-sizing: border-box; padding: 0px; font-size: 14px; line-height: 18px; word-break: break-word; color: #767676 !important;"></td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     <td colspan="2" style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8;"></td>
                     <td class="actions" style="box-sizing: border-box; padding: 10px 0px 10px 20px; border-top-style: solid; border-top-color: #d8d8d8; text-align: right;"><a target="_blank" rel="nofollow noopener" class="hckui__buttons__md hckui__buttons__icon hckui__buttons__outlineBlack" title="More info" href="https://www.arduino.cc/en/main/software" style="box-sizing: border-box; background-color: transparent; color: #4a4a4a; text-decoration-line: none; border: 1px solid rgb(74, 74, 74); border-radius: 4px; outline: none; font-size: 16px; line-height: 0; padding: 10px; cursor: pointer; display: inline-block; text-align: center;"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-external-link"></use></svg></i></a></td>
                     </tr>
                  <tr class="head" style="box-sizing: border-box;">
                     <td colspan="6" style="box-sizing: border-box; padding: 10px 0px; border-top: 0px;">
                        <h3 class="hckui__typography__h3" style="box-sizing: border-box; font-family: inherit; line-height: 32px; color: #111111; margin-top: 0px; margin-bottom: 0px; font-size: 24px;">Hand tools and fabrication machines</h3>
                        </td>
                     </tr>
                  <tr style="box-sizing: border-box;">
                     <td class="part-img" style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8; width: 58px;"><img srcset="https://hackster.imgix.net/uploads/image/file/79853/09507-01.jpg?auto=compress%2Cformat&amp;w=96&amp;h=96&amp;fit=fill&amp;bg=ffffff 2x, https://hackster.imgix.net/uploads/image/file/79853/09507-01.jpg?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" alt="Soldering iron (generic)" src="https://hackster.imgix.net/uploads/image/file/79853/09507-01.jpg?auto=compress%2Cformat&amp;w=48&amp;h=48&amp;fit=fill&amp;bg=ffffff" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: 100%; height: 48px; width: 48px;" /></td>
                     <td style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8;">
                        <table style="border-spacing: 0px; background-color: transparent; width: 443px;">
                           <tbody style="box-sizing: border-box;">
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyL" style="box-sizing: border-box; padding: 0px; font-size: 18px; line-height: 26px; color: #4a4a4a;">Soldering iron (generic)</td>
                                 </tr>
                              <tr style="box-sizing: border-box;">
                                 <td class="hckui__typography__bodyS hckui__typography__pebble hckui__typography__breakWord" style="box-sizing: border-box; padding: 0px; font-size: 14px; line-height: 18px; word-break: break-word; color: #767676 !important;"></td>
                                 </tr>
                              </tbody>
                           </table>
                        </td>
                     <td colspan="2" style="box-sizing: border-box; padding: 10px 0px; border-top-style: solid; border-top-color: #d8d8d8;"></td>
                     <td class="actions" style="box-sizing: border-box; padding: 10px 0px 10px 20px; border-top-style: solid; border-top-color: #d8d8d8; text-align: right;"></td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </section>
   <div class="project-section-break" style="box-sizing: border-box; border-top: 2px solid rgb(216, 216, 216); margin: 45px auto; width: 430.5px;">&nbsp;</div>
   <section id="story" style="box-sizing: border-box;">
      <div class="project-section-title" style="box-sizing: border-box; margin-bottom: 15px;">
         <h2 class="hckui__typography__h2 title-with-anchor" style="box-sizing: border-box; font-family: inherit; line-height: 44px; color: #111111; margin-top: 0px; margin-bottom: 0px; font-size: 34px;"><a class="anchor" href="https://www.hackster.io/mircemk/simple-esp32-internet-radio-with-oled-display-83e49d#story" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; font-size: 18px; margin-left: -21px; padding-right: 5px; opacity: 0; visibility: hidden;" target="_blank"><i class="hckui__typography__iconWrapper hckui__typography__iconBaselineFix" style="box-sizing: border-box; position: relative; top: 0.125em;"><svg class="hckui__typography__icon hckui__typography__icon20"><use xlink:href="#svg-link"></use></svg></i></a><span style="box-sizing: border-box;">Story</span></h2>
         </div>
      <div class="project-story collapsible-section collapsed hljs-active hljs-monokai" itemprop="text" style="box-sizing: border-box;">
         <div class="embed-frame" style="box-sizing: border-box; margin: 0px 0px 30px; padding-top: 0px;">
            <figure class="youtube" style="box-sizing: border-box; margin: 0px;">
               <div class="embed widescreen" style="box-sizing: border-box; height: 0px; padding-bottom: 352.078px; position: relative;"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/RYibMfwQqhc?rel=0" frameborder="0" allowfullscreen="" style="box-sizing: border-box; position: absolute; top: 0px; left: 0px; width: 615px; height: 352.078px;"></iframe></div>
               </figure>
            </div>
         <p class="hckui__typography__bodyL" style="box-sizing: border-box; margin-bottom: 10px; line-height: 26px; color: #4a4a4a;">Commercial internet radio receivers are still relatively expensive and cost $ 100 and up. So I decided to make a device that is functional, easy to make and manage and inexpensive. On the site "electronicsforu.com" is given exactly such device that uses cheap MP3 VS1053 codec processor from "aliexpress.com" and ESP32 MCU. Optional can be added OLED display to know which station is playing.</p>
         <p class="hckui__typography__bodyL" style="box-sizing: border-box; margin-top: 15px; margin-bottom: 10px; line-height: 26px; color: #4a4a4a;">The ESP32 is connected on the streaming site at the fixed port and then receive the streaming data in an exact chunk of 32 bytes at a time. On the other hand, the board will keep on processing the data like an inflow/outflow machine and the stream will continue to play. For changing stations is used a GPIO (D13 ) pin as a push-to-on-switch to soft Reset the VS1053 board to tune in to the next station. The entire device is powered through the micro-usb port of the ESP32.</p>
         <div data-hypernova-key="ImageCarousel" data-hypernova-id="0236b2cf-e6fe-47d2-90dd-2cbcf37cf5e8" style="box-sizing: border-box;">
            <div data-reactroot="" style="box-sizing: border-box;">
               <div class="image_carousel__container__hMJxn undefined" style="box-sizing: border-box; width: 615px; height: 402px; margin: 30px 0px;">
                  <div class="image_carousel__wrapper__102VA lazy_image__fade__pGh1K lazy_image__fadeIn__1kICV" style="box-sizing: border-box; opacity: 1; transition: opacity 0.2s ease-in-out 0s; position: relative; height: 402px; user-select: none; width: 615px;">
                     <div class="hckui__layout__noScrollBar image_carousel__scrollContainer__3mmPE  " style="box-sizing: border-box; display: flex; align-items: center; width: 615px; height: 402px; overflow: auto; user-select: none;">
                        <div class="image_carousel__imageContainer__22WPm" style="box-sizing: border-box; min-width: 100%; display: flex; justify-content: center; height: 402px; user-select: none;">
                           <div class="image_carousel__imageWrapper__39AG2" style="box-sizing: border-box; display: flex; justify-content: center; height: 402px; flex-direction: column; align-items: center; max-width: 960px; position: relative; user-select: none;"><img class="image_carousel__image__2-CjO  " alt="" srcset="" src="https://hackster.imgix.net/uploads/attachments/1003314/esp832-internet-500x327_z3R9sdQtvu.png?auto=compress%2Cformat&amp;w=740&amp;h=555&amp;fit=max" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: 100%; cursor: zoom-in; opacity: 1; max-height: 100%; user-select: none;" /></div>
                           </div>
                        </div>
                     </div>
                  </div>
               <div style="box-sizing: border-box;">&nbsp;</div>
               </div>
            </div>
         <p class="hckui__typography__bodyL" style="box-sizing: border-box; margin-bottom: 10px; line-height: 26px; color: #4a4a4a;"><span style="box-sizing: border-box;">For connecting to the WiFi system, replace the SSID &amp; password to the beginning of the code and then upload in the normal Arduino way. Once uploaded the ESP32 will first say ‘Hello’ to indicate that the VS1053 is up and ready. It will then wait for couple of seconds to get connected [ Keep a watch on the Serial output] of the computer. Once on the Internet it will then tune to the station in host [6] and then the beautiful streaming voice will start pouring in. Press the switch once [connected to D13] and the next station will be tuned. The char *sname[7] variable is optional. You can have your choice names against each radio stations which are set.. Additional station names can be added in the host, path and port arrays. You can find streaming informations of various radios by genre (ip adress, port...) at:&nbsp;</span><a href="https://www.xatworld.com/radio-search/" class="hckui__typography__linkBlue" data-ha="{&quot;eventName&quot;:&quot;Clicked link&quot;,&quot;customProps&quot;:{&quot;value&quot;:&quot;https://www.xatworld.com/radio-search/.&quot;,&quot;href&quot;:&quot;https://www.xatworld.com/radio-search/.&quot;,&quot;type&quot;:&quot;story&quot;,&quot;location&quot;:&quot;story&quot;},&quot;clickOpts&quot;:{&quot;delayRedirect&quot;:true}}" rel="nofollow" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; cursor: pointer;" target="_blank">https://www.xatworld.com/radio-search/.</a></p>
         <p class="hckui__typography__bodyL" style="box-sizing: border-box; margin-top: 15px; margin-bottom: 10px; line-height: 26px; color: #4a4a4a;">Schematic code and libraries are given below:</p>
         </div>
      </section>
   <div class="project-section-break" style="box-sizing: border-box; border-top: 2px solid rgb(216, 216, 216); margin: 45px auto; width: 430.5px;">&nbsp;</div>
   <section id="schematics" style="box-sizing: border-box;">
      <div class="project-section-title" style="box-sizing: border-box; margin-bottom: 15px;">
         <h2 class="hckui__typography__h2 title-with-anchor" style="box-sizing: border-box; font-family: inherit; line-height: 44px; color: #111111; margin-top: 0px; margin-bottom: 0px; font-size: 34px;"><a class="anchor" href="https://www.hackster.io/mircemk/simple-esp32-internet-radio-with-oled-display-83e49d#schematics" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; font-size: 18px; margin-left: -21px; padding-right: 5px; opacity: 0; visibility: hidden;" target="_blank"><i class="hckui__typography__iconWrapper hckui__typography__iconBaselineFix" style="box-sizing: border-box; position: relative; top: 0.125em;"><svg class="hckui__typography__icon hckui__typography__icon20"><use xlink:href="#svg-link"></use></svg></i></a><span style="box-sizing: border-box;">Schematics</span></h2>
         </div>
      <div class="project-attachment" style="box-sizing: border-box; border-radius: 2px 2px 0px 0px;">
         <div class="header" style="box-sizing: border-box; border-width: 1px 1px 0px; border-style: solid; border-color: #d8d8d8; border-image: initial; border-radius: 2px 2px 0px 0px; padding: 15px; align-items: center; display: flex; justify-content: space-between;">
            <div class="text" style="box-sizing: border-box; word-break: break-word;">
               <h3 class="hckui__typography__h3" style="box-sizing: border-box; font-family: inherit; line-height: 32px; color: #111111; margin: 0px; font-size: 24px;">Schematic</h3>
               </div>
            <div class="actions" style="box-sizing: border-box; margin-left: 20px;"><a class="hckui__buttons__md hckui__buttons__outlineBlack hckui__buttons__icon" href="https://hacksterio.s3.amazonaws.com/uploads/attachments/1003316/untitled_sketch_bb_vkrrSmeM3f.jpg" title="Download" style="box-sizing: border-box; background-color: transparent; color: #4a4a4a; text-decoration-line: none; border: 1px solid rgb(74, 74, 74); border-radius: 4px; outline: none; font-size: 16px; line-height: 0; padding: 10px; cursor: pointer; display: inline-block; text-align: center;" target="_blank"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-download-file"></use></svg></i></a></div>
            </div>
         <div class="embed original boxed hckui__typography__textCenter" style="box-sizing: border-box; height: initial; padding-bottom: initial; position: relative; text-align: center; min-height: 50px; border: 1px solid rgb(216, 216, 216);"><img src="https://hackster.imgix.net/uploads/attachments/1003316/untitled_sketch_bb_vkrrSmeM3f.jpg" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: 100%;" /></div>
         </div>
      </section>
   <div class="project-section-break" style="box-sizing: border-box; border-top: 2px solid rgb(216, 216, 216); margin: 45px auto; width: 430.5px;">&nbsp;</div>
   <section id="code" style="box-sizing: border-box;">
      <div class="project-section-title" style="box-sizing: border-box; margin-bottom: 15px;">
         <h2 class="hckui__typography__h2 title-with-anchor" style="box-sizing: border-box; font-family: inherit; line-height: 44px; color: #111111; margin-top: 0px; margin-bottom: 0px; font-size: 34px;"><a class="anchor" href="https://www.hackster.io/mircemk/simple-esp32-internet-radio-with-oled-display-83e49d#code" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; font-size: 18px; margin-left: -21px; padding-right: 5px; opacity: 0; visibility: hidden;" target="_blank"><i class="hckui__typography__iconWrapper hckui__typography__iconBaselineFix" style="box-sizing: border-box; position: relative; top: 0.125em;"><svg class="hckui__typography__icon hckui__typography__icon20"><use xlink:href="#svg-link"></use></svg></i></a><span style="box-sizing: border-box;">Code</span></h2>
         </div>
      <div class="project-attachment project-code-widget" style="box-sizing: border-box; border-radius: 2px 2px 0px 0px; position: relative;">
         <div class="tabs hckui__typography__bodyS" style="box-sizing: border-box; font-size: 14px; line-height: 18px; color: #4a4a4a; margin-bottom: -1px;">
            <ul style="box-sizing: border-box; margin: 0px; display: flex; list-style: none; overflow-x: scroll; padding: 0px; width: 615px;">
               <li class="active" style="box-sizing: border-box; display: block; position: relative; margin-right: 5px; min-width: 60px; max-width: 200px;"><a data-target="#code-widget-349741" style="box-sizing: border-box; background-color: transparent; color: #444444; display: block; border-width: 1px; border-style: solid; border-color: #d8d8d8 rgb(216, 216, 216) rgb(255, 255, 255); border-image: initial; border-radius: 2px 2px 0px 0px; overflow: hidden; padding: 8px 12px; text-align: center; text-overflow: ellipsis; white-space: nowrap; width: 200px; font-weight: 700;">ESP32 Internet Radio CODE and Libraries</a></li>
               <li style="box-sizing: border-box; display: block; position: relative; margin-right: 5px; min-width: 60px; max-width: 200px;"><a data-target="#code-widget-411753" style="box-sizing: border-box; background-color: transparent; color: #444444; display: block; border: 1px solid rgb(216, 216, 216); border-radius: 2px 2px 0px 0px; overflow: hidden; padding: 8px 12px; text-align: center; text-overflow: ellipsis; white-space: nowrap; width: 140.203px;">Code in ZIP format</a></li>
               </ul>
            </div>
         <div class="preview-container" style="box-sizing: border-box;">
            <div class="preview-pane active" id="code-widget-349741" style="box-sizing: border-box; height: 500px; overflow: hidden;">
               <div class="header" style="box-sizing: border-box; border-width: 1px 1px 0px; border-style: solid; border-color: #d8d8d8; border-image: initial; border-radius: 0px; padding: 15px; align-items: center; display: flex; justify-content: space-between;">
                  <div class="text" style="box-sizing: border-box; word-break: break-word;">
                     <div class="title" style="box-sizing: border-box;">
                        <h3 class="hckui__typography__h3" style="box-sizing: border-box; font-family: inherit; line-height: 32px; color: #111111; margin: 0px 5px 0px 0px; font-size: 24px; display: inline;">ESP32 Internet Radio CODE and Libraries</h3>
                        <span class="hckui__typography__bodyS hckui__typography__pebble" style="box-sizing: border-box; font-size: 14px; line-height: 18px; color: #767676 !important;">Arduino</span></div>
                     </div>
                  <div class="actions" style="box-sizing: border-box; margin-left: 20px; display: flex;"><a class="hckui__buttons__md hckui__buttons__icon hckui__buttons__outlineBlack" href="https://hacksterio.s3.amazonaws.com/uploads/attachments/1003315/esp8266internetradio.rar" title="Download" style="box-sizing: border-box; background-color: transparent; color: #4a4a4a; text-decoration-line: none; border: 1px solid rgb(74, 74, 74); border-radius: 4px; outline: none; font-size: 16px; line-height: 0; padding: 10px; cursor: pointer; display: inline-block; text-align: center;" target="_blank"><i class="hckui__typography__iconWrapper" style="box-sizing: border-box;"><svg class="hckui__typography__icon hckui__typography__icon16"><use xlink:href="#svg-download-file"></use></svg></i></a></div>
                  </div>
               <div class="preview-body pygments-syntax arduino" style="box-sizing: border-box; height: 431px; overflow: scroll; border: 1px solid rgb(221, 221, 221);">
                  <pre style="box-sizing: border-box; overflow: visible; font-family: Menlo, Monaco, Consolas, &quot;courier new&quot;, monospace; font-size: 13px; padding: 9.5px 20px; margin-top: 0px; margin-bottom: 0px; line-height: 1.42857; color: #ffffff; word-break: normal; overflow-wrap: normal; background-color: #23241f; border: 0px; border-radius: 0px; white-space: pre-wrap; max-height: none; counter-reset: linenumbers 0; height: 412px;">No preview (download only).</pre>
                  </div>
               </div>
            </div>
         </div>
      </section>
   <div class="project-section-break" style="box-sizing: border-box; border-top: 2px solid rgb(216, 216, 216); margin: 45px auto; width: 430.5px;">&nbsp;</div>
   <section id="team" style="box-sizing: border-box;">
      <div class="project-section-title" style="box-sizing: border-box; margin-bottom: 15px;">
         <h2 class="hckui__typography__h2 title-with-anchor" style="box-sizing: border-box; font-family: inherit; line-height: 44px; color: #111111; margin-top: 0px; margin-bottom: 0px; font-size: 34px;"><a class="anchor" href="https://www.hackster.io/mircemk/simple-esp32-internet-radio-with-oled-display-83e49d#team" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; font-size: 18px; margin-left: -21px; padding-right: 5px; opacity: 0; visibility: hidden;" target="_blank"><i class="hckui__typography__iconWrapper hckui__typography__iconBaselineFix" style="box-sizing: border-box; position: relative; top: 0.125em;"><svg class="hckui__typography__icon hckui__typography__icon20"><use xlink:href="#svg-link"></use></svg></i></a><span style="box-sizing: border-box;">Credits</span></h2>
         </div>
      <div style="box-sizing: border-box;">
         <div class="user-card media" style="box-sizing: border-box; margin-top: 0px; overflow: hidden; zoom: 1; margin-bottom: 30px;">
            <div class="media-left" style="box-sizing: border-box; padding-right: 12px; display: table-cell; vertical-align: top;"><a href="https://www.hackster.io/mircemk" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none;" target="_blank"><img class="img-circle media-object" srcset="https://hackster.imgix.net/uploads/attachments/760437/t-rex_PUBDQt5vkw.png?auto=compress%2Cformat&amp;w=120&amp;h=120&amp;fit=min 2x, https://hackster.imgix.net/uploads/attachments/760437/t-rex_PUBDQt5vkw.png?auto=compress%2Cformat&amp;w=60&amp;h=60&amp;fit=min" alt="Mirko Pavleski" src="https://hackster.imgix.net/uploads/attachments/760437/t-rex_PUBDQt5vkw.png?auto=compress%2Cformat&amp;w=60&amp;h=60&amp;fit=min" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: none; border-radius: 50%; display: inline-block; height: 50px; width: 50px;" /></a></div>
            <div class="media-body" style="box-sizing: border-box; overflow: hidden; zoom: 1; width: 10000px; display: table-cell; vertical-align: top;">
               <h3 class="hckui__typography__h3" style="box-sizing: border-box; font-family: inherit; line-height: 32px; color: #111111; margin-top: 0px; margin-bottom: 0px; font-size: 24px;"><a class="hckui__typography__link" href="https://www.hackster.io/mircemk" style="box-sizing: border-box; background-color: transparent; color: #4a4a4a; text-decoration-line: none;" target="_blank">Mirko Pavleski</a></h3>
               <div class="hckui__typography__bodyS hckui__typography__pebble" style="box-sizing: border-box; font-size: 14px; line-height: 18px; color: #767676 !important;">5 projects • 164 followers</div>
               <div class="hckui__layout__marginTop15" style="box-sizing: border-box; margin-top: 15px !important;"><span style="box-sizing: border-box; display: inline-block; vertical-align: bottom; margin-right: 10px;"><span data-hypernova-key="UserRelationButton" data-hypernova-id="d44ce2d0-237e-4371-b169-441a73aec24d" style="box-sizing: border-box;"><button class="hckui__buttons__sm " type="button" data-reactroot="" style="color: #ffffff; font-style: inherit; font-variant: inherit; font-weight: 700; font-stretch: inherit; font-size: 14px; line-height: 18px; font-family: inherit; margin: 0px; overflow: visible; cursor: pointer; background-color: #2e9fe6; border-width: 1px; border-style: solid; border-color: #2e9fe6; border-radius: 4px; outline: none; padding: 5px 10px;">Follow</button></span></span><span class="user-signed-out" style="box-sizing: border-box;"><a class="hckui__buttons__sm hckui__buttons__secondary reactPortal" action="SigninDialog" data-redirect-to="/messages/new?recipient_id=168805" data-source="user_contact" data-react="{&quot;currentPanel&quot;:&quot;signup&quot;,&quot;simplified&quot;:true}" href="https://www.hackster.io/users/sign_up?redirect_to=%2Fmessages%2Fnew%3Frecipient_id%3D168805&amp;source=user_contact" style="box-sizing: border-box; background-color: #075b8b; color: #ffffff; text-decoration-line: none; border: 1px solid rgb(7, 91, 139); border-radius: 4px; outline: none; font-weight: 700; font-size: 14px; line-height: 18px; padding: 5px 10px; cursor: pointer; display: inline-block; text-align: center;" target="_blank">Contact</a></span></div>
               </div>
            </div>
         </div>
      </section>
   <div class="project-section-break" style="box-sizing: border-box; border-top: 2px solid rgb(216, 216, 216); margin: 45px auto; width: 430.5px;">&nbsp;</div>
   <section id="comments" style="box-sizing: border-box;">
      <div class="project-section-title" style="box-sizing: border-box; margin-bottom: 15px;">
         <h2 class="hckui__typography__h2 title-with-anchor" style="box-sizing: border-box; font-family: inherit; line-height: 44px; color: #111111; margin-top: 0px; margin-bottom: 0px; font-size: 34px;"><a class="anchor" href="https://www.hackster.io/mircemk/simple-esp32-internet-radio-with-oled-display-83e49d#comments" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none; font-size: 18px; margin-left: -21px; padding-right: 5px; opacity: 0; visibility: hidden;" target="_blank"><i class="hckui__typography__iconWrapper hckui__typography__iconBaselineFix" style="box-sizing: border-box; position: relative; top: 0.125em;"><svg class="hckui__typography__icon hckui__typography__icon20"><use xlink:href="#svg-link"></use></svg></i></a><span style="box-sizing: border-box;">Comments</span></h2>
         </div>
      <div class="comments" style="box-sizing: border-box;">
         <div data-hacksternova-key="ProjectComments" data-hacksternova-props="{&quot;commentable&quot;:{&quot;id&quot;:&quot;83e49d&quot;,&quot;type&quot;:&quot;projects&quot;},&quot;newCommentsDisabled&quot;:false,&quot;placeholder&quot;:&quot;Share your thoughts! What do you like about this project? How could it be improved? Be respectful and constructive – most Hackster members create and share personal projects in their free time.&quot;}" style="box-sizing: border-box;">
            <div class="r-comments" style="box-sizing: border-box;">
               <p style="box-sizing: border-box; margin-bottom: 10px;">Please&nbsp;<a style="box-sizing: border-box; background-color: transparent; color: #2e9fe6;">log in</a>&nbsp;or&nbsp;<a style="box-sizing: border-box; background-color: transparent; color: #2e9fe6;">sign up</a>&nbsp;to comment.</p>
               <div class="" data-intersect-callback-id="34bcd932-765d-4f88-bfb0-d6c3497e6420" style="box-sizing: border-box;">
                  <div style="box-sizing: border-box;">
                     <div class="comment" id="comment_113061" style="box-sizing: border-box; margin-top: 40px; padding-top: 40px; border-top: 1px solid rgb(221, 221, 221); font-size: 16px;">
                        <div class="comment-title" style="box-sizing: border-box; display: flex; position: relative; margin-bottom: 10px;">
                           <div class="avatar" style="box-sizing: border-box; margin-right: 10px;"><a href="https://www.hackster.io/BoulderTech" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none;" target="_blank"><img src="https://gravatar.com/avatar/eb081d1c5b22a3d7dcec4658245ef2b6.png?d=retro&amp;s=40" alt="Don Vukovic" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: 100%; border-radius: 50%; width: 40px; height: 40px;" /></a></div>
                           <div class="profile-name" style="box-sizing: border-box;">
                              <h4 style="box-sizing: border-box; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; margin: 0px; font-size: 1em;"><span style="box-sizing: border-box; font-weight: 700;"><a href="https://www.hackster.io/BoulderTech" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none;" target="_blank">Don Vukovic</a></span></h4>
                              <span class="text-muted comment-date" style="box-sizing: border-box; color: #777777; font-size: 0.9em;">7 months ago</span></div>
                           </div>
                        <div class="comment-body" style="box-sizing: border-box; margin-bottom: 10px;">
                           <p style="box-sizing: border-box;">The archive is either in unknown format or damaged.</p>
                           </div>
                        </div>
                     <div style="box-sizing: border-box;">
                        <div class="comment comment-nested" id="comment_116088" style="box-sizing: border-box; margin-top: 40px; padding-top: 40px; border-top: 1px solid rgb(221, 221, 221); font-size: 16px; margin-left: 50px; position: relative;">
                           <div class="comment-title" style="box-sizing: border-box; display: flex; position: relative; margin-bottom: 10px;">
                              <div class="avatar" style="box-sizing: border-box; margin-right: 10px;"><a href="https://www.hackster.io/BoulderTech" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none;" target="_blank"><img src="https://gravatar.com/avatar/eb081d1c5b22a3d7dcec4658245ef2b6.png?d=retro&amp;s=40" alt="Don Vukovic" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: 100%; border-radius: 50%; width: 40px; height: 40px;" /></a></div>
                              <div class="profile-name" style="box-sizing: border-box;">
                                 <h4 style="box-sizing: border-box; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; margin: 0px; font-size: 1em;"><span style="box-sizing: border-box; font-weight: 700;"><a href="https://www.hackster.io/BoulderTech" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none;" target="_blank">Don Vukovic</a></span></h4>
                                 <span class="text-muted comment-date" style="box-sizing: border-box; color: #777777; font-size: 0.9em;">6 months ago</span></div>
                              </div>
                           <div class="comment-body" style="box-sizing: border-box; margin-bottom: 10px;">
                              <p style="box-sizing: border-box; margin-bottom: 10px;">Would you please create a .ZIP file of this archive ?<br style="box-sizing: border-box;" />Would you please create a github repository ?<br style="box-sizing: border-box;" />The rar file is in unknown format or damaged.</p>
                              <p style="box-sizing: border-box;">Thank You</p>
                              </div>
                           </div>
                        </div>
                     </div>
                  <div style="box-sizing: border-box;">
                     <div class="comment" id="comment_115775" style="box-sizing: border-box; margin-top: 40px; padding-top: 40px; border-top: 1px solid rgb(221, 221, 221); font-size: 16px;">
                        <div class="comment-title" style="box-sizing: border-box; display: flex; position: relative; margin-bottom: 10px;">
                           <div class="avatar" style="box-sizing: border-box; margin-right: 10px;"><a href="https://www.hackster.io/schuh" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none;" target="_blank"><img src="https://gravatar.com/avatar/a84c4df86685789d94ca1e4d541c3118.png?d=retro&amp;s=40" alt="schuh" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: 100%; border-radius: 50%; width: 40px; height: 40px;" /></a></div>
                           <div class="profile-name" style="box-sizing: border-box;">
                              <h4 style="box-sizing: border-box; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; margin: 0px; font-size: 1em;"><span style="box-sizing: border-box; font-weight: 700;"><a href="https://www.hackster.io/schuh" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none;" target="_blank">schuh</a></span></h4>
                              <span class="text-muted comment-date" style="box-sizing: border-box; color: #777777; font-size: 0.9em;">6 months ago</span></div>
                           </div>
                        <div class="comment-body" style="box-sizing: border-box; margin-bottom: 10px;">
                           <p style="box-sizing: border-box;">I have built this project and upon booting, it successfully connects to the first station and plays well. However after pushing the tune button, the display changes to the next station but there is no audio. If I reset the ESP32 the system reboots and the next station shows on the display and plays fine ....... until the tune button is pushed .... and so on.<br style="box-sizing: border-box;" />Can anyone suggest where I'm going wrong? Thanks.</p>
                           </div>
                        <ul class="comment-actions" style="box-sizing: border-box; margin: 0px; font-size: 14px; list-style: none; padding: 0px;">
                           <li class="r-comments-counter" style="box-sizing: border-box; display: inline-block; color: #1cacf7;"><span style="box-sizing: border-box;">1&nbsp;thank</span></li>
                           </ul>
                        </div>
                     <div style="box-sizing: border-box;">
                        <div class="comment comment-nested" id="comment_127157" style="box-sizing: border-box; margin-top: 40px; padding-top: 40px; border-top: 1px solid rgb(221, 221, 221); font-size: 16px; margin-left: 50px; position: relative;">
                           <div class="comment-title" style="box-sizing: border-box; display: flex; position: relative; margin-bottom: 10px;">
                              <div class="avatar" style="box-sizing: border-box; margin-right: 10px;"><a href="https://www.hackster.io/bartakmil2" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none;" target="_blank"><img src="https://lh5.googleusercontent.com/-EY5VuUgMOwc/AAAAAAAAAAI/AAAAAAAAAAA/AKF05nAbA3foOe0-JrnpxAKta03UATevbA/photo.jpg" alt="Milan Bartak" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: 100%; border-radius: 50%; width: 40px; height: 40px;" /></a></div>
                              <div class="profile-name" style="box-sizing: border-box;">
                                 <h4 style="box-sizing: border-box; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; margin: 0px; font-size: 1em;"><span style="box-sizing: border-box; font-weight: 700;"><a href="https://www.hackster.io/bartakmil2" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none;" target="_blank">Milan Bartak</a></span></h4>
                                 <span class="text-muted comment-date" style="box-sizing: border-box; color: #777777; font-size: 0.9em;">2 months ago</span></div>
                              </div>
                           <div class="comment-body" style="box-sizing: border-box; margin-bottom: 10px;">
                              <p style="box-sizing: border-box; margin-bottom: 10px;">HI, I have came to the same problem - I just tried to put again player begin instead of soft reset and now it works fine.</p>
                              <p style="box-sizing: border-box;"><a href="https://player.softreset/" target="_blank" rel="noopener noreferrer nofollow" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none;">//player.softReset</a>();<br style="box-sizing: border-box;" />SPI.begin();<br style="box-sizing: border-box;" />player.begin();<br style="box-sizing: border-box;" />player.setVolume(VOLUME);</p>
                              </div>
                           </div>
                        </div>
                     <div style="box-sizing: border-box;">
                        <div class="comment comment-nested" id="comment_129297" style="box-sizing: border-box; margin-top: 40px; padding-top: 40px; border-top: 1px solid rgb(221, 221, 221); font-size: 16px; margin-left: 50px; position: relative;">
                           <div class="comment-title" style="box-sizing: border-box; display: flex; position: relative; margin-bottom: 10px;">
                              <div class="avatar" style="box-sizing: border-box; margin-right: 10px;"><a href="https://www.hackster.io/franz-josef-haffner" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none;" target="_blank"><img src="https://lh3.googleusercontent.com/a-/AOh14GgnUhn41rDYFoDtMj4k2SbJLSCjAuvpg-O8FT7DDQ" alt="Franz-Josef Haffner" style="box-sizing: border-box; border: 0px; vertical-align: middle; color: transparent; max-width: 100%; border-radius: 50%; width: 40px; height: 40px;" /></a></div>
                              <div class="profile-name" style="box-sizing: border-box;">
                                 <h4 style="box-sizing: border-box; font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; margin: 0px; font-size: 1em;"><span style="box-sizing: border-box; font-weight: 700;"><a href="https://www.hackster.io/franz-josef-haffner" style="box-sizing: border-box; background-color: transparent; color: #2e9fe6; text-decoration-line: none;" target="_blank">Franz-Josef Haffner</a></span></h4>
                                 <span class="text-muted comment-date" style="box-sizing: border-box; color: #777777; font-size: 0.9em;">a month ago</span></div>
                              </div>
                           <div class="comment-body" style="box-sizing: border-box; margin-bottom: 10px;">
                              <p style="box-sizing: border-box; margin-bottom: 10px;">Hello, great project, I love it. So simple and cheap.<br style="box-sizing: border-box;" />Had to remove some bugs:</p>
                              <ul style="box-sizing: border-box; margin-top: 0px; margin-bottom: 10px;">
                                 <li style="box-sizing: border-box;">critical VS-Boards need the correction code "player.switchToMp3Mode();" after every station_connect. I.E.:</li>
                                 </ul>
                              <p style="box-sizing: border-box; margin-bottom: 10px;">...player.softReset();<br style="box-sizing: border-box;" />x=true;<br style="box-sizing: border-box;" />station_connect(new_counter);<br style="box-sizing: border-box;" />player.switchToMp3Mode();<br style="box-sizing: border-box;" />preferences.putUInt("counter",new_counter);...</p>
    