Search code examples
javascripthtmlcssaudioweb-audio-api

How to update data at navigator.devicemedia without any errors

img

I am new to JS and I was creating a Music Amplifier. The image you see is a small snippet of what I am creating.

My HTML

 <label for = "noisesup">Noise Suppression</label>   
 <input type = "checkbox" id = "noisesup"class = "checker">

My CSS

.checker{
    width: 80px;
    height: 30px;
    -webkit-appearance: none;
    background: rgb(141, 103, 54);
    border-radius: 3px;
    border: 0.7px solid rgb(177, 124, 51);
    box-shadow: 0 0 10px;
    transition: .4s;
    
}

.checker::before{
    content: '';
    position: absolute;
    border-radius: 3px;
    background: rgb(101, 70, 43);
    outline: 1px solid rgb(71, 50, 23);
    height: 29px;
    width:40px;
    box-shadow: 0 0 10;
    transition: .4s;
    
    
}

.checker:checked:before{
    transition: .4s;
    transform: translateX(40px);
    
}

My JS

const canvas = document.getElementById("canvas");
const gaincont = document.getElementById("gain");
const echocan = document.getElementById("echo");
const noisesup = document.getElementById("noisesup");
const latency = document.getElementById("latency");

const width = canvas.width;
const height = canvas.height;

const context = new AudioContext();

function eventlistners() {

    noisesup.addEventListener("change", n=>{

        const value = n.target.value
        navigator.mediaDevices.getUserMedia({
            audio:{
                noiseSuppression: value
            }
        })
    })
}


function getmusic() {
    return navigator.mediaDevices.getUserMedia({
        audio:{
            echoCancellation: false,
            noiseSuppression: false,
            autoGainControl: false,
            latency: 0,
        }
    })
}

async function setupcontext() {
    try{const audio = await getmusic();
        if (context.state === "suspended"){
            await context.resume();
        }
        const source = context.createMediaStreamSource(audio);
        source       
            .connect(analyser)
            .connect(context.destination);}

    catch{alert("Access Denied")}
    
}


eventlistners();

setupcontext();

So what I wish to do is that whenever I toggle these switches, I should be able to update them at

navigator.mediaDevices

I tried the below code but it repeatedly asks me this every time I toggle the switch: img

noisesup.addEventListener("change", n=>{

        const value = n.target.value
        navigator.mediaDevices.getUserMedia({
            audio:{
                noiseSuppression: value
            }
        })
    })

Then I did this but now it says I need 3 parameters and only 1 found.

noisesup.addEventListener("change", n=>{

        const value = n.target.value
        navigator.getUserMedia({
            audio:{
                noiseSuppression: value
            }
        })
    })

So how do I get about this?

Solution

  • You should be using navigator.mediaDevices.getUserMedia. The one in your first example snippet. The second example snippet is deprecated.

    The issue here (from what I can see) is that getUserMedia is suppose to request permissions everytime it is called. So the prompt is expected.

    You need to store the stream in a variable, and that variable needs to be declared outside of the event handler.

    async function start(constraints) {
  let stream = null;

  try {
    stream = await navigator.mediaDevices.getUserMedia(constraints);
    /* use the stream */
  } catch(err) {
    /* handle the error */
  }
}

    Once you have the stream stored in a variable, you should be able to access the tracks via getTracks(), and then apply contrainsts to a track from there.

    In summary, don't call getUserMedia in an event handler.