diff --git a/play.html b/play.html
new file mode 100644
index 0000000..3ac32ef
--- /dev/null
+++ b/play.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://code.jquery.com/jquery.min.js"></script>
+  <script>
+ function play() {
+   var my = document.getElementById('player');
+   my.currentTime = 0;
+   /**this one loops***/
+   if ($('.btn').find('span i').hasClass('fa-stop')) {
+     $('.btn').find('span i').removeClass('fa-stop').addClass('fa-play-circle');
+     $('.texto').text("Play");
+   }
+   if (my.paused) {
+     my.play();
+   } else {
+     my.pause();
+     my.currentTime = 0;
+   }
+   my.addEventListener("ended", function(e) {
+     $('.btn').find('span i').removeClass('fa-play-circle').addClass('fa-stop');
+     $('.texto').text("Stop");
+     my.play();
+   });
+ }
+
+ async function updateTitle() {
+    const url = "/json";
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            //throw new Error(`Response status: ${response.status}`);
+        } else {
+
+          const json = await response.json();
+          //console.log(json);
+          document.getElementById('title').innerText = json.title;
+	}
+    } catch (error) {
+        console.error(error.message);
+    }
+ }
+
+    // document.shredIng = { title: "" };
+    // function updateTitle() {
+    //  fetch("/js", {
+    //      headers: { 'Content-Type': 'application/json'
+    //               }
+    //  }).then(function(response) {
+    //      if(!response.ok) {
+    //          // oh no, an error. better do stuff!
+    //      }
+    //      else {
+    //          if(response.json && response.json.title) {
+    //              document.shredIng.title = response.json.title;
+
+    //              document.getElementById('title').innerText = document.shredIng.title;
+    //          }
+    //      }
+    //  });
+    // }
+
+    setInterval(updateTitle, 7200);
+  </script>
+  <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=Rubik+80s+Fade&display=swap" rel="stylesheet">
+  <style>
+html {
+  background: #000;
+  padding: 0px;
+  margin: 0px;
+  border: 0px;
+}
+.fb {
+  width: 100%;
+  height: 100%;
+  min-height: 90vh;
+}
+.np {
+  padding: 0px;
+  margin: 0px;
+  border: 0px;
+}
+.bg {
+  background: #000;
+  background-image: linear-gradient(180deg,rgba(117, 117, 117, 1) 0%, rgba(110, 110, 110, 1) 17%, rgba(20, 20, 20, 1) 100%);
+}
+.rubik-80s-fade-regular {
+  font-family: "Rubik 80s Fade", system-ui;
+  font-weight: 400;
+  font-style: normal;
+}
+h1, h2, h3, h4, h5 {
+  font-family: "Rubik 80s Fade", system-ui;
+  font-weight: 400;
+  font-style: normal;
+}
+  </style>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Shred.ing</title>
+</head>
+<body>
+<div class="bg padding fb"><div style="text-align: center">
+  <div class=="np bg" id="music" style="padding-left:.5rem;">
+    <h1 style="font-size: 500%" class="np">Shred.ing</h1>
+    <h2 style="font-size: 330%" class="np">Internet Radio</h2>
+    <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#player" onclick="play();">
+      <!-- <span><i class="fa fa-play-circle" aria-hidden="true"></i>
+        &nbsp;&nbsp;
+        <span class="texto">Play</span>
+      </span> -->
+      <audio controls id="player" class="collapse">
+        <source src="https://shred.ing" type="audio/mp3">
+      </audio>
+    </button>
+
+  <div id="title" style="border: 1px dashed cyan; font-family: Arial, Helvetica, sans-serif; font-size: 150%; padding: .75rem; margin-top: .5rem; text-align: center; padding-top: .75rem; color: #3c3; filter: drop-shadow(1.6px 1.3px .25px #c3c);" class="">
+    $Title$
+  </div></div>
+</div>
+<script>  updateTitle(); </script>
+</body>
+</html>
