برنامه پیانو ساده در jQuery - jsRapPiano برای سایت

نویسنده :

jsRapPiano یک افزونه jQuery برای ایجاد یک برنامه پیانوی قابل تنظیم و قابل استفاده با استفاده از HTML ساده / CSS / JavaScript است. شما کاربران می توانید پیانو را با استفاده از

jsRapPiano یک افزونه jQuery برای ایجاد یک برنامه پیانوی قابل تنظیم و قابل استفاده با استفاده از HTML ساده / CSS / JavaScript است. شما کاربران می توانید پیانو را با استفاده از کلیک ماوس و لمس رویدادهای ضربه بزنید.
پرونده های JavaScript و CSS افزونه jQuery jsRapPiano را در سند وارد کنید.
 

index.css

body{background-color:grey;}
#divMain{
margin:auto;		
width:80%;
}
#divGitHub{
top:0px;
right:0px;
width:200px;
height:200px;
overflow:hidden;
position:absolute;
z-index:100;
pointer-events:none;
}
#GitHub{
background-color:#800;	
border:solid 2px black;	
color:white;
cursor:pointer;
font:bold 14px Arial,Helvetica,sans-serif;
height:20px;
padding-top:3px;
position:absolute;
right:60px;
text-align: center;
transform:translate(50%,-50%) rotate(45deg);
text-shadow: 0 0 8px black;
top:60px;
width:240px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
pointer-events:auto;
}
#GitHub:after{
content:'Star me on GitHub';
}
#GitHub:hover{
background-color:#f00;
}
#demo1{
margin:8px auto;
}

jsRapPiano.css

.rapPiano{
margin:0px auto;
white-space:nowrap;
}
.divKey {
display:inline-block;
height:100%;
position:relative;
margin:0 2px;
cursor:-webkit-grab;
cursor:grab;
}
.major {
background-color:white;
border:1px solid #000;
box-shadow:inset 0px 0px 4px #000;
display: block;
height:100%;
position:relative;
border-radius:8px;
}
.divKey .major:active{
box-shadow:inset 0px 0px 8px #000;
height:98%;
}
.minor{
box-shadow: inset 0 -1px 2px rgba(255, 255, 255, 0.5), 0 2px 3px rgba(0, 0, 0, 0.5);
background-color:black;
border-width:1px 3px 8px;
border-style:solid;
border-color:#666 #222 #111 #555;
height:50%;
width:70%;
position:absolute;
right:-39%;
top:0px;
width:60%;
z-index:1;
}
.divKey .minor:active{
border-bottom-width:3px;
top:0px;
}

jsRapPiano.js

$(window).resize(function () {
	$('.rapPiano').each(function () {
		this.Render();
	});
});

(function ($) {
	$.fn.jsRapPiano = function (options) {

		return this.each(function () {
			this.opt = $.extend({
				octave: 3,
				octaves: 2,
				waveType: 'square',
				envelope: {
					attack: 0.05,
					decay: 0.1,
					sustain: 0.1,
					release: 0.5,
					level: 0.5
				},
				onClick: null
			}, options);
			let base = this;
			let AudioContext = window.AudioContext || window.webkitAudioContext;
			this.audioContext = new AudioContext();
			this.oscillator = this.audioContext.createOscillator();
			this.gainMain = this.audioContext.createGain();
			this.gainMain.gain.value = 1;
			this.gainMain.connect(this.audioContext.destination);
			this.oscillator.start(0);
			this.oscillator.type = this.opt.waveType;
			this.oscillator.frequency.value = 50;

			this.Render = function () {
				$(this).empty();
				let w = $(this).width();
				w = w / (this.opt.octaves * 7);
				$(this).addClass('rapPiano').height(w * 5);
				let i = 12 * (this.opt.octave + 1);
				for (let o = 0; o < this.opt.octaves; o++)
					for (let x = 0; x < 7; x++) {
						let k = $('
').addClass('divKey').css({ width: w }).appendTo(this);
						$('
').addClass('major').prop('index', i++).appendTo(k);
						if ((x % 7 == 2) || (x % 7 == 6)) continue;
						$('
').addClass('minor').prop('index', i++).appendTo(k);
					}
				$('.major,.minor', this).bind({
					mousedown: function (e) {
						let i = $(this).prop('index');
						let f = 440 * Math.pow(2, (i - 69) / 12);
						base.PlaySound(f);
						if (base.opt.onClick)
							base.opt.onClick.call(base);
					}
				});
			}

			this.PlaySound = function (frequency) {
				this.audioContext.resume();
				let t = this.audioContext.currentTime;
				gainNode = this.audioContext.createGain();
				gainNode.connect(this.gainMain);
				this.oscillator.connect(gainNode);
				gainNode.gain.setValueAtTime(0, t);
				this.oscillator.frequency.value = frequency;
				t += this.opt.envelope.attack;
				gainNode.gain.linearRampToValueAtTime(1, t);
				t += this.opt.envelope.decay;
				gainNode.gain.linearRampToValueAtTime(this.opt.envelope.level, t);
				t += this.opt.envelope.sustain;
				gainNode.gain.linearRampToValueAtTime(this.opt.envelope.level, t);
				t += this.opt.envelope.release;
				gainNode.gain.linearRampToValueAtTime(0, t);
			}

			this.Render();

		})

	}
})(jQuery);