Start audio with correct volume instead of quickly ramping down from 100%

Questions
1

When I create an audio source, set it to some volume and play it, it will start with 100% volume and then very quickly ramp down. How do I start with a desired volume instead?

Demo:


<html>
<head>
    <script type="importmap">
    {"imports": {"three": "https://cdn.jsdelivr.net/npm/three@v0.182.0/build/three.module.js"}}
    </script>
</head>
<body>
    Click!
    <script type="module">
        import * as THREE from 'three';

        const beep = "data:audio/mpeg;base64,//uQxAAAAAAAAAAAAAAAAAAAAAAAWGluZwAAAA8AAAAFAAAG0wCMjIyMjIyMjIyMjIyMjIyMjIyMpaWlpaWlpaWlpaWlpaWlpaWlpaW5ubm5ubm5ubm5ubm5ubm5ubm5uc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//////////////////////////8AAAA8TEFNRTMuMTAwBK8AAAAAAAAAABUgJAMGQQABzAAABtOwFL3/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//vAxAAADGAnXPTAgCohFWq/PSCIACHfrbevXr169e/ds8qVwTADADAOI5+sAAAEeHh//gACP+OH//gDvM//A3/8cz//P//MAd8ADD/6HgAjwADD35h4AAeAAYef0eACPwRh//OAAAAAAYeHh4eAAAAAAYeHh48AGcIAAARwFwNgkDAgDAoAARuAoAAAAfMAgBmbAACpgLgUGAsBjHjBNH08wCQYzCsBoMAMAowrU2RAC8ZE4kxgZgHgEaB0oWJCP8NWjlDNBqkUiPHD4hyRcorUgRNHyZ8coXMLmJkc1FklP8ipkXiaMS7/+TJkXi8Yl0u/xEFQVER7/WCoiCoKiJULQgAAEAHAAAA/9V6isKNpaFxVVTAQHzDgOzDiEzS4kAUG6FK5X4EANLb/oCDYgAEAOUkV6l8WpZ0oEsKCUGHFLnpwnAYIVdQ7fmY1Lcv8gkxBH0QAYA4AAAHJWQHBZEqq1pQZYoCUYLA5JpIAXBgIqZz2y+A49Vy/yIU7IACoByLIqzYIyfxLlkjwMIhOdpQBDH4RL3biF3X+mh7YAEAOAAAByaogPWAS3fBT7TAEcwVh6jSEAzCAQEu2mP+7cYr4f5MKQAAAAA/8LEeS7ZGle+7BDAILDEQNDDScjuwqTAYNjBwBDAQAmoEABhhF/krhAAAYTmZOSBQKiUOg13FjmAsA0YEAEiNpbGwYRI4wGA0MHkNUv6FgDTSBRZMHMDoxSxrjA4AGMBoBcWAFEmy7h8wmaK7ytrmp8MrCDwEomApq8Spp+Lxi8tRK+X22dRFyXJ5n//DrD3XWETEiTvOVKYz////AjX3Li7XH8jOWWX5f////FHfjc/LLGGW6WlrU0q//////n8OV43Pxh/JZVpaXKmpsccf//////+Nxu3GKSxL887H4NCUJHv8MA+BAwD4EBIShIGuW//0161QBLrAARQhROi5BhI5EiSiYnuW0uJYV0aV2FDX/+yDE7QDFeC1D/dSAII+Fp7gcdFxgoBCVHEkuFBT+BP/0FeCuhHQhvQXoLUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV//sQxPqAxQQtO6DjwuCBhai4F/RcVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVX/+xDE/4DFAC07oOPC4LMFp7q6wARVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/7YMT+gBmNKVW57KIA0Qbk855gBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVQ=="

        async function main() {

            // wait for mouse click so we are alowed to play audio
            await new Promise(r => document.addEventListener('click', r, { once: true }));

            const listener = new THREE.AudioListener();
            const sound = new THREE.Audio(listener);
            const audioLoader = new THREE.AudioLoader();
            audioLoader.load(beep, function (buffer) {
                sound.setBuffer(buffer);
                sound.setLoop(true);
                sound.setVolume(0.02);
                sound.play();
            });

        }
        main()

    </script>
</body>
</html>
2

I cannot reproduce the effect on my machine - I don’t hear this initial 100%. Could you try to directly set the volume via gain instead of setVolume?

//sound.setVolume(0.02);

sound.gain.gain.value = 0.02;
3 Likes
3

Thanks, that works!

1 Like