webgl+canvas浏览器中自动生成音乐可视化效果代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：webgl+canvas浏览器中自动生成音乐可视化效果代码，使用webkitAudioContext来弹奏生成播放音乐。

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

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

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


  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
:root {
  --clr-fg: #fff7;
  --clr-active-fg: #fff9;
}

html,
body {
  margin: 0;
  padding: 0;
}

canvas {
  position: fixed;
  z-index: -2;
  width: 100%;
  height: auto;
  inset: 0;
  user-select: none;
}

.control {
  display: grid;
  place-content: center;
  position: absolute;
  width: 200px;
  height: 200px;
  inset: 0;
  margin: auto;
}

.control_label {
  opacity: 0;
  display: grid;
  place-content: center;
  transition: opacity 1200ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

.control.initial .control_label {
  opacity: 1;
}

.control:hover .control_label {
  opacity: 1;
}

.control_display,
.control_input {
  grid-row: 1/-1;
  grid-column: 1/-1;
  position: relative;
  cursor: pointer;
}

.control_display {
  display: grid;
  place-content: center;
  font-size: 0.825em;
  font-weight: 500;
}

.control_display svg {
  --duration: 50ms;
  display: inline-block;
  stroke-linejoin: round;
  stroke-width: 2px;
  fill: var(--clr-fg);
  transition: var(--duration);
  transform: scale(1.1);
}

.control_display svg .speaker-vol {
  stroke-linecap: round;
}

.control_display svg .speaker-on {
  fill: none;
  stroke: none;
  opacity: 0;
  transition: opacity var(--duration);
}

.control_label:has([type="checkbox"]:checked) svg {
  fill: var(--clr-active-fg);
}

.control_label:has([type="checkbox"]:checked) svg .speaker-on {
  opacity: 1;
  fill: var(--clr-active-fg);
}

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  position: relative;
  margin: 0;
  width: 6em;
  height: 6em;
  transform: scale(1);
  font: inherit;
  color: currentColor;
  border-width: 0.15rem;
  border-style: solid;
  border-radius: 50%;
  border-color: var(--clr-fg);
  display: grid;
  place-content: center;
  background: #11111199;
  box-shadow: 0px 0px 12px 0 #a5a5a5;
}

input[type="checkbox"]:hover {
  transform: scale(1.1);
  transition: 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

input[type="checkbox"]:is(:checked, :active),
input[type="checkbox"]:is(:checked, :active) + .control_display svg {
  transform: scale(1);
}

input[type="checkbox"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 2px 5px 2px #fff9, 0 2px 10px 10px #fff7, 0 2px 20px 20px #fff5;
  opacity: 0;
  transform: scale(0.95);
  transition: 400ms;
}

input[type="checkbox"]:hover::after {
  transform: scale(1.05);
  opacity: 1;
}
</style>

  
  
  
</head>

<body translate="no">
  <canvas id="canvas"></canvas>
<div class="control initial">
  <label class="control_label">
    <input type="checkbox" class="control_input" name="vol" id="play">
    <div class="control_display">
      <svg viewBox="0 0 60 60" width="60" height="60">
        <path class="speaker-cone" d="
            M5 25
            Q10 25
            30 5
            L30 55
            Q10 35
            5 35
            Z 
            "></path>
        <path class="speaker-vol" d="
            M35 25
            A 5 5 0 0 1 35 35
            "></path>
        <path class="speaker-vol speaker-on" d="
            M35 15
            A 5 5 0 0 1 35 45
            "></path>
      </svg>
    </div>
  </label>
</div>
  
      <script >
const choose = a => a[Math.floor(Math.random() * a.length)];
const speeds = [.3, .45];
const resont = [.25, .5];
const volmns = [.8, .9, 1];
const options = {
  volume: choose(volmns),
  resonance: choose(resont),
  speed: choose(speeds),
  rand: 1 };


let nextSpeed = options.speed;
let nextVolume = .2;

const Composer = () => {
  /******************************
   * Original Author: Yota Morimoto
   * Web Site: https://yota.tehis.net/asg/
   */

  let context, main, verb, bus, compressor;

  const trigger = Object.freeze({
    trig: function () {
      let prev = 0;
      let t = false;
      return function (val) {
        t = prev < 0 && val >= 0;
        prev = val;
        return t;
      };
    },
    change: function () {
      let prev = 0;
      let t = false;
      return function (val) {
        t = prev != val;
        prev = val;
        return t;
      };
    },
    pulse: function (threshold) {
      let prev = 0;
      let t = false;
      return function (b) {
        if (b) prev++;
        if (prev == threshold) {
          t = true;
          prev = 0;
        } else {t = false;}
        return t;
      };
    } });


  const roots = [21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31];
  const melodicminor = [0, 2, 3, 5, 7, 9, 11];
  const locrian = [0, 1, 3, 5, 6, 8, 10];
  const phrygian = [0, 1, 3, 5, 7, 8, 10];
  const aeolian = [0, 2, 3, 5, 7, 8, 10];
  const dorian = [0, 2, 3, 5, 7, 9, 10];
  const ionian = [0, 2, 4, 5, 7, 9, 11];
  const mixolydian = [0, 2, 4, 5, 7.........完整代码请登录后点击上方下载按钮下载查看