Multiple Executions of JavaScript Functions I Declared Disable Keyboard Shortcuts

[inherithandle]

I’ve created Anki cards that feature an audio player using WaveSurfer.js. I have also implemented functions to play/pause and to fast-forward/rewind the audio by one second. I’ve mapped these functions to user actions 1, 2, 3, and 4. Furthermore, I’ve mapped the D-pad of my 8BitDo Zero 2 gamepad to these same user actions, as you can see in the below JavaScript Code.

Initially, using the D-pad to control the audio works as expected. However, after pressing the D-pad multiple times, it stops functioning. I also have a Bluetooth keyboard connected at the same time as the gamepad, and after this issue occurs, pressing the Spacebar, 1, 2, 3, or 4 on the keyboard also stops working.

It’s worth noting that the same setup works perfectly on the PC and Linux versions of Anki. Could you help me identify what might be wrong with my code? Below is my source code.

{{Front}}

<div id="waveform">
    <!-- the waveform will be rendered here -->
</div>

<script type="module">
    import WaveSurfer from '/7.1.1_dist_wavesurfer.esm.js'

    window.currentWaveSurfer = null;
    const wavesurfer = WaveSurfer.create({
        container: '#waveform',
        waveColor: '#4F4A85',
        progressColor: '#383351',
        mediaControls: true,
        url: '{{Waveform-Audio}}',
    })
    window.currentWaveSurfer = wavesurfer


    window.currentWaveSurfer.on('interaction', () => {
        wavesurfer.play()
    })


    if (!window.eventBound) {
        document.addEventListener('keydown', function(e) {
            switch(e.keyCode) {
                case 72: // h key
                    window.currentWaveSurfer.skip(-1);
                    break;
                case 74: // j key
                    playPause();
                    break;
                case 75: // k key
                    window.currentWaveSurfer.skip(1);
                    break;
                case 76: // l key
                case 80: // p key
                    window.currentWaveSurfer.skip(-100);
                    break;

            }
        });
        window.eventBound = true;
    }

    function start() {
        window.currentWaveSurfer.skip(-100);
    }

    function playPause() {
        window.currentWaveSurfer.playPause();
    }

    function forward() {
        window.currentWaveSurfer.skip(1);
    }

    function backward() {
        window.currentWaveSurfer.skip(-1);
    }

    window.userJs1 = backward;
    window.userJs2 = playPause;
    window.userJs3 = forward;
    window.userJs4 = start;

</script>

<!-- Anki Code Highlighter (Addon 112228974) BEGIN -->
<link rel="stylesheet" href="_ch-pygments-solarized.css" class="anki-code-highlighter">
<link rel="stylesheet" href="_ch-hljs-solarized.css" class="anki-code-highlighter">
<script src="_ch-my-highlight.js" class="anki-code-highlighter"></script>
<!-- Anki Code Highlighter (Addon 112228974) END -->

<!-- Anki Code Highlighter (Addon 112228974) BEGIN -->
<link rel="stylesheet" href="_ch-pygments-solarized.css" class="anki-code-highlighter">
<link rel="stylesheet" href="_ch-hljs-solarized.css" class="anki-code-highlighter">
<script src="_ch-my-highlight.js" class="anki-code-highlighter"></script>
<!-- Anki Code Highlighter (Addon 112228974) END -->

[dae]

I’m afraid I can’t provide support for JS scripts, so you’ll need to experiment with this. I’d suggest you start by replacing the window.currentWaveSurfer.* calls with console.log() or something else innocuous, and see if the problem goes away - if it does, that would imply it’s an issue in WaveSurfer.