CODEWITHSUNDEEP
javascripthtml
ongunumutyelbasi
ongunumutyelbasi

Reputation: 1

How to keep previous settings when restarting oscillator in javascript?

I'm trying to make an oscillator where you can select between Sine, Triangle, and Square, and you can start/stop the oscillator. I did the start/stop by stopping the original oscillator and creating a new one every time, but when I do that I want the frequency setting I selected with a slider and the waveform setting I selected with buttons to transfer to the new oscillator. I don't have any problem transferring the volume setting, so I don't know what I'm doing wrong with the other two.

Here is my code:

        <html>
<head>
    <title>Session 4 - AudioAPI Objects</title>
    <link rel="stylesheet" href="oscstylesheet.css">
</head>
<body>

    <button onclick="myStart()" type="button">Start</button><br>
    <button onclick="myStop()" type="button">Mute/Unmute</button><br>
    <button onclick="Sin()" type="button">Sine</button><br>
    <button onclick="Square()" type="button">Square</button><br>
    <button onclick="Tri()" type="button">Triangle</button><br>
    <input autocomplete="off" id="freqSlider" type="range" min="100" max="5000" value="440">
    <input autocomplete="off" id="volumeSlider" type="range" min="0" max="1" value="0.5" step="0.01">

    <script>

        var isPlaying = false;
        var volume = .5;
        //Create audio context
        let audioCtx = new (window.AudioContext || window.webkitAudioContext) ();

        //Create an oscillator
        let oscillator = audioCtx.createOscillator();
        var freqValue = oscillator.frequency.value;

        //Create a gain node
        var volumeNode = audioCtx.createGain();
        volumeNode.gain.value = volume;

        //Set the oscillator frequency from now
        //oscillator.frequency.setValueAtTime(440, audioCtx.currentTime);
        freqSlider.addEventListener('input', (e) => {
        oscillator.frequency.value = e.target.valueAsNumber;
        });

        volumeSlider.addEventListener('input', (e) => {
        volumeNode.gain.value = e.target.valueAsNumber;
        });


        //Connect the oscillator to the destination
        oscillator.connect(volumeNode);
        volumeNode.connect(audioCtx.destination);

        //Send the detail of the oscillator object to the console
        console.log(oscillator);

        // FUNCTIONS

        function myStart(){
            oscillator.start();
            isPlaying = true;
            console.log(oscillator);
        }

        function myStop() {
        if (isPlaying) {
            isPlaying = false;
            oscillator.stop();
        } else {
    //the oscillators are created here because once they are stopped they can not
    //be started again.
            oscillator = audioCtx.createOscillator();
                freqSlider.addEventListener('input', (e) => {
                oscillator.frequency.value = e.target.valueAsNumber;
                });
                setFreqs();
                oscillator.connect(volumeNode);
            oscillator.start();
            isPlaying = true;
            }
            }

    function setFreqs() {
        if (oscillator.type != "undefined") {
            freqSlider.addEventListener('input', (e) => {
            freqValue = e.target.valueAsNumber;
            });
        }
    }

    function handleVolumeChange(val) {
    var element = document.getElementById("volumeLabel");
    element.innerHTML = val;
    volume = Number(val)/100;
    volumeNode.gain.value = volume;
    }

    function handleCarrierChange(val) {
    var element = document.getElementById("freqValue");
    element.innerHTML = val;
    freqValue = Number(val);
    setFreqs();
    }
        //function myStop(){

            //oscillator.stop();
            //oscillatorNew = audioCtx.createOscillator();
            //freqSlider.addEventListener('input', (e) => {
            //oscillator.frequency.value = e.target.valueAsNumber;
            //});
            //oscillatorNew.connect(audioCtx.destination);
            //oscillatorNew.start();

        //}

        function Sin(){
            oscillator.type = "sine";
            console.log(oscillator);
        }

        function Square(){
            oscillator.type = "square";
            console.log(oscillator);
        }

        function Tri(){
            oscillator.type = "triangle";
            console.log(oscillator);
        }

    </script>


</body>
</html>

Upvotes: 0

Views: 42

Answers (1)

Ahmed A. Mahmoud
Ahmed A. Mahmoud

Reputation: 79

You can store your setting via localStorage or sessionStorage

// Set Setting Item
   localStorage.setItem("Setting", "SettingValue");

// Get Settings from Stored data:
   let selectSetting = localStorage.getItem("Setting");

   console.log(selectSetting);

Upvotes: 0

Related Questions