JSFiddle - React, Tailwind, and code Playground

by spectralkh

HTML

<html>
<body>
<div class = "container">
 <audio id="music" src="https://www.computerhope.com/jargon/m/example.mp3"type="audio/mpeg"></audio>
    <img id ="titleimg"src = "https://kasp.io/static/kh-logo.png">
        <h1>Please click one of the following!</h1>
    <div class = "navigation">
        1. Travel the trail<img id="wagon"src = "https://kasp.io/static/kh-logo.png"></br></br>
        2. Learn about the trail<img id="info"src = "https://kasp.io/static/kh-logo.png"></br></br>
        3. See the Oregon Top 10<img id="ten"src = "https://kasp.io/static/kh-logo.png"></li></br></br>
        4. Turn Sound (<span id="off">Off</span>/<span id="on">On</span>)
        <img id="sound"src="https://kasp.io/static/kh-logo.png"><img id="nosound"src = "https://kasp.io/static/kh-logo.png"></br></br>
    </div>
    <div class = "landscape">
        <img id ="grass"src = "https://kasp.io/static/kh-logo.png">
    </div>
</div>

</html>
</body>

JavaScript

var audio = document.getElementById('music');
if (localStorage.getItem("musicPlaying") === null) play()
else if (localStorage.getItem("musicPlaying") === "true") play()


function play() {
  localStorage.setItem("musicPlaying", "true")
  audio.play();
  document.getElementById("on").style.color = "red";
  document.getElementById("off").style.color = "black";
  document.getElementById("nosound").style.height = "0";
  document.getElementById("nosound").style.width = "0";
  document.getElementById("sound").style.height = "75";
  document.getElementById("sound").style.width = "75";
  document.getElementById('music').play();
}
function pause() {
  localStorage.setItem("musicPlaying", "false")
  audio.pause();
  document.getElementById("on").style.color = "black";
  document.getElementById("off").style.color = "red";
  document.getElementById("nosound").style.height = "75";
  document.getElementById("nosound").style.width = "75";
  document.getElementById("sound").style.height = "0";
  document.getElementById("sound").style.width = "0";
  document.getElementById('music').pause();
}
function playPause() {
  var musicPlaying = localStorage.getItem("xmusicPlaying")
  if (musicPlaying == "true") pause()
  else if (musicPlaying == "false") play()
} 
document.getElementById("on").style.color = "red";

document.body.onkeypress = function(pressFour){
  if(pressFour.keyCode == 52) playPause();
}