diff --git a/index.html b/index.html
index 6d8a331..366f613 100644
--- a/index.html
+++ b/index.html
@@ -40,6 +40,7 @@
     <script src="./js/sm2/js/soundmanager2-jsmin.js"></script>
     <script src="./js/core.js"></script>
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-120277085-2"></script>
+    <button id="playButton">Play Mucic Code</button>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments);}
@@ -94,6 +95,23 @@
 <div class="tap" id="meow">
     <span>SPACE</span>
 </div>
+<div id="codeModal" class="modal">
+  <div class="modal-content">
+    <span class="close">&times;</span>
+    <p>Imput Code Below:</p>
+    <textarea rows="15" cols="100" placeholder="Input Code Here" id=code></textarea>
+    <button id="spaceClear">Clear Spaces</button>
+    <button id="toURL">Copy Url To Clipboard</button><br>
+    <input type="text" id="timing" size="23" placeholder="Time between notes (ms)"></textarea>
+    <button id="submitButton">Play Code</button>
+  </div>
+</div>
+<div id="playModal" class="modal">
+  <div class="modal-content">
+    <p><font size="25">You Have Recived A Song!</font></p>
+    <button id="playCode">Play!</button>
+  </div>
+</div>
 <img src="./images/l2.png" class="hidden"/>
 <img src="./images/r2.png" class="hidden"/>
 <img src="./images/m2.png" class="hidden"/>
diff --git a/js/core.js b/js/core.js
index 137ed1f..6515747 100644
--- a/js/core.js
+++ b/js/core.js
@@ -203,3 +203,67 @@ $(document).on("keydown keyup", function (e) {
         $.play(instrument, key, e.type === "keydown");
     }
 });
+$(document).ready(function()  {
+  document.getElementById("playButton").addEventListener("click", function() {
+    document.getElementById("codeModal").style.display = "block";
+  });
+  document.getElementsByClassName("close")[0].addEventListener("click", function() {
+    document.getElementById("codeModal").style.display = "none";
+  });
+  document.getElementById("spaceClear").addEventListener("click", function() {
+    var code = document.getElementById("code").value;
+    var newCode = code.replace(/\s/g,'');
+    document.getElementById("code").value = newCode;
+  });
+  document.getElementById("toURL").addEventListener("click", function() {
+    var code = document.getElementById("code").value;
+    var timing = document.getElementById("timing").value;
+    var url = window.location.href+"?"+"p"+"&"+"c="+code+"&"+"t="+timing;
+    var el = document.createElement('textarea');
+    el.value = url;
+    el.setAttribute('readonly', '');
+    el.style = {position: 'absolute', left: '-9999px'};
+    document.body.appendChild(el);
+    el.select();
+    document.execCommand('copy');
+    document.body.removeChild(el);
+  });
+  document.getElementById("submitButton").addEventListener("click", function() {
+    document.getElementById("codeModal").style.display = "none";
+    var code = document.getElementById("code").value;
+    var timing = parseInt(document.getElementById("timing").value);
+    playCode(code, timing);
+  });
+});
+$(document).ready(function()  {
+  var url_string = window.location.href;
+  var url = new URLSearchParams(url_string);
+  var c = url.get("c");
+  var t = url.get("t");
+  if(c != null && t != null) {
+    document.getElementById("playModal").style.display = "block";
+    document.getElementById("playCode").addEventListener("click", function() {
+      document.getElementById("playModal").style.display = "none";
+      playCode(c, t);
+    });
+  }
+});
+function playCode(code, timing) {
+  var length = code.length;
+  var index = 0;
+  var timer = setInterval(function() {
+    index++;
+    var instrument = InstrumentPerKeyEnum[code.charAt(index-1).toUpperCase()];
+    var key = KeyEnum[code.charAt(index-1).toUpperCase()];
+    if(instrument != undefined && key != undefined) {
+      $.play(instrument, key, true);
+      setTimeout(function() {
+        $.play(instrument, key, false);
+      }, timing/2)
+    }
+    if(index >= length) {
+      clearInterval(timer);
+      index = 0;
+    }
+  }, timing );
+}
diff --git a/style/style.css b/style/style.css
index 0357637..bc8dd89 100644
--- a/style/style.css
+++ b/style/style.css
@@ -69,6 +69,41 @@ a {
     margin: 2px;
     display: inline-block;
 }
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0,0,0);
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.modal-content {
+  background-color:  #fefefe;
+  margin: auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+}
+.close {
+  color: #aaaaaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+.close:hover,
+.close:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}
+#code {
+  resize: none;
+}
 #bongo-left {
     top: 43%;
     left: 2%;