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;
}

//
})();

  

转载于:https://www.cnblogs.com/yiyi17/p/9635017.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: pdf.js是一款功能强大的JavaScript库,可用于在网页上展示PDF文档。pdf.js允许开发者在所有现代浏览器上直接嵌入PDF文件,而无需使用第三方插件。这样一来,用户可以在不离开网页的情况下浏览和阅读PDF文档。 pdf.js附带了一个demo,可以帮助开发者了解和体验pdf.js的功能。demo提供了各种不同的示例,展示了不同的PDF文档在网页上的显示效果。开发者可以使用demo中的代码作为起点,进一步定制和集成pdf.js到自己的网页应用中。 demo中的示例包括基本的PDF展示、缩放、翻页和搜索功能。用户可以通过demo来体验在不同浏览器和设备上加载和浏览PDF文档的效果。此外,demo还提供了一些高级功能,比如延迟渲染、打印、导出和书签功能,以及在网页上查看多个PDF文件的选项。 使用pdf.js demo,开发者可以快速入门并了解pdf.js的核心功能。通过查看demo中的代码和文档,开发者可以学习如何使用pdf.js库创建自定义的PDF浏览器。pdf.js demo为开发者提供了一个学习和实践的平台,帮助他们更好地理解和应用pdf.js库。 总而言之,pdf.js demo是一个方便的工具,提供了一个交互式的环境来学习和测试pdf.js的功能。无论是初学者还是有经验的开发者,都可以通过pdf.js demo来提升对pdf.js的理解和应用能力。 ### 回答2: pdf.js demo 是一个开源的基于 JavaScript 的 PDF 阅读器库,它使用 HTML5 技术来在网页上显示和加载 PDF 文档。使用 pdf.js demo,你可以在不需要安装第三方插件的情况下,在网页上直接查看和浏览 PDF 文件。 pdf.js demo 提供了一个简单易用的 API,能够方便地在网页上加载和显示 PDF 文件。它支持多种功能,如缩放、旋转、滚动和搜索等等。你可以使用这些功能来快速定位和查找 PDF 文档中的内容,方便用户进行阅读和导航。 pdf.js demo 的优势之一是它的兼容性很好。它不需要任何浏览器插件的支持,只需要使用现代浏览器即可完美运行。这使得你在不同平台和设备上都可以无障碍地查看和访问 PDF 文档。 pdf.js demo 也具有高度的可定制性。你可以根据自己的需求来定制页面的展示效果和交互方式。如果你是一位开发者,你还可以直接访问源代码来进行更深入的定制和扩展。 总之,pdf.js demo 是一个强大而且方便的 PDF 阅读器库,它能够帮助你在网页上实现高效的 PDF 查看和阅读功能。无论你是需要在网站上显示 PDF 文档,还是需要开发自己的 PDF 阅读器应用程序,pdf.js demo 都是一个很好的选择。 ### 回答3: pdf.js demo是一个用于显示和渲染PDF文件的开源JavaScript库。它可以通过在网页上嵌入PDF文件,让用户直接在浏览器中查看和浏览PDF文档,而无需安装任何PDF阅读器插件。 使用pdf.js demo可以实现许多功能,比如展示PDF页面、搜索文本、放大和缩小页面、旋转页面等。用户可以通过点击页面、拖动页面滚动条来浏览整个文档。pdf.js demo还提供了一些实用的工具栏,例如缩放按钮、旋转按钮、搜索框、前进和后退按钮等,让用户可以更方便地浏览文档。 pdf.js demo的一个重要优点是它与现代浏览器兼容性良好,并且可以在不同平台上运行,例如Windows、Mac和Linux。此外,pdf.js demo支持多种语言,可以根据用户的地区设置自动切换显示语言。 使用pdf.js demo还能够加强文档的安全性。通过在服务器端嵌入水印、禁止复制和打印等措施,可以防止文档被非法下载和修改。 总而言之,pdf.js demo是一个非常实用的工具,可以实现在浏览器中查看、浏览和管理PDF文档的功能。它的易用性、兼容性和安全性使其成为很多网站和应用程序的首选解决方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值