View Page Source

Did you know...
Streams heard since April 2006:
13,870,626

view source - https://whpk.org/

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" />  <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap" rel="stylesheet" />  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">  <script src="https://kit.fontawesome.com/c681f845d0.js" crossorigin="anonymous"></script>   <link rel="stylesheet" href="https://whpk.org/_assets/css/style.css" /> <link rel="stylesheet" href="https://whpk.org/_assets/css/footer.css" /> <link rel="stylesheet" href="https://whpk.org/_assets/css/Navbar.css" /> <link rel="stylesheet" href="https://whpk.org/_assets/css/Responsive.css" /> <link rel="icon" type="image/x-icon" href="https://whpk.org/_assets/resources/images/favicon.ico"> <title> WHPK - Home </title> <style> .container-custom-music { position: fixed; top: 1.8vw; right: 2.5vw; display: flex; flex-direction: row; justify-content: center; z-index: 1000000000 } @media only screen and (max-width: 1000px) { .container-custom-music { top: auto; bottom: 1.2vw; right: 3.5vw; } } @media only screen and (max-width: 600px) { .container-custom-music { top: auto; bottom: 2vw; right: 3.5vw; } } </style> </head> <body data-scroll-container> <div class="overlay"> <h1> WHPK <br />  </h1> </div> <header class="d-lg-block d-none" data-scroll-section> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div id="navbar" class=""> <div class="menu2Btn"> <button class="btn2">Close</button> </div> <div class="menuItem"> <a href="https://whpk.org/schedule">schedule</a> <a href="https://whpk.org/events">events</a> <a href="https://whpk.org/about">about</a> <a href="https://whpk.org/contact">contact</a> <a href="https://whpk.org/donate">donate</a> <a href="https://whpk.org/blog">blog</a> <a href="https://whpk.org/magazine">magazine</a> </div> </div> </div> <div class="col-md-12 navbarSingleItem"> <div class="menuImg"> <a href="http://whpk.org"> <img src="https://whpk.org/_assets/resources/images/menuIcon.png" class="img-fluid" alt="menuIcon" /></a> </div> <div class="menuSingleItem">  <div class="menuButton"> <div class="menuText"> <button id="menuToggle">menu</button> </div> </div>  <div class="menuPlaying"> <h3>Now Playing :</h3> <div class="marqueText"> <marquee class="target changeText" id="textChange"> Staff picks </marquee> </div> </div> <div class="listen"> </div> </div> </div> </div> </div> </header>   <section class="mobileTopHeader d-lg-none d-block" data-scroll-section> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="menuPlaying mobilePlaying"> <h3>Now Playing :</h3> <div class="marqueText mobileMarque"> <div class="marqueText"> <marquee class="target changeText" id="textChange3" onmouseover="stop()" onmouseout="start()"> Staff picks </marquee> </div> </div> <div class="playIngIcon mobileInfo"> <span> <iconify-icon icon="ant-design:info-circle-outlined"></iconify-icon> </span> </div> </div> </div> </div> </div> </section>   <section class="mobileMenu d-block" data-scroll-section> <div class="col-md-12"> <div id="Mobile_navbar" class=""> <div class="MobilemenuItem"> <a href="https://whpk.org/schedule">Schedule</a> <a href="https://whpk.org/events">Events</a> <a href="https://whpk.org/about">About</a> <a href="https://whpk.org/contact">Contact</a> <a href="https://whpk.org/donate">Donate</a> <a href="https://whpk.org/blog">Blog</a> <a href="https://whpk.org/magazine">Magazine</a> <div class="closeMobileMenu"> <button id="closeMobileButton"> <span><iconify-icon icon="bi:arrow-down"></iconify-icon></span> </button> </div> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="mobileMenuItem"> <div class="menuButton"> <button id="mobileBUtton">Menu</button> </div> <div class="menuLogo"> <a href="http://whpk.org"> <img src="https://whpk.org/_assets/resources/images/menuIcon.png" class="img-fluid" alt="logo" /></a> </div> <div class="mobileMenuListen"> <h3> <a style="visibility:hidden" href="https://whpk-stream.uchicago.edu/stream" target="_blank">Listen</a> </h3> </div> </div> </div> </div> </div> </section> <div class="container-custom-music"> <button style="border:none;background:transparent" onclick="change();playPause()" type="button" value="Play" id="button1"> <i id="music-icon" class='fas fa-play' style='font-size:21px;color:#222222;border:none'></i> <span style="">Listen</span> </button> <input style="background-color:transparent;width:60px;" type="hidden" onchange="setVolume()" id='volume1' min=0 max=1 step=0.01 value='1'> </div> splash <style> .splash { background-image: url('https://whpk.org/_assets/resources/images/homepage/thestation.png'); background-size: cover; background-position: center; } .splashtext a { color: white; } .bigtitle { color: white; } @media screen and (max-width: 768px) { .bigtitle { /* Styles for smaller screens */ font-size: 100px; /* Adjust as needed */ text-align: center; } } </style> <div class="splash"> <h1 class="bigtitle splashtitle m-4">WHPK</h1> <div class="container-fluid sptextbg"> <div class="row mt-5 mx-5 text-center"> <p class="px-3 splashtext">88.5 FM Chicago. The Pride of the South Side.</p> <p class="px-3 splashtext mb-5"><a href="#" style="color: white !important; text-decoration: underline" onclick="scrollToContent(); return false;">Who's on?</a></p> </div> </div> </div> <div id="content"> </div> <style> .pb { background-color: black; } .pnow { background-size: contain; } </style> <div class="pnow"> <div class="container mt-4"> <div class="row justify-content-center"> <div class="col-12 col-lg-7 border border-white py-4 bg-white mt-5"> <h1>Playing Now: Staff picks </h1> <p>DJ: WHPK Staff </p> <div class="row my-2"> <div class="col-2"> <button style="border:none;background:transparent" onclick="change();playPause()" type="button" value="Play" id="button2"> <i id="music-icon2" class='fas fa-play' style='font-size:21px;color:#222222;border:none'></i> <span style="">Listen</span> </button> </div> <div class="col-10"> <div class="progress my-1"> <div class="progress-bar pb" role="progressbar" style="width: 90%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> </div> </div> <img style="max-width: 100%;" class="mx-auto my-2 d-block" src="https://whpk.org/show_info/show_images/default_image.jpg" class="img-fluid" alt=""> <p> A collection of music curated by WHPK staff </p> </div> </div> <div class="row justify-content-center"> <div class="col-12 col-lg-7"> <p>Curious what else we play? Check out our <a href="https://whpk.org/schedule">schedule</a></p> </div> </div> </div> </div>  <section class="schedule" data-scroll-section> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="scheduleSingleItem"> <div class="scheduleIcon"> <img src="https://whpk.org/_assets/resources/images/down.png" class="img-fluid" alt="arrow" /> </div> <div class="scheduleText"> <h3>Coming Up Today</h3> </div> <div class="scheduleIcon"> <img src="https://whpk.org/_assets/resources/images/down.png" class="img-fluid" alt="arrow" /> </div> </div> </div> </div> </div> </section>   <section class="accrodion" data-scroll-section> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="accro_singleItem d-md-block d-none">  <div class="accrodionTitle"> <div class="title-ac"> <h3>Archive</h3> </div> </div> <div class="accro-date"> <h3> <span><span class="iconify" data-icon="akar-icons:arrow-left"></span></span> <span id="current_month"></span> <span id="current_day"></span> <span><span class="iconify" data-icon="akar-icons:arrow-right"></span></span> </h3> </div> </div>   <div class="mobileAccro d-md-none"> <div class="title-ac"> <h3>Archive</h3> </div> <div class="accro-date"> <h3> <span><span class="iconify" data-icon="akar-icons:arrow-left"></span></span> <span id="current_month2"></span> <span id="current_day2"></span> <span><span class="iconify" data-icon="akar-icons:arrow-right"></span></span> </h3> </div> <div class="accrodModal"> <button id="dropShowBtn">Genres</button> <div class="mobileAccroDropItem"> <div class="mobileMenuTitle"> <div class="closeItem"> <h3 style="margin-bottom: 15px">Genre Index</h3> <div class="closeBtn"> <button> <iconify-icon icon="ei:close"></iconify-icon> </button> </div> </div> <div class="generItem">  <div class="publicGener"> <h3> <span><img src="https://whpk.org/_assets/resources/images/eye.png" class="img-fluid" alt="Public Affairs" /></span>Public Affairs </h3> </div>   <div class="publicGener"> <h3> <span><img src="https://whpk.org/_assets/resources/images/polygon.png" class="img-fluid" alt="Rock" /></span>Rock </h3> </div>   <div class="publicGener"> <h3> <span><img src="https://whpk.org/_assets/resources/images/electronic.png" class="img-fluid" alt="Electronic" /></span>Electronic </h3> </div>   <div class="publicGener"> <h3> <span><img src="https://whpk.org/_assets/resources/images/jaz.png" class="img-fluid" alt="Jazz" /></span>Jazz </h3> </div>   <div class="publicGener"> <h3> <span><img src="https://whpk.org/_assets/resources/images/Rap.png" class="img-fluid" alt="Rap" /></span>Rap </h3> </div>   <div class="publicGener"> <h3> <span><img src="https://whpk.org/_assets/resources/images/clasical.png" class="img-fluid" alt="Classical" /></span>Classic </h3> </div>   <div class="publicGener"> <h3> <span><img src="https://whpk.org/_assets/resources/images/Folk.png" class="img-fluid" alt="Folk" /></span>Folk </h3> </div>   <div class="publicGener"> <h3> <span><img src="https://whpk.org/_assets/resources/images/international.png" class="img-fluid" alt="" /></span>International </h3> </div>  </div> </div> </div> </div> </div>  </div> </div> </div> </section> <section class="collapsed-Header d-md-block d-none" data-scroll-section> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="collapsed-single-item"> <div class="collapsedHeader">  <div class="public"> <h4> <span><img src="https://whpk.org/_assets/resources/images/eye.png" class="img-fluid" alt="eye" /></span>Public Affairs </h4> </div>   <div class="public"> <h4> <span><img src="https://whpk.org/_assets/resources/images/polygon.png" class="img-fluid" alt="Polygon" /></span>Rock </h4> </div>   <div class="public"> <h4> <span><img src="https://whpk.org/_assets/resources/images/electronic.png" class="img-fluid" alt="Polygon" /></span>Electronic </h4> </div>   <div class="public"> <h4> <span><img src="https://whpk.org/_assets/resources/images/jaz.png" class="img-fluid" alt="Jazz" /></span>Jazz </h4> </div>   <div class="public"> <h4> <span><img src="https://whpk.org/_assets/resources/images/Rap.png" class="img-fluid" alt="Rap" /></span>Rap </h4> </div>   <div class="public"> <h4> <span><img src="https://whpk.org/_assets/resources/images/clasical.png" class="img-fluid" alt="Classical" /></span>Classical </h4> </div>   <div class="public"> <h4> <span><img src="https://whpk.org/_assets/resources/images/Folk.png" class="img-fluid" alt="Folk" /></span>Folk </h4> </div>   <div class="public"> <h4> <span><img src="https://whpk.org/_assets/resources/images/international.png" class="img-fluid" alt="International" /></span>International </h4> </div>  </div> </div> </div> </div> </div> </section>  <section class="collapsed2" data-scroll-section> <div class="container-fluid"> <div class="row"> <div class="col-md-12 collapsedCOl"> <div id="main"> <div class="accordion" id="faq">  <div class="card card01"> <div class="card-header cardHeader01" id="faqhead1"> <a style="background-color:#deebff" href="#" class="btn btn-header-link btn-header-link01 collapsed2" data-toggle="collapse" data-target="#faq01" aria-expanded="true" aria-controls="faq1"> <div class="collapsed2_title_date"> <div class="collapsed2_first"> <div class="collapsed2_date"> <h4 style="background-color:#deebff"> 9AM-10AM </h4> </div> <div class="collapsed2_date"> <h4 class="collapased2Title"> Sunday Morning Alchemy </h4> </div> </div> <div class="collapsed2Last"> <div class="collapsed2_sign"> <img src="https://whpk.org/_assets/resources/images/jaz.png" class="img-fluid" alt="union" /> </div> <div class="collapsed_arrow"> <span class="iconify" data-icon="charm:arrow-up-right"></span> </div> </div> </div> </a> </div> <div id="faq01" class="collapse" aria-labelledby="faqhead1" style="background-color:#deebff" data-parent="#faq"> <div class="card-body"> <div class="singleItemCard"> <div class="cardDesc"> <p> <a href="https://whpk.org/show_info/?showid=141" style="text-decoration-line: underline">Learn More </a> </p> </div> <div class="cardName"> <p> Array </p> </div> <div class="iconName"> <p> Jazz </p> </div> </div> </div> </div> </div>  <div class="card card02"> <div class="card-header cardHeader02" id="faqhead2"> <a style="background-color:#deebff" href="#" class="btn btn-header-link btn-header-link02 collapsed2" data-toggle="collapse" data-target="#faq02" aria-expanded="true" aria-controls="faq2"> <div class="collapsed2_title_date"> <div class="collapsed2_first"> <div class="collapsed2_date"> <h4 style="background-color:#deebff"> 10AM-11AM </h4> </div> <div class="collapsed2_date"> <h4 class="collapased2Title"> Sunday Morning Alchemy </h4> </div> </div> <div class="collapsed2Last"> <div class="collapsed2_sign"> <img src="https://whpk.org/_assets/resources/images/jaz.png" class="img-fluid" alt="union" /> </div> <div class="collapsed_arrow"> <span class="iconify" data-icon="charm:arrow-up-right"></span> </div> </div> </div> </a> </div> <div id="faq02" class="collapse" aria-labelledby="faqhead2" style="background-color:#deebff" data-parent="#faq"> <div class="card-body"> <div class="singleItemCard"> <div class="cardDesc"> <p> <a href="https://whpk.org/show_info/?showid=142" style="text-decoration-line: underline">Learn More </a> </p> </div> <div class="cardName"> <p> Array </p> </div> <div class="iconName"> <p> Jazz </p> </div> </div> </div> </div> </div>  <div class="card card03"> <div class="card-header cardHeader03" id="faqhead3"> <a style="background-color:#deebff" href="#" class="btn btn-header-link btn-header-link03 collapsed2" data-toggle="collapse" data-target="#faq03" aria-expanded="true" aria-controls="faq3"> <div class="collapsed2_title_date"> <div class="collapsed2_first"> <div class="collapsed2_date"> <h4 style="background-color:#deebff"> 11AM-12PM </h4> </div> <div class="collapsed2_date"> <h4 class="collapased2Title"> My Daddy's Music: The Best in Jazz from the 50s & 60s </h4> </div> </div> <div class="collapsed2Last"> <div class="collapsed2_sign"> <img src="https://whpk.org/_assets/resources/images/jaz.png" class="img-fluid" alt="union" /> </div> <div class="collapsed_arrow"> <span class="iconify" data-icon="charm:arrow-up-right"></span> </div> </div> </div> </a> </div> <div id="faq03" class="collapse" aria-labelledby="faqhead3" style="background-color:#deebff" data-parent="#faq"> <div class="card-body"> <div class="singleItemCard"> <div class="cardDesc"> <p> <a href="https://whpk.org/show_info/?showid=115" style="text-decoration-line: underline">Learn More </a> </p> </div> <div class="cardName"> <p> Array </p> </div> <div class="iconName"> <p> Jazz </p> </div> </div> </div> </div> </div>  <div class="card card04"> <div class="card-header cardHeader04" id="faqhead4"> <a style="background-color:#deebff" href="#" class="btn btn-header-link btn-header-link04 collapsed2" data-toggle="collapse" data-target="#faq04" aria-expanded="true" aria-controls="faq4"> <div class="collapsed2_title_date"> <div class="collapsed2_first"> <div class="collapsed2_date"> <h4 style="background-color:#deebff"> 12PM-1PM </h4> </div> <div class="collapsed2_date"> <h4 class="collapased2Title"> My Daddy's Music: The Best in Jazz from the 50s & 60s </h4> </div> </div> <div class="collapsed2Last"> <div class="collapsed2_sign"> <img src="https://whpk.org/_assets/resources/images/jaz.png" class="img-fluid" alt="union" /> </div> <div class="collapsed_arrow"> <span class="iconify" data-icon="charm:arrow-up-right"></span> </div> </div> </div> </a> </div> <div id="faq04" class="collapse" aria-labelledby="faqhead4" style="background-color:#deebff" data-parent="#faq"> <div class="card-body"> <div class="singleItemCard"> <div class="cardDesc"> <p> <a href="https://whpk.org/show_info/?showid=116" style="text-decoration-line: underline">Learn More </a> </p> </div> <div class="cardName"> <p> Array </p> </div> <div class="iconName"> <p> Jazz </p> </div> </div> </div> </div> </div>  <div class="card card05"> <div class="card-header cardHeader05" id="faqhead5"> <a style="background-color:#deebff" href="#" class="btn btn-header-link btn-header-link05 collapsed2" data-toggle="collapse" data-target="#faq05" aria-expanded="true" aria-controls="faq5"> <div class="collapsed2_title_date"> <div class="collapsed2_first"> <div class="collapsed2_date"> <h4 style="background-color:#deebff"> 1PM-2PM </h4> </div> <div class="collapsed2_date"> <h4 class="collapased2Title"> My Daddy's Music: The Best in Jazz from the 50s & 60s </h4> </div> </div> <div class="collapsed2Last"> <div class="collapsed2_sign"> <img src="https://whpk.org/_assets/resources/images/jaz.png" class="img-fluid" alt="union" /> </div> <div class="collapsed_arrow"> <span class="iconify" data-icon="charm:arrow-up-right"></span> </div> </div> </div> </a> </div> <div id="faq05" class="collapse" aria-labelledby="faqhead5" style="background-color:#deebff" data-parent="#faq"> <div class="card-body"> <div class="singleItemCard"> <div class="cardDesc"> <p> <a href="https://whpk.org/show_info/?showid=117" style="text-decoration-line: underline">Learn More </a> </p> </div> <div class="cardName"> <p> Array </p> </div> <div class="iconName"> <p> Jazz </p> </div> </div> </div> </div> </div>  <div class="card card06"> <div class="card-header cardHeader06" id="faqhead6"> <a style="background-color:#deebff" href="#" class="btn btn-header-link btn-header-link06 collapsed2" data-toggle="collapse" data-target="#faq06" aria-expanded="true" aria-controls="faq6"> <div class="collapsed2_title_date"> <div class="collapsed2_first"> <div class="collapsed2_date"> <h4 style="background-color:#deebff"> 2PM-3PM </h4> </div> <div class="collapsed2_date"> <h4 class="collapased2Title"> Jazz/Current and Local Jazz and Jazz Calendar </h4> </div> </div> <div class="collapsed2Last"> <div class="collapsed2_sign"> <img src="https://whpk.org/_assets/resources/images/jaz.png" class="img-fluid" alt="union" /> </div> <div class="collapsed_arrow"> <span class="iconify" data-icon="charm:arrow-up-right"></span> </div> </div> </div> </a> </div> <div id="faq06" class="collapse" aria-labelledby="faqhead6" style="background-color:#deebff" data-parent="#faq"> <div class="card-body"> <div class="singleItemCard"> <div class="cardDesc"> <p> <a href="https://whpk.org/show_info/?showid=118" style="text-decoration-line: underline">Learn More </a> </p> </div> <div class="cardName"> <p> Array </p> </div> <div class="iconName"> <p> Jazz </p> </div> </div> </div> </div> </div>  <div class="card card07"> <div class="card-header cardHeader07" id="faqhead7"> <a style="background-color:#deebff" href="#" class="btn btn-header-link btn-header-link07 collapsed2" data-toggle="collapse" data-target="#faq07" aria-expanded="true" aria-controls="faq7"> <div class="collapsed2_title_date"> <div class="collapsed2_first"> <div class="collapsed2_date"> <h4 style="background-color:#deebff"> 3PM-4PM </h4> </div> <div class="collapsed2_date"> <h4 class="collapased2Title"> Jazz/Current and Local Jazz and Jazz Calendar </h4> </div> </div> <div class="collapsed2Last"> <div class="collapsed2_sign"> <img src="https://whpk.org/_assets/resources/images/jaz.png" class="img-fluid" alt="union" /> </div> <div class="collapsed_arrow"> <span class="iconify" data-icon="charm:arrow-up-right"></span> </div> </div> </div> </a> </div> <div id="faq07" class="collapse" aria-labelledby="faqhead7" style="background-color:#deebff" data-parent="#faq"> <div class="card-body"> <div class="singleItemCard"> <div class="cardDesc"> <p> <a href="https://whpk.org/show_info/?showid=119" style="text-decoration-line: underline">Learn More </a> </p> </div> <div class="cardName"> <p> Array </p> </div> <div class="iconName"> <p> Jazz </p> </div> </div> </div> </div> </div>  </div> </div> </div> </div> </div> </section> <footer data-scroll-section> <div class="border"></div> <div class="container-fluid"> <div class="row">  <div class="col-md-6"> <div class="footerLeftItem"> <div class="footerLink"> <a href="https://twitter.com/whpk_chicago" title="WHPK on Twitter" target="_blank">Twitter</a><a href="#"></a> <a href="https://www.facebook.com/whpk885" title="WHPK on Facebook" target="_blank">Facebook</a><a href="#"></a> <a href="https://www.instagram.com/whpk_88.5fm/" target="_blank">Instagram</a> <a href="https://soundcloud.com/WHPK" target="_blank">Soundcloud</a> <a href="https://youtube.com/c/WHPK885FM " target="_blank">Youtube</a> <div class="footerDesc"> <p>©2022 WHPK</p> </div> </div>   <div class="footerLogo"> <a href="whpk.org"> <img src="https://whpk.org/_assets/resources/images/banner.png" class="img-fluid" alt="logo" /></a> </div>  </div> </div>  <div class="col-md-6"> <div class="footerLastItem"> <div class="footerAddress"> <div class="footerHome"> <h6> Reynolds Club, 5706 S. University Ave. <br /> Chicago, IL 60637 </h6> </div> <div class="footerOfficeItem"> <div class="footerOffice"> <p> Office <br /> 773-702-0229 </p> </div> <div class="footerStudio"> <p> Studio <br /> 773-702-8424 </p> </div> </div> <div class="footerHome"> <p> <i>Disclaimer: staff is rarely in the physical office. You can reach our station manager, Dean Bilenker, at <b>(203) 356-5533</b>, for FCC inquiries or emergencies</i>. Please do not contact the station manager for <a href="/contact">music submissions.</a> </p> </div> </div>   <div class="creator"> <div class="first"> <p> Designed by <br /> Chirag Kawediya and <br /> Vitasiempre </p> </div> <div class="middle"> <p> <a href="https://publicfiles.fcc.gov/fm-profile/WHPK " class="privacy" target="_blank"> FCC Online Public File</a> </p> </div> <div class="last"> <p><a href="https://whpk.org/privacy" class="privacy">Privacy</a></p> </div>  </div> </div> </div> </div> </div> </footer>  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script> <script src="https://code.iconify.design/iconify-icon/1.0.0-beta.3/iconify-icon.min.js"></script> <script src="https://whpk.org/_assets/js/app.js"></script> <script src="https://whpk.org/_assets/js/TweenMax.min.js"></script>  <script src="https://whpk.org/_assets/js/animation.js"></script> <script src="js/MobileTex.js"></script> <script> // audioPlay(); var mediaClip = new Audio("https://whpk-stream.uchicago.edu/stream") var volume1 = document.getElementById("volume1"); function playPause() { if (mediaClip.paused) { mediaClip.play(); document.getElementById("music-icon").classList.remove("fa-play"); document.getElementById("music-icon").classList.add("fa-pause"); document.getElementById("music-icon2")?.classList?.remove("fa-play"); document.getElementById("music-icon2")?.classList?.add("fa-pause"); } else { mediaClip.pause(); document.getElementById("music-icon").classList.remove("fa-pause"); document.getElementById("music-icon").classList.add("fa-play"); document.getElementById("music-icon2")?.classList?.remove("fa-pause"); document.getElementById("music-icon2")?.classList?.add("fa-play"); } } function change() { var button1 = document.getElementById("button1"); if (button1.value === "Play") button1.value = "Pause"; else button1.value = "Play"; var button2 = document.getElementById("button2"); if (button2 != null) { if (button2.value === "Play") button2.value = "Pause"; else button2.value = "Play"; } } function setVolume() { mediaClip.volume = document.getElementById("volume1").value; } ended() function ended() { mediaClip.addEventListener("ended", () => { document.getElementById("music-icon").classList.remove("fa-pause"); document.getElementById("music-icon").classList.add("fa-play"); }); } function click() { alert("clicked"); } // ======= Popup ======= document.querySelector('#closePopup').addEventListener('click', () => { console.log('clicked'); document.querySelector('.popup').style.display = 'none'; document.querySelector('.popup-bg').style.display = 'none'; }); // Set the date we're counting down to var countDownDate = new Date("Mar 31, 2024 00:00:00").getTime(); // Update the count down every 1 second var x = setInterval(function () { // Get today's date and time var now = new Date().getTime(); // Find the distance between now and the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // Display the result in the element with id="demo" document.getElementById("countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; // If the count down is finished, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000); </script> </body>