Mic mute and unmute?

Need help
1

is there a ways to mute or unmute your mic in bubble.io? without using paid-plugin?

2

Hey Anthony! I have this code that you can put in the HTML element in Bubble. You can test and see if it’s working for you or not.

It has 2 buttons - one to unmute and one to mute. Once unmuted, if you speak into your mic, it shows up a text as well.

<!DOCTYPE html>
<html>
<head>
    <title>Mute and Unmute Microphone</title>
    <style>
        #speakingIndicator {
            display: none;
            color: green;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <button id="muteButton">Mute</button>
    <button id="unmuteButton">Unmute</button>
    <p id="micStatus">Microphone status: <span id="statusText">Unknown</span></p>
    <p id="speakingIndicator">You are speaking</p>

    <script>
        let localStream;
        let audioContext;
        let analyser;
        let dataArray;
        let speaking = false;

        async function getMediaStream() {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
                localStream = stream;
                console.log('Got MediaStream:', stream);
                updateStatus();
                initAudioContext();
            } catch (err) {
                console.error('Error accessing media devices.', err);
            }
        }

        function muteMic() {
            if (localStream) {
                localStream.getAudioTracks().forEach(track => track.enabled = false);
                console.log('Microphone muted.');
                updateStatus();
            }
        }

        function unmuteMic() {
            if (localStream) {
                localStream.getAudioTracks().forEach(track => track.enabled = true);
                console.log('Microphone unmuted.');
                updateStatus();
            }
        }

        function updateStatus() {
            const statusText = localStream.getAudioTracks().every(track => track.enabled) ? 'Unmuted' : 'Muted';
            document.getElementById('statusText').innerText = statusText;
        }

        function initAudioContext() {
            audioContext = new (window.AudioContext || window.webkitAudioContext)();
            const source = audioContext.createMediaStreamSource(localStream);
            analyser = audioContext.createAnalyser();
            source.connect(analyser);
            analyser.fftSize = 2048;
            const bufferLength = analyser.fftSize;
            dataArray = new Uint8Array(bufferLength);

            monitorAudioLevel();
        }

        function monitorAudioLevel() {
            analyser.getByteTimeDomainData(dataArray);
            let sum = 0.0;
            for (let i = 0; i < dataArray.length; i++) {
                const amplitude = (dataArray[i] / 128.0) - 1.0;
                sum += amplitude * amplitude;
            }
            const volume = Math.sqrt(sum / dataArray.length);

            if (volume > 0.03 && !speaking) {
                speaking = true;
                document.getElementById('speakingIndicator').style.display = 'block';
            } else if (volume <= 0.03 && speaking) {
                speaking = false;
                document.getElementById('speakingIndicator').style.display = 'none';
            }

            requestAnimationFrame(monitorAudioLevel);
        }

        document.getElementById('muteButton').addEventListener('click', muteMic);
        document.getElementById('unmuteButton').addEventListener('click', unmuteMic);

        // Initialize the media stream when the page loads
        getMediaStream();
    </script>
</body>
</html>
1 Like
3

Thankyou for the help! I tried but it cannot detect my mic should i need to add something? (I already add the mic permission)

4

I’ve created a demo here. Please check and see if this works for you.

1 Like
5

image
image819×275 10.4 KB

Thankyou for making the demo. But it needs authorization. I tried to sign in with my bubble account but it does not work

Edit : btw im trying to use this manual mute / unmute feature with a plugin called SIP VOIP PHONE CALL since it didn’t provide mic mute and unmute feature.

Is there a posibility it does not work cause of this plugin?

6

The creds for this our available in Settings → General
Username - username
Password - password

Yeah, there’s a possibility that it might interfere with the plugin’s code. Either you can fork the plugin (since it’s open-source) and add the functionality, or build it from scratch for yourself.

Edit - it’s not open-source, sorry. You might have to build something from scratch itself or inspect the code and see what can be done.

If you need any help wrt this, feel free to schedule a 15-min consultation with me.

1 Like
7

Yeah i think the plugin is the trouble here. it works fine on the demo, i don’t think it’s open source since it’s paid. Probably gonna need to build this from scratch. im gonna pause this on hold and prioritize other main feature thankyou zeroic for the help!!

8

Makes sense. No worries Anthony, best of luck with your build :smile:

2 Likes
9

This topic was automatically closed after 70 days. New replies are no longer allowed.