Loud clipping sound when playback ends

Danielku15 commented 1 month ago

Is there an existing issue for this?

[X] I have searched the existing issues

Current Behavior

When the playback ends there is a chance of hearing some (clipping) noise at the end.

Expected Behavior

No clipping noise should occur, not on the first and not on second/third playbacks.

Steps To Reproduce

https://bali182.github.io/stick/#/default/score

Link to jsFiddle, CodePen, Project

https://bali182.github.io/stick/#/default/score

Found in Version

1.4 (alpha)

Platform

Web

Environment

- **OS**: Windows 11 Pro
- **Browser**: 126.0.6478.185

Anything else?

https://github.com/CoderLine/alphaTab/discussions/1593 https://github.com/CoderLine/alphaTab/issues/1298

bali182 commented 1 month ago

To make the repro simpler, here is an 1 file example. I just tweaked it until I could repro.

I added a bunch of random garbage dom nodes (to impact performance a bit), and that made it consistently reproducible.

I don't know if the config (notation/display settings) have anything to do with it, couldn't really find a consistent answer for that, so I just added the stuff I have.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>AlphaTab Click/Pop repro</title>
    <script src="https://cdn.jsdelivr.net/npm/@coderline/alphatab@alpha/dist/alphaTab.min.js"></script>
  </head>

  <body>
    <div id="alphaTab"></div>
    <div id="garbage" style="display: flex; flex-wrap: wrap"></div>
    <button onclick="api.playPause()">Play/Pause</button>
    <script type="text/javascript">
      const alphaTabDom = document.querySelector('#alphaTab')
      const score = `\\track "Bass" "Bass" \\instrument "AcousticBass"
      \\clef Bass \\ts 4 4 \\ks C 0.3.4 4.3.4 2.2.4 4.3.4 | 5.3.1`

      const api = new alphaTab.AlphaTabApi(alphaTabDom, {
        core: { tex: true, engine: 'svg' },
        notation: { elements: { guitarTuning: false, trackNames: false } },
        display: {
          staveProfile: 'Default',
          justifyLastSystem: true,
          barsPerRow: 4,
          resources: {},
        },
        player: {
          enableCursor: true,
          enableAnimatedBeatCursor: true,
          enableElementHighlighting: true,
          enablePlayer: true,
          enableUserInteraction: true,
          soundFont:
            'https://cdn.jsdelivr.net/npm/@coderline/alphatab@latest/dist/soundfont/sonivox.sf2',
        },
      })

      api.tex(score)

      // Adding a bunch of garbage to the dom, to make the browser work a bit
      const garbage = document.getElementById('garbage')
      for (let i = 0; i < 20000; i += 1) {
        const el = document.createElement('div')
        el.style.width = '1px'
        el.style.height = '1px'
        el.style.backgroundColor =
          '#' + Math.floor(Math.random() * 16777215).toString(16)
        garbage.appendChild(el)
      }
    </script>
  </body>
</html>

Danielku15 commented 1 month ago

Thanks a lot for your efforts. I hope this allows narrowing down the problem easier. I have a lot going on in private life currently and don't find a lot of time to develop on alphaTab. But I'll try to tackle this as one of the next things.

bali182 commented 1 month ago

No worries, just wanted to make a repro, so tracking this down is not find Waldo in my code :) Hope all will be good in your private life mate!

Danielku15 commented 1 month ago

@bali182 Can you check if things are improving with 1.4.0-alpha.1112? I couldn't directly reproduce it locally on my quick tests with the latest setup but I found some suspicious bits in code which could explain bad samples being played.

bali182 commented 1 month ago

Just updated, and it seems miles better on my end too. There is a little pop at the end, but that might just be because of the envlelope of the note, no loud cracks/clicks, well done! 👍

Danielku15 commented 1 month ago

1.4.0-alpha.1116 should fix the final bits that there are no major clicks when the song ends.

CoderLine / alphaTab