How to make a sound always perfectly with the audio tag in html?

I'm trying to make a sound with audio tag on web browser, and it works properly in most of cases.

However, infrequently, the sound starts from halfway, or output no sound. (I'm not sure the condition this happens). Is there any way to make a sound always perfectly?

I'm using Google Chrome ver. 74.0.3729.169 on Windows 10 laptop with embedded speaker.

I tried the following ways, but it could not solve this issue.

1) using load() and putting call back method on the canplaythough event to call play().

2) put preload="auto" in the audio tag

3) put the sound data into the audio tag by base64 instead of URL.

e.g.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <audio id="audio-from-url" preload="auto" src="https://xxx/xxx/xxx.mp3">
        </audio>
        <button id="ringButton">ring</button>
        <script>
          button = window.document.getElementById('ringButton')
          button.addEventListener("click", function(){
              audioTag = document.getElementById("audio-from-url");
              audioTag.load();
              if (audioTag.readyState === 4) {
                  audioTag.play();
              } else {
                  // call "play" after finished loading
                  audioTag.addEventListener('canplaythrough', function (e) {
                      audioTag.removeEventListener('canplaythrough', arguments.callee);
                      audioTag.play();
                  });
              }
          });
        </script>
    </body>
</html>

I expect that users can listen the sound every time without defects, which means can hear always completely same sound.