I made an html custom audio player to play an mp3 file. It works just fine locally. It loads all the audio files, but just a little, maybe only the metadata(?). But when I click play, the audio loaded 2.2 MB again (the particular file size is 3.1 MB)
But when I deployed, it loaded all the audio files at the start like it used to. And when I clicked play, it loaded the files several times, but only 1MB at a time. After about 30 times, it stopped playing and stopped loading.
Why is this happening, and how to fix that? Is there anything to do with the backend?
The audio code is just simple:
<script>let audio, playState = falsefunction playAudio() { if (playState) { audio.pause() playState = false } else { audio.play() playState = true } }</script><audio src = "path-to-song" controls="true" class="audio-1" bind:this={audio}></audio>
the live article: