js音乐系统

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{
    
    padding: 0px;margin: 0px;list-style: none;font-family: sans-serif;}
    html{
    
    
      font-size: 12px;
    }
    .keys
    {
    
    
      display: flex;
      min-height: 100vh;
      /*测轴center。主轴center.*/
      align-items: center;
      justify-content: center;
      flex: 1;
      /*太大了就会缩小,太小了就会放大,反正只有一个目的,合理的运用每一寸空间.*/
     }
    .key
    {
    
    
      border: 0.4rem solid black;
      border-radius: .5rem;
      font-size: 1.5rem;
      padding: 1rem .5rem;
      transition: all .07s ease;
      text-align: center;
      color: white;
      width: 10rem;
      background: rgba(0,0,0,0.4);
      text-shadow: 0 0 .5rem black;
    }
    .playing
  {
    
    
    transform: scale(1.1);
    border-color: #ffc600;
    box-shadow: 0 0 1rem #FFC600;
  }
  kbd
  {
    
    
    display: block;
    font-size: 4rem;
  }
  .sound
  {
    
    
    font-size: 1.2rem;
    letter-spacing: .1rem;
    color: #ffc600;
    text-transform: uppercase;
  }
	</style>
</head>
<body>
	<div class="keys">
		<div data-key="65" class="key">
			<kbd>A</kbd>
			<span class="sound">clap</span>
		</div>
		<div data-key="83" class="key">
      <kbd>S</kbd>
      <span class="sound">hihat</span>
    </div>
    <div data-key="68" class="key">
      <kbd>D</kbd>
      <span class="sound">kick</span>
    </div>
    <div data-key="70" class="key">
      <kbd>F</kbd>
      <span class="sound">openhat</span>
    </div>
    <div data-key="71" class="key">
      <kbd>G</kbd>
      <span class="sound">boom</span>
    </div>
    <div data-key="72" class="key">
      <kbd>H</kbd>
      <span class="sound">ride</span>
    </div>
    <div data-key="74" class="key">
      <kbd>J</kbd>
      <span class="sound">snare</span>
    </div>
    <div data-key="75" class="key">
      <kbd>K</kbd>
      <span class="sound">tom</span>
    </div>
    <div data-key="76" class="key">
      <kbd>L</kbd>
      <span class="sound">tink</span>
    </div>
	</div>
	<audio data-key="65" src="sounds/clap.wav"></audio>
   <audio data-key="83" src="sounds/hihat.wav"></audio>
  <audio data-key="68" src="sounds/kick.wav"></audio>
  <audio data-key="70" src="sounds/openhat.wav"></audio>
  <audio data-key="71" src="sounds/boom.wav"></audio>
  <audio data-key="72" src="sounds/ride.wav"></audio>
  <audio data-key="74" src="sounds/snare.wav"></audio>
  <audio data-key="75" src="sounds/tom.wav"></audio>
  <audio data-key="76" src="sounds/tink.wav"></audio>
  <script type="text/javascript">
      //当按下键盘上的相对应的一个键的时候,就触发相对应的声音。
      window.addEventListener("keydown",playSound);
      function playSound(e)
      {
    
    
         const audio=document.querySelector(`audio[data-key="${
      
      e.keyCode}"]`);
         const key=document.querySelector(`div[data-key="${
      
      e.keyCode}"]`);
         //以上两句是${e.keycode}这里面的ascll码是否能在audio与div中找得到.
          if(!audio)return;
          //以上是找不到就结束。
          //否则添加到相对应的div的class列表中.
          key.classList.add("playing");
          //然后是播放的时候从0开始.
          audio.currentTime=0;
          audio.play();
          }
          //这里面有一个问题,就是声音播放完了就显示结束的状态,怎么恢复到原样?
          const keys=Array.from(document.querySelectorAll(".key"));
          //获取到key类.这个类是伸缩项的.
          keys.forEach(key=>key.addEventListener('transitionend',removeTransition));
          function removeTransition(e)
          {
    
    
           //这里有一个问题,就是伸缩项里面如果没有playing中的transform的话,就代表还没有按下。就结束.
           //就是代表按下的不是设置的这些键。
           if(e.propertyName!=="transform")return;
            //当动画结束的时候就移除掉显示效果的样式.
            e.target.classList.remove("playing");
          }
  </script>
</body>
</html>
猜你喜欢
