Веб Аудио Конструкторы и JQuery

Question

Веб Аудио Конструкторы и JQuery

0

Я пытаюсь найти способ получить более чистый и эффективный код для проекта веб-аудио, над которым я работал. код, который у меня есть сейчас:

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

похоже, что у меня много повторяющегося кода, поэтому я рассматривал возможность создания некоторых конструкторов для таких вещей, как создание новой кнопки osc или play/pause. Проблема, с которой я сталкиваюсь, связана с тем, что управление осцилляторами управляется с помощью jquery, как бы я все еще использовал ползунки jQuery, кнопки в конструкторах?

Это, насколько я понял:

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

ryanhagz 16 дек. 2013, в 00:01

Источник

0

Возможно, так будет лучше на CodeReview ?
Trojan 15 дек. 2013, в 23:38
0

Вы хотите динамически создавать ползунки для каждого экземпляра объектов-конструкторов или хотите подключить к ним уже существующие ползунки?
William 16 дек. 2013, в 00:56
0

Я создаю их динамически в конструкторе и подключаю их к веб-аудио.
ryanhagz 16 дек. 2013, в 01:20

Показать ещё 1 комментарий

Теги:

javascript

jquery

html5

web-audio

constructor

1 ответ

Ещё вопросы

Возможно, так будет лучше на CodeReview ?
Вы хотите динамически создавать ползунки для каждого экземпляра объектов-конструкторов или хотите подключить к ним уже существующие ползунки?
Я создаю их динамически в конструкторе и подключаю их к веб-аудио.

William · Accepted Answer · 2013-12-16T08-03-00.000Z

Посмотрите, поможет ли это вам начать. Я просто продемонстрировал, как добавлять элементы DOM, которые могут запускать осцилляторы из объекта, созданного из конструктора. Я также добавил только один параметр осциллятора (частота/шаг), поскольку я полагаю, что вы могли бы просто дублировать шаблон для любых параметров генератора, которые вы хотите (тип, фильтр и т.д.). Одна вещь о нижеприведенном коде заключается в том, что внутреннее добавление DOM может использовать абстракцию само по себе. Чтобы действительно сделать это правильно, вам, возможно, придется создать группу мини-абстракций, которые работают вместе под одним конструктором. По крайней мере, так, как я это вижу.

EDIT * Я создал версию с помощью слайдера с шагом JQuery UI и отредактировал код ниже, чтобы включить это: * http://jsfiddle.net/ay4nL/

HTML

<div id="app"> </div>

CSS

.button{
    width:100px;
    height:100px;
    background-color:orange;
}

Javascript

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

это действительно очень помогло, спасибо человек!