JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
(function(audio) {
// Private Variables
var analyser;
var masterGain;
var audioContext;
var oscillators;
var nrOfOscillators;
var waveType = "sine";
var multiple = 1;
var baseFrequency = 220;
// Public Methods
audio.getAnalyser = function() {
return analyser;
}
audio.init = function() {
audioContext = new AudioContext();
analyser = audioContext.createAnalyser();
analyser.fftSize = 1024;
masterGain = audioContext.createGain();
masterGain.connect(analyser);
masterGain.connect(audioContext.destination);
}
audio.setNumberOfOscillators = function(num) {
nrOfOscillators = num;
}
audio.startOscillators = function(nrOfOscillatorsParam) {
nrOfOscillators = nrOfOscillatorsParam || nrOfOscillators || 3;
oscillators = [];
for (var i = 0; i < nrOfOscillators; i++) {
var oscillator = audioContext.createOscillator();
oscillator.type = waveType;
oscillator.frequency.value = baseFrequency * multiple * (i + 1);
oscillator.start();
oscillators.push(oscillator);
var gain = audioContext.createGain();
gain.gain.value = 1 / nrOfOscillators;
oscillator.connect(gain);
gain.connect(masterGain);
}
}
audio.stop = function() {
for (var i = 0; i < oscillators.length; i++) {
oscillators[i].stop();
}
oscillators = [];
}
function updateFrequencies() {
for (var i = 0; i < oscillators.length; i++) {
oscillators[i].frequency.value = baseFrequency * multiple * (i + 1);
}
}
audio.setMultiple = function(multipleValue) {
multiple = multipleValue;
updateFrequencies();
}
audio.setBaseFrequency = function(baseFrequencyParam) {
baseFrequency = baseFrequencyParam;
updateFrequencies();
}
})(window.audio = window.audio || {});
(function(view, audio) {
// Private Variables
var isPlaying = false;
var canvas = document.getElementById("theCanvas");
var canvasContext = canvas.getContext("2d");
var dataArray;
var bufferLength;
var frequencySlider = document.getElementById("frequencySlider");
var frequencySpan = document.getElementById("frequency");
var multipleSlider = document.getElementById("multipleSlider");
var multipleSpan = document.getElementById("multiple");
var oscillatorsSpan = document.getElementById("oscillators");
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
var speakerIcon = document.getElementById("speaker");
var toggleLabel = document.getElementById("toggleLabel");
// Private Methods
function toggleSound() {
if (isPlaying) {
speakerIcon.classList.remove("fa-volume-off");
speakerIcon.classList.add("fa-volume-up");
audio.stop();
toggleLabel.innerHTML = "Start!";
isPlaying = false;
} else {
speakerIcon.classList.remove("fa-volume-up");
speakerIcon.classList.add("fa-volume-off");
audio.startOscillators();
toggleLabel.innerHTML = "Stop!"
isPlaying = true;
}
}
function draw() {
canvasContext.clearRect(0, 0, canvasWidth, canvasHeight);
requestAnimationFrame(draw);
audio.getAnalyser().getByteTimeDomainData(dataArray);
for (var i = 0; i < bufferLength; i++) {
canvasContext.beginPath();
canvasContext.moveTo(i, 255);
canvasContext.lineTo(i, 255 - dataArray[i]);
canvasContext.closePath();
canvasContext.stroke();
}
}
function setMultiple(mult) {
audio.setMultiple(parseFloat(mult));
multipleSpan.innerHTML = mult;
}
function initEvents() {
frequencySlider.addEventListener("change", function() {
audio.setBaseFrequency(this.value);
frequencySpan.innerHTML = this.value;
});
frequencySlider.addEventListener("mousemove", function() {
audio.setBaseFrequency(this.value);
frequencySpan.innerHTML = this.value;
});
multipleSlider.addEventListener("change", function() {
setMultiple(this.value);
});
multipleSlider.addEventListener("mousemove", function() {
setMultiple(this.value);
});
document.getElementById("oscillatorsSlider").addEventListener("change", function() {
audio.stop();
if (isPlaying) {
audio.startOscillators(parseInt(this.value));
} else {
audio.setNumberOfOscillators(parseInt(this.value));
}
oscillatorsSpan.innerHTML = this.value;
});
document.getElementById("toggleSound").addEventListener("click",
toggleSound, false);
}
function init() {
bufferLength = audio.getAnalyser().frequencyBinCount;
dataArray = new Uint8Array(bufferLength);
canvasContext.lineWidth = 1;
canvasContext.strokeStyle = 'rgba(0, 0, 0, 1)';
initEvents();
draw();
}
audio.init();
init();
})(window.view = window.view || {}, audio);