JSFiddle - React, Tailwind, and code Playground

by zakizakibzr

HTML

<div id="a">
    <p>hello user! to play sound hold "B"</br>
    the <code>"keyCode == 66" </code>mean the <code>key"B"</code><br ></br>
    <strong id="b">NOTE:</strong>you must select this box befor
</div>
<audio id="audio" controls style="display: none;" preload="auto">
            <source src="http://butlerccwebdev.net/support/html5-video/media/soundfile.mp3">
        </audio>

CSS

#a {
  padding-left: 0.5em;
  background-color: lightgrey;
  border-left: 4px solid rgb(255, 000, 155);
}


#b {
  color: rgb(255, 000, 155);
}

code {
  color: blue;
  background: linear-gradient(to right, #fff, #ffe4c4);
}

JavaScript

var clickSound = document.getElementById("audio")


function play(e) {
  if (e.keyCode == 66) {
    clickSound.play();
  }
}



function pause(e) {
  if (e.keyCode == 66) {
    clickSound.pause();
  }
}


  document.onkeydown = play;
  document.onkeyup = pause;