圣诞下雪主题的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,
        triangleRotationAngle = 0;
    
      //draw the visualiser while waiting for the song and the audio api nodes to be ready
      visualise();
    
      //make sure the audio stuff is supported
      if (!window.AudioContext) {
        if (window.webkitAudioContext) {
          window.AudioContext = window.webkitAudioContext;
        } else {
          throw new Error('audio context not supported :(');
        }
      }
    
      //create audio context
      var audioContext = new AudioContext();
    
      //create an analyser per channel and set their fft size to 8192 (basically setting the resolution of the visualiser, play with the value to see what changes)
      var analyserChannel0 = audioContext.createAnalyser();
      var analyserChannel1 = audioContext.createAnalyser();
      analyserChannel0.fftSize = analyserChannel1.fftSize = VISUALISER_RESOLUTION;
    
      //Create the processing node that will fetch the frequency values of the audio data collected at intervals of 1024 samples, since the audio context collects 44.1k samples a second the "onaudioprocess" callback will be called with a frequency of roughly 43Hz
      var processingNode = audioContext.createScriptProcessor(1024);
      processingNode.connect(audioContext.destination);
      processingNode.onaudioprocess = function(event) {
        array0 = new Uint8Array(analyserChannel0.frequencyBinCount);
        array1 = new Uint8Array(analyserChannel1.frequencyBinCount);
        analyserChannel0.getByteFrequencyData(array0);
        analyserChannel1.getByteFrequencyData(array1);
        visualise(array0, array1);
      };
    
      //splitter node to split the two stereo channels
      var splitter = audioContext.createChannelSplitter(2);
    
      //connect the two outputs of the splitter node to each one of the analysers
      splitter.connect(analyserChannel0, 0);
      splitter.connect(analyserChannel1, 1);
    
      //create the audio object containing the song
      var audio = new Audio();
      audio.crossOrigin = "anonymous";
      audio.src = URL;
      audio.volume = 0.5;
      audio.addEventListener("canplaythrough", function() {
    
        console.log('sound clip at ' + this.src + ' loaded successfully');
        var source = audioContext.createMediaElementSource(this);
        source.connect(audioContext.destination);
        source.connect(splitter);
        source.connect(processingNode);
        this.play();
    
      });
    
      //visualisation function
      function visualise(array0, array1) {
    
        //make sure the points array is empty
        points = [];
    
        //clear the canvas
        $.clearRect(0, 0, w, h);
    
        //fill backgrou.........完整代码请登录后点击上方下载按钮下载查看