html5按键声音,HTML5+Tone.js 声音合成按钮
JavaScript
语言：
JaveScriptBabelCoffeeScript
确定
/* Tone.js */
/* Effects */
var tremolo = new Tone.Tremolo({
"frequency": 30,
"type": "triangle",
"depth": 1.0,
"spread": 300
}).toMaster().start();
var pitchShift = new Tone.PitchShift({
"pitch": 0,
"windowSize": 0.1,
"delayTime": 0,
"feedback": 0
}).toMaster();
var autoFilter = new Tone.AutoFilter({
"frequency": 5,
"type": "triangle",
"depth": 1,
"baseFrequency": 200,
"octaves": 2.6,
"filter": {
"type": "lowpass",
"rolloff": -12,
"Q": 1
}
}).toMaster().start();
var dist = new Tone.Distortion(0.8).toMaster();
/* Instruments */
var bassSynth = new Tone.MonoSynth({
"volume": -12,
"portamento": 0.08,
"oscillator": {
"partials": [2, 1, 3, 2, 0.4]
},
"filter": {
"Q": 4,
"type": "lowpass",
"rolloff": -48
},
"envelope": {
"attack": 0.04,
"decay": 0.06,
"sustain": 0.4,
"release": 1
},
"filterEnvelope": {
"attack": 0.01,
"decay": 0.1,
"sustain": 0.6,
"release": 1.5,
"baseFrequency": 50,
"octaves": 3.4
}
}).toMaster();
var bellSynth = new Tone.Synth({
"volume": -24,
"oscillator": {
"partials": [
3,
0,
3,
0,
3
]
},
"envelope": {
"attack": 0.001,
"decay": 1.2,
"sustain": 0,
"release": 1.2
}
}).connect(tremolo);
var flashSynth = new Tone.MetalSynth({
"frequency": 90,
"envelope": {
"attack": 0.3,
"decay": 0.2,
"release": 0.3,
},
"harmonicity": 3.1,
"modulationIndex": 5,
"resonance": 7000,
"octaves": 1.5
}).toMaster();
var clickSynth = new Tone.NoiseSynth({
"volume": -12,
"noise": {
"type": "pink",
"playbackRate": 5
},
"filter": {
"type": "highpass",
"rolloff": -24,
"Q": 3
},
"envelope": {
"attack": 0.001,
"decay": 0.1,
"sustain": 0,
"release": 0.3
},
"filterEnvelope": {
"baseFrequency": 1000,
"octaves": 2,
"attack": 0.002,
"decay": 0.001,
"sustain": 0,
"release": 0.001
}
}).toMaster();
var refreshSynth = new Tone.Synth({
"volume": -6,
"portamento": 0.0,
"oscillator": {
"type": "square4"
},
"envelope": {
"attack": 0.5,
"decay": 0.1,
"sustain": 0.1,
"release": 0.5
}
}).connect(autoFilter);
var beepSynth = new Tone.MonoSynth({
"volume": 10,
"oscillator": {
"type": "sine"
},
"filter": {
"Q": 2,
"type": "bandpass",
"rolloff": -24
},
"envelope": {
"attack": 0.25,
"decay": 0.05,
"sustain": 0.05,
"release": 0.25
},
"filterEnvelope": {
"attack": 0.02,
"decay": 0.4,
"sustain": 1,
"release": 0.7,
"releaseCurve": "linear",
"baseFrequency": 20,
"octaves": 5
}
}).toMaster();
var buzzSynth = new Tone.MonoSynth({
"volume": -32,
"oscillator": {
"type": "sawtooth"
},
"filter": {
"Q": 2,
"type": "lowpass",
"rolloff": -12
},
"envelope": {
"attack": 0.3,
"decay": 0.05,
"sustain": 0.05,
"release": 0.25
}
}).connect(dist);
(function($, window, document, undefined) {
"use strict";
var APP = {
init: function() {
var fontSize;
this.cogRotateAmount = 360,
this.refreshRotateAmount = 360;
this.fontsize();
this.setUpListeners();
},
// Sets up all button listeners and a resizing listener
setUpListeners: function() {
$('#arrows-button').on('click', function() {
APP.growShrink('#arrows');
bassSynth.triggerAttackRelease("C2", "1");
bassSynth.frequency.rampTo(3000, 1.0); // Up one octave
});
$('#cog-button').on('click', function() {
APP.spin('#cog');
APP.setIntervalX(function() {
clickSynth.triggerAttackRelease("0.1");
}, 100, 5);
});
$('#camera-button').on('click', function() {
APP.flash('#camera');
flashSynth.triggerAttackRelease("0.5");
});
$('#bell-button').on('click', function() {
APP.shake('#bell', 10, 4, 50);
bellSynth.triggerAttackRelease("E6", "1");
});
$("#lock-button").on('click', function() {
if ($(this).attr('data-click-state') == 1) {
$(this).attr('data-click-state', 0)
APP.frontFlip();
} else {
$(this).attr('data-click-state', 1)
APP.backFlip();
}
// To match up with animation better
setTimeout(function() {
clickSynth.triggerAttackRelease("0.1")
}, 500);
});
$('#battery-button').on('click', function() {
APP.blink('#battery');
APP.setIntervalX(function() {
beepSynth.triggerAttackRelease("D4", "0.5");
}, 500, 3);
});
$('#refresh-button').on('click', function() {
this.refreshRotateAmount = APP.spin('#refresh', this.refreshRotateAmount);
refreshSynth.triggerAttackRelease("E3", "0.5");
});
$('#ban-button').on('click', function() {
APP.growShrink('#ban');
buzzSynth.triggerAttackRelease("D2", "0.5");
});
$(window).resize(fontsize);
},
// Calculates the appropriate font size for the font awesome icons
fontsize: function() {
this.fontSize = $(".button").width() * 0.50; // 50% of container width
$(".button").css('font-size', this.fontSize);
},
// Repeats a call back at a given interval a given number of times
setIntervalX: function(callback, delay, repetitions) {
var x = 0;
var intervalID = window.setInterval(function() {
callback();
if (++x === repetitions) {
window.clearInterval(intervalID);
}
}, delay);
},
// Grow and shrink animation for passed item
growShrink: function(item) {
self = this;
$(item).animate({
fontSize: this.fontSize * 1.2
}, 500, function() {
$(item).animate({
fontSize: self.fontSize * 1
}, 500);
});
},
// Blink animation for passed item
blink: function(item) {
this.setIntervalX(function() {
$(item).animate({
opacity: 0
}, 200, function() {
$(item).animate({
opacity: 1
}, 200);
});
}, 400, 3);
},
// Flash animation for passed item
flash: function(item) {
var startColor = $(item).css('color');
$(item).animate({
color: "#ffffff"
}, 200, function() {
$(item).animate({
color: startColor
}, 200);
});
},
// Spin animation for passed item
spin: function(item) {
if (item == '#cog') {
var amount = this.cogRotateAmount;
this.cogRotateAmount += 360;
} else if (item == '#refresh') {
var amount = this.refreshRotateAmount;
this.refreshRotateAmount += 360;
} else {
console.error("This element should not be rotating")
}
$(item).css({
'transform': 'translate(-50%, -50%) rotate(' + amount + 'deg) ',
'-ms-transform': 'translate(-50%, -50%) rotate(' + amount + 'deg) ',
'-moz-transform': 'translate(-50%, -50%) rotate(' + amount + 'deg) ',
'-o-transform': 'translate(-50%, -50%) rotate(' + amount + 'deg) '
});
},
// Shake animation for passed item, distance as a percentage of container width
shake: function(item, distance, times, rate) {
this.setIntervalX(function() {
$(item).css('transform', 'translate(-' + (50 - (distance = -distance)) + '%, -50%)')
}, rate, times);
setTimeout(function() {
$(item).css('transform', 'translate(-50%, -50%)');
}, rate * times + 100); // Extra transition time amount
},
// Flip animation specific to the lock icon(s)
// Positive value of perspective necessary to work in firefox
frontFlip: function() {
$("#lock-front")
.css('transform', 'translate(-50%, -50%) perspective(1000px) rotateY(0deg) rotateX(0deg)')
$("#lock-back")
.css('transform', 'translate(-50%, -50%) perspective(1000px) rotateY(180deg) rotateX(0deg)')
},
backFlip: function() {
$("#lock-back")
.css('transform', 'translate(-50%, -50%) perspective(1000px) rotateY(0) rotateX(0deg)')
$("#lock-front")
.css('transform', 'translate(-50%, -50%) perspective(1000px) rotateY(-180deg) rotateX(0deg)')
}
};
APP.init();
})(jQuery, window, document);