圣诞下雪主题的web audio音乐声音播放可视化动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：圣诞下雪主题的web audio音乐声音播放可视化动画效果代码

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

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

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

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Pacifico'>

    <style>
        @import url(https://fonts.googleapis.com/css?family=Pacifico);
    
    body, html{
    	position: relative;
    	margin: 0;
    }
    
    div{
      left: -999999px;
      position: absolute;
      z-index: 0;
    }
    
    #c{
      font-family: font-family: 'Pacifico', cursive;
      position: absolute;
      cursor: pointer;
      z-index: 9999;
    }
    </style>

</head>

<body>

    <div style="font-family: 'Pacifico', cursive;">div used to (hopefully) preload font so that it can be used from the first canvas draw to make the pen's preview look nice</div>
    <canvas id="c" style="font-family: 'Pacifico', cursive;"></canvas>
    <!-- partial -->
    <script>
        window.onload = function() {
    
      //christmas spirit switch
      var CHRISTMAS_SPIRIT = true;
    
      //song data variables
      var URL, TOP_TEXT, BOTTOM_TEXT;
    
      //song data
      if (CHRISTMAS_SPIRIT) {
    
        URL = "//repo.bfw.wiki/bfwrepo/sound/61b1c68d5cad6.mp3";
        TOP_TEXT = "Merry";
        BOTTOM_TEXT = "Christmas";
    
      } else {
    
        URL = "//repo.bfw.wiki/bfwrepo/sound/61b1c68d5cad6.mp3";
        TOP_TEXT = "Joey Pecoraro";
        BOTTOM_TEXT = "Tired Boy";
    
      }
    
      //Snowflake constructor
      function Snowflake(xBound, yBound) {
        this.x = Math.random() * xBound;
        this.y = Math.random() * yBound;
        this.xBound = xBound;
        this.yBound = yBound;
        this.radius = Math.random() * 5 + 2;
        this.v = this.radius / 5;
      }
    
      Snowflake.prototype.update = function() {
        this.y += this.v;
        if (this.y - this.radius >= this.yBound) {
          this.y = 0 - this.radius;
        }
      };
    
      Snowflake.prototype.render = function($) {
        this.update();
        $.beginPath();
        $.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        $.fill();
      };
    
      //create variables that will be used every time the onaudioprocess (see below) callback is fired to limit memory usage
      var i, value0, value1, angle, points, point0, point1, array0, array1, middlePointX, middlePointY, s, snowflakes;
    
      //set up canvas
      var c = document.getElementById('c');
      var $ = c.getContext('2d');
      var w = c.width = window.innerWidth;
      var h = c.height = window.innerHeight;
    
      //set up base context properties
      $.textAlign = "center";
      $.lineJoin = "round";
      $.strokeStyle = 'white';
      $.lineWidth = 5;
      $.font = "30px Pacifico";
    
      //constants to play with
      var MODE = "columns";
      var MAX_SNOWFLAKES = 100;
      var NUMBER_OF_POINTS = 150; // per channel (visualiser will have double this amount)
      var RADIUS = 200; // central circle radius
      var VISUALISER_RESOLUTION = 8192; // MUST BE A POWER OF 2!
      var FREQUENCY_MULTIPLIER = 0.7; // modifies the distance of each point of the visualiser from the central circumference
    
      //constants that should stay constant
      var SCREEN_CENTER = {
        X: w / 2,
        Y: h / 2
      };
      var THIRD_OF_CIRCUMFERENCE = (Math.PI * 2) / 3;
      var TEXT_INCLINATION = -Math.PI / 8;
      var CIRCUMFERENCE_STEPS = (2 * Math.PI) / (NUMBER_OF_POINTS * 2);
      var COLUMNS_WIDTH = (RADIUS * 2 * Math.PI) / (NUMBER_OF_POINTS * 2);
    
      //create the inner and outer gradients
      var OUTER_GRADIENT = $.createRadialGradient(SCREEN_CENTER.X, SCREEN_CENTER.Y, 0, SCREEN_CENTER.X, SCREEN_CENTER.Y, w / 2);
    
      OUTER_GRADIENT.addColorStop(0, 'rgb(255, 0, 127)');
      OUTER_GRADIENT.addColorStop(1, 'rgb(163, 0, 163)');
    
      var INNER_GRADIENT = $.createRadialGradient(SCREEN_CENTER.X, SCREEN_CENTER.Y, RADIUS, SCREEN_CENTER.X, SCREEN_CENTER.Y, 400);
    
      INNER_GRADIENT.addColorStop(1, 'rgb(127, 0, 63)');
      INNER_GRADIENT.addColorStop(0.05, 'rgb(191, 0, 191)');
    
      if (CHRISTMAS_SPIRIT) {
    
        snowflakes = [];
    
        //create the inner and outer gradients
        var OUTER_GRADIENT = $.createRadialGradient(SCREEN_CENTER.X, SCREEN_CENTER.Y, 0, SCREEN_CENTER.X, SCREEN_CENTER.Y, w / 2);
    
        OUTER_GRADIENT.addColorStop(0, 'rgb(255, 0, 0)');
        OUTER_GRADIENT.addColorStop(1, 'rgb(122, 22, 22)');
    
        var INNER_GRADIENT = $.createRadialGradient(SCREEN_CENTER.X, SCREEN_CENTER.Y, RADIUS, SCREEN_CENTER.X, SCREEN_CENTER.Y, 400);
    
        INNER_GRADIENT.addColorStop(1, 'rgb(3, 175, 20)');
        INNER_GRADIENT.addColorStop(0.05, 'rgb(11, 86, 18)');
    
        for (i = 0; i < MAX_SNOWFLAKES; i++) {
          s = new Snowflake(w, h);
          snowflakes.push(s);
        }
    
      }
    
      //variables used to control the rotation of the central triangle
      var triangleRotationStep = 0,
        triangleRota.........完整代码请登录后点击上方下载按钮下载查看