html5 пианино








HTML5 пианино(Edit)

Я хочу вам показать что сегодня сделать пианино онлайн самому - нет ничего сложного. Сайт с пианино сделать очень легко, для этого нам потребуется HTML5 и сэмплы.

Все пианино умещается в 5 килобайт и выглядит вот так:

Попробуйте поиграть на нем и оценить легкость и простоту разработки в HTML5 даже такой непростой вещщи как Пианино:

[http://onlinepianino.ru/pianoHTML5.html]

Ну а теперь как и обещал исходник, творение это не мое, но для изучения вполне себе подойдет на все 10 процентов:

<!DOCTYPE html>
<html>
<head>
<script>
var offset_x = 8;
var offset_y = 8;

var w_keys = 18;
var w_key_width = 50;
var w_key_height = 150;

var b_keys = 13;
var b_key_width = 30;
var b_key_height = 90;

var w_notes = 
[
	'f1', 'g1', 'a2', 'b2', 'c2', 'd2', 'e2', 'f2', 'g2',
	'a3', 'b3', 'c3', 'd3', 'e3', 'f3', 'g3', 'a4', 'b4',
];

var b_notes =
[
	'f1s', 'g1s', 'a1s', 'c2s', 'd2s',
	'f2s', 'g2s', 'a3s', 'c3s', 'd3s',
	'f3s', 'g3s', 'a4s',
];

var w_note_d = ['F', 'G', 'A', 'B', 'C', 'D', 'E'];

var b_note_d = ['F#', 'G#', 'A#', 'C#', 'D#'];

function draw_kb()
{
	var canvas = document.getElementById('kb');
	
	canvas.width = w_keys * w_key_width;
	canvas.height = w_key_height;
	
	if(!canvas.getContext)
	{
		return;
	}

	var ctx = canvas.getContext('2d');

	for(var i = 0, j = 6, k = 0; i < w_keys; i++, j++)
	{
		ctx.strokeRect(i * w_key_width, 0, w_key_width, w_key_height);
		
		ctx.fillStyle = '#f00';
		ctx.fillText(w_note_d[i % w_note_d.length], i * w_key_width + 20, w_key_height - 20);
		ctx.fillStyle = '#000';
		
		if(j != 3 && j != 6)
		{
			ctx.fillRect(i * w_key_width - b_key_width / 2, 0, b_key_width, b_key_height);
			ctx.fillStyle = '#f00';
			ctx.fillText(b_note_d[k++ % b_note_d.length], i * w_key_width - 5, b_key_height - 20);
			ctx.fillStyle = '#000';
		}
		if(j > 6)
		{
			j = 0;
		}
	}
	
}

function resolve_key(x, y)
{
	var key, sx, sy = 0;
	
	for(var i = 0, j = 6, k = 0; i < w_keys; i++, j++)
	{
		if(j != 3 && j != 6)
		{
			sx = i * w_key_width - b_key_width / 2;
			if
			(
				(x >= sx && x <= (sx + b_key_width + offset_x))
				&&
				(y >= sy && y <= (sy + b_key_height + offset_y))
			)
			{
				return new Array(0, k);
			}
			k++;
		}
		if(j > 6)
		{
			j = 0;
		}
	}
	
	for(var i = 0, j = 6, k = 0; i < w_keys; i++, j++)
	{
		sx = i * w_key_width;
		if
		(
			(x >= sx && x <= (sx + w_key_width + offset_x))
			&&
			(y >= sy && y <= (sy + w_key_height + offset_y))
		)
		{
			return new Array(1, i);
		}
	}
	
	return new Array(0, 0); 
}

function play(event)
{
	var x = event.pageX;
	var y = event.pageY;
	
	var key_info = resolve_key(x, y);
	var note = key_info[0] ? w_notes[key_info[1]] : b_notes[key_info[1]];
	var note_e = document.getElementById(note);
	
	if(!note_e)
	{
		return;
	}
	
	if(!note_e.ended)
	{
		note_e.load();
	}
	//note_e.pause();
	//note_e.currentTime = 0;
	note_e.play();
}

function spawn_notes()
{
	var div = document.getElementById('notes');
	if(!div)
	{
		return;
	}
	
	div.innerHTML = '';
	
	for(var i = 0; i < w_keys; i++)
	{
		div.innerHTML += '<audio src="sound/' + w_notes[i] + '.ogg" autobuffer id="' + w_notes[i] + '"></audio>';
	}
	
	for(var i = 0; i < b_keys; i++)
	{
		div.innerHTML += '<audio src="sound/' + b_notes[i] + '.ogg" autobuffer id="' + b_notes[i] + '"></audio>';
	}
}

</script>
</head>
<body onLoad="spawn_notes();draw_kb();">
<canvas id="kb" onClick="play(event);"></canvas>
<div id="notes" style="display:none;"></div>
</body>
</html>

Всего наилечшего в ваших начинаниях и заходите поиграть к нам на пианино онлайн








Пианино онлайн