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

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

代码语言：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 = docume.........完整代码请登录后点击上方下载按钮下载查看