siriWave.js的demo

 

demo.html

<style>body { background: #000; }</style>
<script src="../siriwave.js"></script>
<div id="container" style="width: 900px; height: 300px; background: #000"></div>
<script>

	var SW = new SiriWave({

  　　　　　　　　 style: 'ios9',

       　　　　　　 speed: 0.1,

        　　　　　　amplitude: 0.2,

        　　　　　　speedInterpolationSpeed: 0,

        　　　　　　frequency: 2,

       　　　　　　 height: 424,

       　　　　　　width: 964,

        　　　　　　container: document.getElementById('container'),

        　　　　　　autostart: true

	});

	var ctx = new (window.AudioContext || window.webkitAudioContext)();
	var analyser = ctx.createAnalyser();
	analyser.connect(ctx.destination);
	analyser.fftSize = 2048;

	var bufferLength = analyser.frequencyBinCount;
	function getAverageVolume(data) {
		var values = 0;
		var length = data.length;
		for (var i = 0; i < data.length; i++) {
			values += data[i];
		}
		return values / data.length;
	}

	window.navigator.getUserMedia(
		{ audio: true },
		function(stream) {
			var input = ctx.createMediaStreamSource(stream);
			console.log()
			input.connect(analyser);

			var processor = ctx.createScriptProcessor(2048, 1, 1);
			processor.connect(ctx.destination);
			
			processor.onaudioprocess = function() {
				var array =  new Uint8Array(analyser.frequencyBinCount);
				analyser.getByteFrequencyData(array);
				var average = getAverageVolume(array);
				SW.setAmplitude(average / 140);
			};
		},
		function(){
			console.log(1)
		}
	);


	

</script>

　　siriwave.js

(function() {
//

// Siri Wave iOS9 Style curve

function SiriWave9Curve(opt) {
	this.controller = opt.controller;
	this.definition = opt.definition;
	this.tick = 0;

	this._respawn();
}

SiriWave9Curve.prototype._respawn = function() {
	this.amplitude = 0.3 + Math.random() * 0.7;
	this.seed = Math.random();
	this.openClass = 2 + (Math.random()*3)|0;
};

SiriWave9Curve.prototype._ypos = function(i) {
	var p = this.tick;
	var y = -1 * Math.abs(Math.sin(p)) * this.controller.amplitude * this.amplitude * this.controller.cache.heightMax * Math.pow(1 / (1 + Math.pow(this.openClass * i, 2)), 2);

	if (Math.abs(y) < 0.001) {
		this._respawn();
	}

	return y;
};

SiriWave9Curve.prototype._draw = function(sign) {
	var ctx = this.controller.ctx;

	this.tick += this.controller.speed * (1 - 0.5 * Math.sin(this.seed * Math.PI));

	ctx.beginPath();

	var xBase = this.controller.cache.width2 + (-this.controller.cache.width4 + this.seed * (this.controller.cache.width2));
	var yBase = this.controller.cache.height2;

	var x, y;
	var xInit = null;

	for (var i = -3; i <= 3; i += 0.01) {
		x = xBase + i * this.controller.cache.width4;
		y = yBase + ((sign || 1) * this._ypos(i));

		xInit = xInit || x;

		ctx.lineTo(x, y);
	}

	var height = Math.abs(this._ypos(0));

	var gradient = ctx.createRadialGradient(xBase, yBase, height * 1.15, xBase, yBase, height * 0.3);
	gradient.addColorStop(0, 'rgba(' + this.definition.color + ', 0.4)');
	gradient.addColorStop(1, 'rgba(' + this.definition.color + ', 0.2)');
	ctx.fillStyle = gradient;

	ctx.lineTo(xInit, yBase);
	ctx.closePath();

	ctx.fill();
};

SiriWave9Curve.prototype.draw = function() {
	this._draw(-1);
	this._draw(1);
};

SiriWave9Curve.prototype.definition = [
{ color: '32,133,252' },
{
	color: '94,252,169'
},

{
	color: '253,71,103'
},
{
	color: '255,252,0'
},
{ color: '253,0,255' }
];

// Standard Curve

function SiriWaveCurve(opt) {
	this.controller = opt.controller;
	this.definition = opt.definition;
}

SiriWaveCurve.prototype._globAttenuationEquation = function(x) {
	if (SiriWaveCurve.prototype._globAttenuationEquation.cache[x] == null) {
		SiriWaveCurve.prototype._globAttenuationEquation.cache[x] = Math.pow(4 / (4 + Math.pow(x, 4)), 4);
	}
	return SiriWaveCurve.prototype._globAttenuationEquation.cache[x];
};
SiriWaveCurve.prototype._globAttenuationEquation.cache = {};

SiriWaveCurve.prototype._xpos = function(i) {
	return this.controller.cache.width2 + i * this.controller.cache.width4;
};

SiriWaveCurve.prototype._ypos = function(i) {
	var att = (this.controller.cache.heightMax * this.controller.amplitude) / this.definition.attenuation;
	return this.controller.cache.height2 + this._globAttenuationEquation(i) * att * Math.sin(this.controller.frequency * i - this.controller.phase);
};

SiriWaveCurve.prototype.draw = function() {
	var ctx = this.controller.ctx;

	ctx.moveTo(0,0);
	ctx.beginPath();
	ctx.strokeStyle = 'rgba(' + this.controller.color + ',' + this.definition.opacity + ')';
	ctx.lineWidth = this.definition.lineWidth;

	for (var i = -2; i <= 2; i += 0.01) {
		var y = this._ypos(i);

		if (Math.abs(i) >= 1.90) y = this.controller.cache.height2;

		ctx.lineTo(this._xpos(i), y);
	}

	ctx.stroke();
};

SiriWaveCurve.prototype.definition = [
{ attenuation: -2, lineWidth: 1, opacity: 0.1 },
{ attenuation: -6, lineWidth: 1, opacity: 0.2 },
{ attenuation: 4, lineWidth: 1, opacity: 0.4 },
{ attenuation: 2, lineWidth: 1, opacity: 0.6 },
{ attenuation: 1, lineWidth: 1.5, opacity: 1 },
];

// Expose API

function SiriWave(opt) {
	opt = opt || {};

	this.phase = 0;
	this.run = false;
	this.cache = {};

	if (opt.container == null) {
		console.warn("SiriWaveJS: no container defined, using body");
		opt.container = document.body;
	}

	this.style = opt.style || 'ios';

	this.container = opt.container;

	this.width = opt.width || window.getComputedStyle(this.container).width.replace('px', '');
	this.height = opt.height || window.getComputedStyle(this.container).height.replace('px', '');
	this.ratio = opt.ratio || window.devicePixelRatio || 1;

	this.cache.width = this.ratio * this.width;
	this.cache.height = this.ratio * this.height;
	this.cache.height2 = this.cache.height / 2;
	this.cache.width2 = this.cache.width / 2;
	this.cache.width4 = this.cache.width / 4;
	this.cache.heightMax = (this.cache.height2) - 4;

	// Constructor opt

	this.amplitude = (opt.amplitude == undefined) ? 1 : opt.amplitude;
	this.speed = (opt.speed == undefined) ? 0.2 : opt.speed;
	this.frequency = (opt.frequency == undefined) ? 6 : opt.frequency;
	this.color = this._hex2rgb(opt.color || '#fff');

	// Interpolation

	this.speedInterpolationSpeed = opt.speedInterpolationSpeed || 0.005;
	this.amplitudeInterpolationSpeed = opt.amplitudeInterpolationSpeed || 0.05;

	this.cache.interpolation = {
		speed: this.speed,
		amplitude: this.amplitude
	};

	// Canvas

	this.canvas = document.createElement('canvas');
	this.ctx = this.canvas.getContext('2d');
	this.canvas.width = this.cache.width;
	this.canvas.height = this.cache.height;

	if (opt.cover) {
		this.canvas.style.width = this.canvas.style.height = '100%';
	} else {
		this.canvas.style.width = (this.cache.width / this.ratio) + 'px';
		this.canvas.style.height = (this.cache.height / this.ratio) + 'px';
	}

	this.curves = [];

	var i = 0, j = 0;
	if (this.style === 'ios9') {
		for (; i < SiriWave9Curve.prototype.definition.length; i++) {
			for (j = 0; j < (3 * Math.random()) | 0; j++) {
				this.curves.push(new SiriWave9Curve({
					controller: this,
					definition: SiriWave9Curve.prototype.definition[i]
				}));
			}
		}
	} else {
		for (; i < SiriWaveCurve.prototype.definition.length; i++) {
			this.curves.push(new SiriWaveCurve({
				controller: this,
				definition: SiriWaveCurve.prototype.definition[i]
			}));
		}
	}

	// Start
	this.container.appendChild(this.canvas);
	if (opt.autostart) {
		this.start();
	}
}

SiriWave.prototype._hex2rgb = function(hex){
	var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
	hex = hex.replace(shorthandRegex, function(m,r,g,b) { return r + r + g + g + b + b; });
	var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
	return result ?
	parseInt(result[1],16).toString()+','+parseInt(result[2], 16).toString()+','+parseInt(result[3], 16).toString()
	: null;
};

SiriWave.prototype._interpolate = function(propertyStr) {
	increment = this[ propertyStr + 'InterpolationSpeed' ];

	if (Math.abs(this.cache.interpolation[propertyStr] - this[propertyStr]) <= increment) {
		this[propertyStr] = this.cache.interpolation[propertyStr];
	} else {
		if (this.cache.interpolation[propertyStr] > this[propertyStr]) {
			this[propertyStr] += increment;
		} else {
			this[propertyStr] -= increment;
		}
	}
};

SiriWave.prototype._clear = function() {
	this.ctx.globalCompositeOperation = 'destination-out';
	this.ctx.fillRect(0, 0, this.cache.width, this.cache.height);
	this.ctx.globalCompositeOperation = 'source-over';
};

SiriWave.prototype._draw = function() {
	for (var i = 0, len = this.curves.length; i < len; i++) {
		this.curves[i].draw();
	}
};

SiriWave.prototype._startDrawCycle = function() {
	if (this.run === false) return;
	this._clear();

	// Interpolate values
	this._interpolate('amplitude');
	this._interpolate('speed');

	this._draw();
	this.phase = (this.phase + Math.PI * this.speed) % (2 * Math.PI);

	if (window.requestAnimationFrame) {
		window.requestAnimationFrame(this._startDrawCycle.bind(this));
	} else {
		setTimeout(this._startDrawCycle.bind(this), 20);
	}
};

/* API */

SiriWave.prototype.start = function() {
	this.phase = 0;
	this.run = true;
	this._startDrawCycle();
};

SiriWave.prototype.stop = function() {
	this.phase = 0;
	this.run = false;
};

SiriWave.prototype.setSpeed = function(v, increment) {
	this.cache.interpolation.speed = v;
};

SiriWave.prototype.setAmplitude = function(v) {
	this.cache.interpolation.amplitude = Math.max(Math.min(v, 1), 0);
};

if (typeof define === 'function' && define.amd) {
	define(function(){ return SiriWave; });
} else {
	window.SiriWave = SiriWave;
}

//
})();