HTML5 Canvas Audio 乐队表演动画

Tribute to white stripes （致敬白色条纹乐队）三角形卡通肖像、敲鼓、跳舞、弹吉他等动画。音乐需要能访问soundcloud的在线服务： http://api.soundcloud.com

canvas，audio

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2047
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function getMousePosition(e) {
    handleMouseMove(e.pageX, e.pageY);
}

function getTouchPosition(e) {
    handleMouseMove(e.targetTouches[0].e, targetTouches[0].pageY);
}

function handleMouseMove(x, y) {
    currentMouseX = x - 500;
    //cameraSpeed = 20 + (y/500)*380;
}

function Element() {
    this.available = true;
}

Element.prototype.setDistance = function(d) {
    this.distance = d;
};

Element.prototype.update = function(distance) {
    this.distance -= distance;
    if (this.distance < 0) {
        this.available = true;
        return;
    }
    this.perc = this.distance / triangleInitDistance;
    this.scale = (endScale - initScale) * (1 - this.perc) + initScale;
};

function Triangle() {}

Triangle.prototype = Object.create(Element.prototype);

Triangle.prototype.setColor = function(c) {
    this.color = c;
};
Triangle.prototype.draw = function() {
    ctx.save();
    ctx.translate(this.xOffset, -hLine * this.perc);
    ctx.scale(this.scale * 1.25, this.scale * 1.25);
    if (doThunder) {
        var col = Math.floor(Math.random() * 255);
        ctx.fillStyle = 'rgb(' + col + ',' + col + ',' + col + ')';

} else {
        ctx.fillStyle = this.color;
    }
    ctx.beginPath();
    ctx.moveTo(-cvWidth / 4, 0);
    ctx.lineTo(0, -cvHeight);
    ctx.lineTo(cvWidth / 4, 0);
    ctx.fill();
    ctx.closePath();
    ctx.scale(1, -1);
    ctx.globalAlpha = .3;
    ctx.beginPath();
    ctx.moveTo(-cvWidth / 4, 0);
    ctx.lineTo(0, -cvHeight);
    ctx.lineTo(cvWidth / 4, 0);
    ctx.fill();
    ctx.closePath();
    ctx.globalAlpha = 1;

ctx.restore();
};

function Animation() {}

Animation.prototype = Object.create(Element.prototype);

Animation.prototype.setData = function(anim) {
    this.anim = anim;
};

Animation.prototype.draw = function() {
    ctx.save();

ctx.translate(this.xOffset, -hLine * this.perc);
    ctx.scale(this.scale, this.scale);
    ctx.translate(-this.anim.animationData.animation.compWidth / 2, -this.anim.animationData.animation.compHeight);

this.anim.goToAndStop(Date.now() - this.initTime);
    /* --- REFLECTION --
    ctx.translate(this.anim.animationData.animation.compWidth/2,this.anim.animationData.animation.compHeight);
    ctx.scale(1,-1);
    ctx.translate(-this.anim.animationData.animation.compWidth/2,-this.anim.animationData.animation.compHeight);

ctx.globalAlpha = .4;
    this.anim.goToAndStop(Date.now()-this.initTime);
     ctx.globalAlpha = 1;
    // -- END REFLECTION */

ctx.restore();
};

function clearUnavailableTriangles() {

}

function getColor() {
    var col = colors[currentColor];
    currentColor += 1;
    if (currentColor == colors.length) {
        currentColor = 0;
    }
    return col;
}

function getAnim() {
    var anim = animItems[currentAnim];
    currentAnim += 1;
    if (currentAnim == animItems.length) {
        currentAnim = 0;
    }
    return anim;
}

function thunder() {
    doThunder = true;
}

function dethunder() {
    doThunder = false;
}

function setup() {
    prepareAnimations();
    addNewElement();
    lastTime = Date.now();
}
var cnt = 0;

var cvScale, trX, trY;

//////

var AudioContext = window.AudioContext ||
    window.webkitAudioContext;
var audioContext;
var audio;
var bufferLength;
var bufferDrawLength;
var fftSize = 128;
var volumeFactor = 1;

function initSound() {
    audioContext = new AudioContext();
    audio = document.getElementById("theSong");
    audio.crossOrigin = "anonymous";
    audio.addEventListener("error", onerror, false);
    volumeFactor = audio.volume;
    audio.onvolumechange = function() {
        audio.volume = 1;
        volumeFactor = audio.volume;
    };

var source = audioContext.createMediaElementSource(audio);
    source.connect(audioContext.destination);
    analyser = audioContext.createAnalyser();
    source.connect(analyser);

analyser.fftSize = fftSize;
    //analyser.smoothingTimeConstant = 0.9;
    bufferLength = analyser.frequencyBinCount;
    // The end of the array that analyser.getByteFrequencyData()
    // returns seems quiet. So we ignoring the last 30%.
    bufferDrawLength = bufferLength;
    dataArray = new Uint8Array(bufferLength);
}

function get(url, callback) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (request.readyState === 4 && request.status === 200) {
            callback(request.responseText);
        }
    };

request.open("GET", url, true);
    request.send(null);
}

function findTrack() {
    //var clientParameter = "client_id=3d3bd998f63a0c1f1428a7e62c5a560f";
    var clientParameter = "client_id=9bbe436354cae5b86a9788edcf3513f8";

编译

CSS

HTML

Tribute to white stripes （致敬白色条纹乐队）三角形卡通肖像、敲鼓、跳舞、弹吉他等动画。音乐需要能访问soundcloud的在线服务： http://api.soundcloud.com

canvas，audio

编辑器支持Emmet

快捷键

Tribute to white stripes （致敬白色条纹乐队） 三角形卡通肖像、敲鼓、跳舞、弹吉他等动画。 音乐需要能访问soundcloud的在线服务： http://api.soundcloud.com

canvas，audio

基于Canvas的现代感音乐可视化效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Tribute to white stripes （致敬白色条纹乐队）三角形卡通肖像、敲鼓、跳舞、弹吉他等动画。音乐需要能访问soundcloud的在线服务： http://api.soundcloud.com