Записка_к_курсачу
.pdfself.loadSound(e.dataset.link) })
})
self.javascriptNode.onaudioprocess = function() {
var array = new Uint8Array(self.analyser.frequencyBinCount); self.analyser.getByteFrequencyData(array); self.ctx.clearRect(0, 0, 1000, 400); self.ctx.fillStyle=self.gradient;
self.drawSpectrum(array);
}
}
BLoudPlayer.prototype.drawSpectrum = function(array) { for (var i = 0; i < array.length; i++) {
this.ctx.fillRect(i*5,400-array[i],3,400);
}
}
BLoudPlayer.prototype.setupGraphics = function() {
this.ctx = document.getElementById("spectrum").getContext("2d"); this.gradient = this.ctx.createLinearGradient(0,0,0,400); this.gradient.addColorStop(1,'#000000'); this.gradient.addColorStop(0.75,'#ff0000'); this.gradient.addColorStop(0.25,'#ffff00'); this.gradient.addColorStop(0,'#ffffff');
}
BLoudPlayer.prototype.setupAudioNodes = function() { var self = this;
self.javascriptNode = self.context.createScriptProcessor(2048, 1, 1); self.javascriptNode.connect(self.context.destination);
self.analyser = self.context.createAnalyser(); self.analyser.smoothingTimeConstant = 0.3; self.analyser.fftSize = 512;
self.sourceNode = self.context.createBufferSource(); self.sourceNode.connect(self.analyser); self.analyser.connect(self.javascriptNode);
self.sourceNode.connect(self.context.destination);
}
BLoudPlayer.prototype.loadSound = function(url) { var request = new XMLHttpRequest();
var self = this;
var context = self.context; request.open('GET', url, true); request.responseType = 'arraybuffer';
request.onload = function() { context.decodeAudioData(request.response,
function(buffer) {
if (self.state == "playing"){ self.sourceNode.stop(); self.sourceNode.buffer = null;
}
self.setupAudioNodes();
31
self.playSound(buffer);
},
function(e) { alert(e); }
);
}
request.send();
}
BLoudPlayer.prototype.playSound = function(buffer) { this.sourceNode.buffer = buffer; this.sourceNode.start(0);
this.state = "playing";
}
return BLoudPlayer; })()
$(document).ready(function(){
if (document.querySelector("#spectrum")){ new BLoudPlayer;
}
})
.navbar.navbar-inverse.navbar-static-top
.container
.navbar-header
%button.button.navbar-toggle{data: {toggle: 'collapse', target: '.navbar- ex1-collapse'}}
.span.sr-only Toggle navigation
.span.icon-bar
.span.icon-bar
.span.icon-bar %a.navbar-brand{href: '/'}
%strong bLoud
.collapse.navbar-collapse.navbar-ex1-collapse - if current_user
.ul.nav.navbar-nav
%li= link_to 'Songs', audio_index_path
.ul.nav.navbar-nav.navbar-right.user-nav
-if signed_in?
%li{ class: "dropdown" }
%a.dropdown-toggle{ data: {toggle: 'dropdown'}}
= current_user.email %b.caret
%ul.dropdown-menu
%li= link_to "logout", destroy_user_session_path, method: :delete
-else
%li= link_to "Sign in", new_user_session_path
%li= link_to "Sign up", new_user_registration_path, class: 'sign-up-
nav-link'
Upload new song
32
= simple_form_for @song, url: audio_index_path , method: :post, remote: true do |f|
=f.input :title
=f.input :performer
=f.input :track, as: :file
=f.submit class: 'btn btn-primary', data: { disable_with: "Please wait..." } -@songs.each do |song|
=song.title
%a.audiofile{data: {link: song.track.url}} play %br
%canvas#spectrum{width: 1000, height:400, style: "display: block;"};
%table.welcome-static %td.section
=link_to '#' do
= fa_icon 'music' %h3.strong bLoud-Piano
.delimiter
%td.section =link_to '#' do
= fa_icon 'play-circle' %h3.strong Player
.clearfix
.controls
%textarea#formulas
= fa_icon "check-square 2x", onclick: "javascript:piano.newSound()" %input.slider#volume
%h3
.small
Use your keyboard(z-m,[s,d,g,h,j],q-"]",[2,3,5-7,9,0]) to play different
notes
depending on mathematic formulas you've entered %canvas#graph
33