js+css实现一个三维圆柱可调参数音乐声音音频可视化动画效果代码

代码语言:html

所属分类:多媒体

代码描述:js+css实现一个三维圆柱可调参数音乐声音音频可视化动画效果代码,选择本地声音文件,就可以看到圆柱跳动动画效果,还可调节圆柱的参数实现不同的效果。

代码标签: js cs 三维 圆柱 音乐 声音 音频 可视化

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        /* Default all same color */
    * {
      box-sizing: border-box;
    }
    
    html, body {
      height: 100%;
    }
    
    body {
      background: #1e1e1e;
      font-family: "Helvatica", sans-serif;
      color: #FFF;
      position: relative;
      perspective: 1000px;
      perspective-origin: 50% 50%;
    }
    
    .hide {
      display: none;
    }
    
    .faded {
      opacity: 0;
    }
    
    .prism {
      position: absolute;
      transform-style: preserve-3d;
      will-change: transform;
    }
    
    .side {
      width: 100%;
      height: 100%;
      border-top: 3px solid #4DA16F;
      border-bottom: 3px solid #4DA16F;
      border-color: currentColor;
      position: absolute;
    }
    
    .rectangle {
      border: 3px solid #4DA16F;
      border-color: currentColor;
      transition: opacity 150ms;
    }
    
    .solid .rectangle {
      background: currentColor;
    }
    
    
    @keyframes rotate {
        from { transform: rotateY(0); }
        to { transform: rotateY(-360deg); }
    }
    
    .musicControls, label {
      position: absolute;
      border-radius: 5px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      padding: 10px;
    }
    
    .musicControls {
      top: 20px;
      left: 20px;
    }
    
    label {
      left: 20px;
      top: 100px;
      font-style: italic;
    }
    
    body.loaded #loading {
      display: none;
    }
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="musicControls">
        <input id="audiofile" type="file" />
        <button class="playPauseButton">▶</button>
    </div>
    <label id="loading" for="audiofile">选择本地音乐文件</label>
    <!-- This should match the values in the js-->
    <div class="prism">
        <div class="side hide">
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
        </div>
        <div class="side hide">
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
        </div>
        <div class="side hide">
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
        </div>
        <div class="side hide">
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
        </div>
        <div class="side hide">
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
        </div>
        <div class="side hide">
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
        </div>
        <div class="side hide">
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
        </div>
        <div class="side hide">
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
        </div>
        <div class="side hide">
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
        </div>
        <div class="side hide">
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
        </div>
        <div class="side hide">
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
        </div>
        <div class="side hide">
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
        </div>
        <div class="side hide">
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
        </div>
        <div class="side hide">
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
        </div>
        <div class="side hide">
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
        </div>
        <div class="side hide">
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div class="rectangle hide"></div>
            <div .........完整代码请登录后点击上方下载按钮下载查看

网友评论0