Javascript Web音频构造函数和jQuery
我正试图找到一种方法，为我一直在从事的网络音频项目提供更干净、高效的代码。我现在掌握的代码是：Javascript Web音频构造函数和jQuery,javascript,jquery,html,constructor,web-audio-api,Javascript,Jquery,Html,Constructor,Web Audio Api,我正试图找到一种方法，为我一直在从事的网络音频项目提供更干净、高效的代码。我现在掌握的代码是： //OSCILLATOR INFO// // Oscillator Pitch is in Hz. // Oscillator Detune is in Cents & can be positive or negative values. // 1 Octave = double/half the note frequency in Hz. (A3 = 220Hz; A4 = 440Hz;
//OSCILLATOR INFO//
// Oscillator Pitch is in Hz.
// Oscillator Detune is in Cents & can be positive or negative values.
// 1 Octave = double/half the note frequency in Hz. (A3 = 220Hz; A4 = 440Hz; A5 = 880Hz)
// 1 Octave = 1200 Cents. 100 Cents per Semitone. (A3 - A4 = 1200 Cents; A4 - A5 = 1200 Cents)
// 12 Semitones per Octave.
// (A-440Hz detuned by 100 cents = A#; detuned by -100 cents = Ab)
//JQUERY SET UP//
//WEB AUDIO SET UP//
//used start web audio
var ctx = new webkitAudioContext();
speakers = ctx.destination;
var osc1 = ctx.createOscillator();
var osc2 = ctx.createOscillator();
var osc3 = ctx.createOscillator();
$(document).ready(function () {
//WAVEFORM OBJECTS - used to set the value of "cur_wave_osc" under Waveform sliders.//
var wF = {
0: "Sine",
1: "Square",
2: "Sawtooth",
3: "Triangle"
};
//PLAY_PAUSE BUTTONS - used to play & pause the oscillators.//
//OSC1 PLAY_PAUSE//
$('#play_pause_osc1').click(function () {
if ($(this).val() == "Play Osc1") {
$(this).val("Pause");
oscillator1Start();
} else {
$(this).val("Play Osc1");
osc1.disconnect();
}
});
//OSC2 PLAY_PAUSE//
$('#play_pause_osc2').click(function () {
if ($(this).val() == "Play Osc2") {
$(this).val("Pause");
oscillator2Start();
} else {
$(this).val("Play Osc2");
osc2.disconnect();
}
});
//OSC3 PLAY_PAUSE//
$('#play_pause_osc3').click(function () {
if ($(this).val() == "Play Osc3") {
$(this).val("Pause");
oscillator3Start();
} else {
$(this).val("Play Osc3");
osc3.disconnect();
}
});
//GAIN SLIDERS - used for controlling osc volume.//
//OSC1_GAIN//
$(function () {
$("#osc1_vol").slider({
min: 0,
max: 1,
value: 0.5,
step: 0.01,
slide: function (event, ui) {
$("#cur_vol_osc1").val(ui.value);
gainNode1.gain.value = $("#cur_vol_osc1").val();
}
});
$("#cur_vol_osc1").val($("#osc1_vol").slider("value"));
});
//OSC2_GAIN//
$(function () {
$("#osc2_vol").slider({
min: 0,
max: 1,
value: 0.5,
step: 0.01,
slide: function (event, ui) {
$("#cur_vol_osc2").val(ui.value);
gainNode2.gain.value = $("#cur_vol_osc2").val();
}
});
$("#cur_vol_osc2").val($("#osc2_vol").slider("value"));
});
//OSC3_GAIN//
$(function () {
$("#osc3_vol").slider({
min: 0,
max: 1,
value: 0.5,
step: 0.01,
slide: function (event, ui) {
$("#cur_vol_osc3").val(ui.value);
gainNode3.gain.value = $("#cur_vol_osc3").val();
}
});
$("#cur_vol_osc3").val($("#osc3_vol").slider("value"));
});
//PITCH SLIDERS - used for controlling osc pitch.//
//OSC1_PITCH//
$(function () {
$("#osc1_pitch").slider({
min: 0,
max: 25000,
value: 440,
step: 1,
slide: function (event, ui) {
$("#cur_pitch_osc1").val(ui.value);
osc1.frequency.value = $("#cur_pitch_osc1").val();
}
});
$("#cur_pitch_osc1").val($("#osc1_pitch").slider("value"));
});
//OSC2_PITCH//
$(function () {
$("#osc2_pitch").slider({
min: 0,
max: 25000,
value: 440,
step: 1,
slide: function (event, ui) {
$("#cur_pitch_osc2").val(ui.value);
osc2.frequency.value = $("#cur_pitch_osc2").val();
}
});
$("#cur_pitch_osc2").val($("#osc2_pitch").slider("value"));
});
//OSC3_PITCH//
$(function () {
$("#osc3_pitch").slider({
min: 0,
max: 25000,
value: 440,
step: 1,
slide: function (event, ui) {
$("#cur_pitch_osc3").val(ui.value);
osc3.frequency.value = $("#cur_pitch_osc3").val();
}
});
$("#cur_pitch_osc3").val($("#osc3_pitch").slider("value"));
});
//DETUNE SLIDER - used for controlling osc detune.//
//OSC1_DETUNE//
$(function () {
$("#osc1_detune").slider({
min: -4800,
max: 4800,
value: 0,
step: 1,
slide: function (event, ui) {
$("#cur_detune_osc1").val(ui.value);
osc1.detune.value = $("#cur_detune_osc1").val();
}
});
$("#cur_detune_osc1").val($("#osc1_detune").slider("value"));
});
//OSC2_DETUNE//
$(function () {
$("#osc2_detune").slider({
min: -4800,
max: 4800,
value: 0,
step: 1,
slide: function (event, ui) {
$("#cur_detune_osc2").val(ui.value);
osc2.detune.value = $("#cur_detune_osc2").val();
}
});
$("#cur_detune_osc2").val($("#osc2_detune").slider("value"));
});
//OSC3_DETUNE//
$(function () {
$("#osc3_detune").slider({
min: -4800,
max: 4800,
value: 0,
step: 1,
slide: function (event, ui) {
$("#cur_detune_osc3").val(ui.value);
osc3.detune.value = $("#cur_detune_osc3").val();
}
});
$("#cur_detune_osc3").val($("#osc3_detune").slider("value"));
});
//WAVEFORM SLIDERS - used for selecting osc waveform.//
//OSC1_WAVEFORM//
$(function () {
$("#osc1_wave").slider({
min: 0,
max: 3,
value: 0,
step: 1,
slide: function (event, ui) {
$("#cur_wave_osc1").val(wF[ui.value]);
}
});
$("#cur_wave_osc1").val("Sine");
osc1.type = $("#osc1_wave").slider("value");
});
//OSC2_WAVEFORM//
$(function () {
$("#osc2_wave").slider({
min: 0,
max: 3,
value: 0,
step: 1,
slide: function (event, ui) {
$("#cur_wave_osc2").val(wF[ui.value]);
}
});
$("#cur_wave_osc2").val("Sine");
osc2.type = $("#osc2_wave").slider("value");
});
//OSC3_WAVEFORM//
$(function () {
$("#osc3_wave").slider({
min: 0,
max: 3,
value: 0,
step: 1,
slide: function (event, ui) {
$("#cur_wave_osc3").val(wF[ui.value]);
}
});
$("#cur_wave_osc3").val("Sine");
osc3.type = $("#osc3_wave").slider("value");
});
});
//CREATE OSCILLATORS//
//OSC1//
function oscillator1Start() {
//creates the osc
osc1 = ctx.createOscillator();
//sets waveform
osc1.type = $("#osc1_wave").slider("value"); //0 = sine, 1 = square, 2 = saw, 3 = triangle, 4 = custom
//sets frequency
osc1.frequency.value;
//sets detune
osc1.detune.value;
//creates a gain node
gainNode1 = ctx.createGainNode();
//connects osc to gain node
osc1.connect(gainNode1);
//connects gain node to speakers
gainNode1.connect(speakers);
//sets gain value
gainNode1.gain.value;
//plays the osc
osc1.start(0);
}
//OSC2//
function oscillator2Start() {
//creates the osc
osc2 = ctx.createOscillator();
//sets waveform
osc2.type; //0 = sine, 1 = square, 2 = saw, 3 = triangle, 4 = custom
//sets frequency
osc2.frequency.value;
//sets detune
osc2.detune.value;
//creates a gain node
gainNode2 = ctx.createGainNode();
//connects osc to gain node
osc2.connect(gainNode2);
//connects gain node to speakers
gainNode2.connect(speakers);
//sets gain value
gainNode2.gain.value;
//plays the osc
osc2.start(0);
}
//OSC3//
function oscillator3Start() {
//creates the osc
osc3 = ctx.createOscillator();
//sets waveform
osc3.type; //0 = sine, 1 = square, 2 = saw, 3 = triangle, 4 = custom
//sets frequency
osc3.frequency.value;
//sets detune
osc3.detune.value;
//creates a gain node
gainNode3 = ctx.createGainNode();
//connects osc to gain node
osc3.connect(gainNode3);
//connects gain node to speakers
gainNode3.connect(speakers);
//sets gain value
gainNode3.gain.value;
//plays the osc
osc3.start(0);
}
var ctx = new webkitAudioContext();
//object constructor
function Osc(type,freq,detune,gain)
{
this.create = new ctx.createOscillator();
this.type = type; //0 = sine, 1 = square, 2 = saw, 3 = triangle, 4 = custom
this.freq = freq;
this.detune = detune;
this.gain = gain;
this.changeType = changeType;
function changeType(type)
{
this.type = type;
};
this.changeFreq = changeFreq;
function changeFreq(freq)
{
this.freq = freq;
};
}
看看这是否能帮助你开始。我所做的只是演示如何附加DOM元素，这些元素可以从构造函数创建的对象触发振荡器。我还只添加了一个振荡器参数（频率/基音），因为我认为您可以为您想要的任何振荡器参数（类型、滤波器等）复制模式。下面代码的一点是，内部DOM附加本身可以使用抽象。 因此，要真正做到这一点，您可能必须创建一组小型抽象，它们在一个构造函数下协同工作。至少我是这么看的 编辑 *我在这里创建了一个带有JQuery UI俯仰滑块的版本，并编辑了下面的代码以包括以下内容：* HTML
<div id="app"> </div>
$(function(){
context = new webkitAudioContext();
function Osc(name,buttonName){
/******* Dom Element creation & appending stuff********/
this.buttonName = buttonName;
if(typeof(this.button)==='undefined') {
this.button = document.createElement('div');
};
this.button.className = buttonName;
this.button.id = name +"_" +buttonName;
var app = document.getElementById("app");
$( "#app" ).append(this.button );
if(typeof(this.pitchSlider)==='undefined') {
this.pitchSlider = document.createElement('div');
};
this.pitchSlider.className = "pitchSlider";
this.pitchSlider.id = name +"_" +"pitchSlider";
console.log(this.pitchSlider.id);
var pitchSlider = document.getElementById(this.pitchSlider.id);
$("#"+this.button.id).append(this.pitchSlider);
/**** Oscillator creation and trigger stuff *****/
var freqValueStorage = 100;
this.button.onmousedown = function(){
this.name = context.createOscillator(),
this.name.type = 2;
this.name.frequency.value = freqValueStorage;
this.name.connect(context.destination);
this.name.start(0);
};
this.button.onmouseup = function () {
this.name.stop(0);
};
/**** JQuery UI slider for pitch/frequency ****/
if(typeof(this.sliderParams )==='undefined') {
this.sliderParams = {
'orientation': "vertical",
'range': "min",
'min': .5,
'max': 100,
'animate': true,
'step': 0.01,
'slide': function(event, ui) {
freqValueStorage = ui.value;
},
stop: function( event, ui ) {}
};
$('#'+ this.pitchSlider.id ).slider(this.sliderParams);
};
};
});
osc = new Osc('osc','button');
console.log(osc.button);
也许这会更好？您想为构造函数对象的每个实例动态创建滑块，还是希望能够将先前存在的滑块挂接到它们上？我在构造函数中动态创建它们，并将它们连接到web音频。
$(function(){
context = new webkitAudioContext();
function Osc(name,buttonName){
/******* Dom Element creation & appending stuff********/
this.buttonName = buttonName;
if(typeof(this.button)==='undefined') {
this.button = document.createElement('div');
};
this.button.className = buttonName;
this.button.id = name +"_" +buttonName;
var app = document.getElementById("app");
$( "#app" ).append(this.button );
if(typeof(this.pitchSlider)==='undefined') {
this.pitchSlider = document.createElement('div');
};
this.pitchSlider.className = "pitchSlider";
this.pitchSlider.id = name +"_" +"pitchSlider";
console.log(this.pitchSlider.id);
var pitchSlider = document.getElementById(this.pitchSlider.id);
$("#"+this.button.id).append(this.pitchSlider);
/**** Oscillator creation and trigger stuff *****/
var freqValueStorage = 100;
this.button.onmousedown = function(){
this.name = context.createOscillator(),
this.name.type = 2;
this.name.frequency.value = freqValueStorage;
this.name.connect(context.destination);
this.name.start(0);
};
this.button.onmouseup = function () {
this.name.stop(0);
};
/**** JQuery UI slider for pitch/frequency ****/
if(typeof(this.sliderParams )==='undefined') {
this.sliderParams = {
'orientation': "vertical",
'range': "min",
'min': .5,
'max': 100,
'animate': true,
'step': 0.01,
'slide': function(event, ui) {
freqValueStorage = ui.value;
},
stop: function( event, ui ) {}
};
$('#'+ this.pitchSlider.id ).slider(this.sliderParams);
};
};
});
osc = new Osc('osc','button');
console.log(osc.button);