js+css实现麦克风声音输入blob可视化动画效果代码-html代码-BFW代码库

js+css实现麦克风声音输入blob可视化动画效果代码

代码语言：html

所属分类：多媒体

代码描述：js+css实现麦克风声音输入blob可视化动画效果代码，点击播放按钮，然后说话试试

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
@property --s1 {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@property --s2 {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@property --s3 {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@property --rotation {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

@property --depth {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.3;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100dvh;
    width: 100dvw;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    align-items: center;
    background: #E4E4E4;
}

@keyframes s1 {
    to {
        --s1: 360deg;
    }
}

@keyframes s2 {
    to {
        --s2: 360deg;
    }
}

@keyframes s3 {
    to {
        --s3: 360deg;
    }
}

@keyframes rotation {
    to {
        --rotation: 360deg;
    }
}

@keyframes rotateouter {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Blob Animation */
.blob {
    aspect-ratio: 1;
    width: min(220px, 50vw);
    background-color: black;
    --rotation: 0deg;
    overflow: hidden;
    animation:
        s1 3s linear infinite,
        s2 5s linear infinite,
        s3 7s linear infinite,
        rotation 21s linear infinite;
}

.blob-shape {
    /* Animated blob shape using CSS @property */
    --angle0: 0.00deg;
    --p1-0: 0.0deg;
    --p2-0: 0.0deg;
    --p3-0: 0.0deg;
    --angle1: 51.43deg;
    --p1-1: 137.5deg;
    --p2-1: 222.5deg;
    --p3-1: 360.1deg;
    --angle2: 102.86deg;
    --p1-2: 275.0deg;
    --p2-2: 85.0deg;
    --p3-2: 80.2deg;
    --angle3: 154.29deg;
    --p1-3: 52.5deg;
    --p2-3: 307.5deg;
    --p3-3: 200.3deg;
    --angle4: 205.71deg;
    --p1-4: 190.0deg;
    --p2-4: 170.0deg;
    --p3-4: 320.4deg;
    --angle5: 257.14deg;
    --p1-5: 327.5deg;
    --p2-5: 32.5deg;
    --p3-5: 80.5deg;
    --angle6: 308.57deg;
    --p1-6: 105.0deg;
    --p2-6: 255.0deg;
    --p3-6: 200.6deg;
    
    /* Calculate control points for blob shape */
    --rand0: calc(0.5 + 0.5 * (0.5 * sin(var(--s1) + var(--p1-0)) + 0.3 * sin(var(--s2) + var(--p2-0)) + 0.2 * sin(var(--s3) + var(--p3-0))));
    --d0: calc(50 * (1 - var(--depth)) + 50 * var(--rand0) * var(--depth));
    --x0: calc((50 + var(--d0) * cos(var(--rotation) + var(--angle0))) * 1%);
    --y0: calc((50 + var(--d0) * sin(var(--rotation) + var(--angle0))) * 1%);
    
    --rand1: calc(0.5 + 0.5 * (0.5 * sin(var(--s1) + var(--p1-1)) + 0.3 * sin(var(--s2) + var(--p2-1)) + 0.2 * sin(var(--s3) + var(--p3-1))));
    --d1: calc(50 * (1 - var(--depth)) + 50 * var(--rand1) * var(--depth));
    --x1: calc((50 + var(--d1) * cos(var(--rotation) + var(--angle1))) * 1%);
    --y1: calc((50 + var(--d1) * sin(var(--rotation) + var(--angle1))) * 1%);
    
    --rand2: calc(0.5 + 0.5 * (0.5 * sin(var(--s1) + var(--p1-2)) + 0.3 * sin(var(--s2) + var(--p2-2)) + 0.2 * sin(var(--s3) + var(--p3-2))));
    --d2: calc(50 * (1 - var(--depth)) + 50 * var(--rand2) * var(--depth));
    --x2: calc((50 + var(--d2) * cos(var(--rotation) + var(--angle2))) * 1%);
    --y2: calc((50 + var(--d2) * sin(var(--rotation) .........完整代码请登录后点击上方下载按钮下载查看