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