Js 音频律动

白衣少年
2023-06-13 / 0 评论 / 104 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2023年06月13日,已超过373天没有更新,若内容或图片失效,请留言反馈。

这段时间在独立写音乐项目,在学习过程中接触到了JS的音频律动,于是找到了以下项目

js音频律动.png

以上是效果图

下面分享代码:

HTML结构

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="index.css">
  </head>
  <body style="background-color: #000;">
      <div class="music-box">
          <canvas class="my-canvas"></canvas>
          <button class="my-music-btn rotate"></button>
      </div>
      <script src="index.js"></script>
  </body>
</html>

CSS样式

* {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: url(./test.jpg) center;
  background-size: cover;
  backdrop-filter: blur(50px) grayscale(50%);
}

.music-box {
  position: relative;
  width: 400px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.my-canvas {
  position: absolute;
  top: 0;
}

.my-music-btn {
  position: relative;
  width: 250px;
  height: 250px;
  background: url(./test.jpg);
  background-size: cover;
  border-radius: 50%;
  border: none;
  outline: none;
  animation: music-btn-anim 20s infinite linear;
}

.my-music-btn.rotate {
  animation-play-state: paused;
}

@keyframes music-btn-anim {
  from {
      transform: rotate(0deg);
  }

  to {
      transform: rotate(360deg);
  }
}

JS

使用时仅需将图片和音频放于项目根目录并重命名为test.jpgtest.mp3即可

3

打赏

评论 (0)

OwO
取消