[JavaScript] AudioのcurrentTimeの操作ができない。

前提・実現したいこと

JavaScriptを使った音楽プレイヤーを作っています。
シークバーを実装中に以下のエラーが発生しました。
フレームワークにDjango3を使用しています。

発生している問題・エラーメッセージ

オーディオの再生位置を自作のシークバーを使って操作した時に指定したcurrentTimeに行かず、currentTime = 0 のところから再生されてしまいます。この現象は4分程度の長めの音楽ファイルで必ず発生しますが、1分程度の短い音楽では問題なく正常に動作していました。ただ、1分程度の音楽であってもアップロードしたばかりの時は上記のエラーが必ず起こります。また、シークバー操作ではなく最初からcurrentTime = 10 として再生しても長い音楽ファイルの場合は強制的にcurrentTime = 0で再生されました。このことから音楽ファイル読み込みが追い付いていないことが原因であると予想していますが改善方法が分からないのでご教授いただけると幸いです。
こちらエラーの様子です。https://youtu.be/X3baegZQ4Y0
あと、これに関連するものかわかりませんがこんなエラーメッセージがターミナルに出てきました。こちらも調べてもわかりませんでした。

ConnectionAbortedError: [WinError 10053] 確立された接続がホスト コンピューターのソウトウェアによって中止されました。

該当のソースコード

JavaScript
1{% extends 'base.html' %}
2
3{% block content %}
4    <style>
5    //略
6    </style>
7    <div id=seekbox>
8        <div id=seekbar></div>
9    </div>
10    <footer class="footer">
11        <div class="fcontainer">
12            {% load static %}
13            <div class="passive">
14                <img id="pause" src="{% static 'img/pause.png' %}"></img>
15                <img id="play" src="{% static 'img/play.png' %}"></img>
16                <img id="volume" src="{% static 'img/volume.png' %}"></img>
17                <img id="mute" src="{% static 'img/mute.png' %}"></img>
18            </div>
19            <img src="{{ albam.art.url }}" style="width: 45px; height: 45px; margin-left: 5px;"/>
20            <p>{{ score.song_name }}</p>
21            <img src="{% static 'img/pause.png' %}" onclick="clickPlay()" style="width: 40px; height: 40px;" alt="pause" id="playbtn">
22            <img src="{% static 'img/loop.png' %}" onclick="clickLoop()" style="width: 40px; height: 40px;" alt="loop" id="loopbtn">
23            <img src="{% static 'img/volume.png' %}" onclick="clickVolume()" style="width: 40px; height: 40px;" alt="volume" id="volumebtn">
24            <input type="range" value="0.5" id="sampleVolume" min="0" max="1" step="0.02" >
25            <img src="{% static 'img/autoscroll.png' %}" onclick="clickScroll()" style="width: 40px; height: 40px; background-color: rgb(20, 20, 20);" alt="scroll" id="scrollbtn">
26        </div>
27    </footer>
28    <div class="score_detail">
29
30        <audio id=audio>
31            <source src="{{ score.musicfile.url }}">
32        </audio>
33
34        <div class="score">
35            <img class="score_art" src="{{ score.score_art.url }}" style="width: 1400px; height: 817px;"/>
36            <canvas id="myCanvas" width="1400" height="817"></canvas>
37        </div>
38
39        {{ note|json_script:"note" }}
40        {{ maxdt|json_script:"maxdt" }}
41        {{ tempo|json_script:"tempo" }}
42        
43        <script>
44            var tempo = JSON.parse(document.getElementById('tempo').textContent);
45            var note = JSON.parse(document.getElementById('note').textContent);
46            var maxdt = JSON.parse(document.getElementById('maxdt').textContent);
47
48
49            maxdt = (tempo[0][1]/480)*(maxdt/1000);
50
51            var music = document.getElementById("audio");
52            music.volume = 0.5;
53
54            // メタデータ読み込み完了時に実行されるイベント
55            music.addEventListener("loadedmetadata",function (e){
56                // 再生総時間を取得する
57                maxms = 1000*music.duration;
58            });
59　　　　　　  //========================================================
60            //シークバー操作
61           //==========================================================
62            var seekbarflg = false;
63            document.getElementById("seekbox").addEventListener("mousedown", ()=>{
64                seekbarflg = true;
65            });
66            document.addEventListener("mousemove", (e)=>{
67                if(seekbarflg){
68                    document.getElementById("seekbar").style.width = e.offsetX;
69                }
70            });
71
72            document.addEventListener('mouseup', () => {
73                if(seekbarflg){
74                    music.currentTime = music.duration*document.getElementById("seekbar").clientWidth/document.getElementById("seekbox").clientWidth;
75                    seekbarflg = false;
76                }
77            });
78            //================================================================
79            //
80            //================================================================
81            var canvas = document.getElementById("myCanvas");
82            var ctx = canvas.getContext("2d");
83
84            function drawNote(track, a){
85                let midi = [];
86                for(let i=0;i<note[track].length;i++){
87                    ctx.beginPath();
88                    if(note[track][i][2]>0){
89                        midi.push(note[track][i]);
90                    }else{
91                        for(let j=0;j<midi.length;j++){
92                            if(note[track][i][1]==midi[j][1]){
93                                ctx.arc(500+midi[j][0]%7680/10, 100*(Math.floor(midi[j][0]/7680)+1)-a, 10, 0, Math.PI*2);
94                                ctx.fillText(midi[j][1]+",", 500+midi[j][0]%7680/10, 100*(Math.floor(midi[j][0]/7680)+1)-50-a);
95                                midi.splice(j, 1);
96                            }
97                        }
98                    }
99                    ctx.fillStyle = "#0095DD";
100                    ctx.fill();
101                    ctx.closePath();
102                }
103            }
104
105            var time = music.currentTime;
106            var flag = true; //再生
107            var autoscrollflg = true; //再生バー追従 
108            var mouseflag = false;
109
110            canvas.addEventListener('mousedown', e=>{
111                my = e.offsetY;
112                autoscrollflg = false;
113                document.getElementById("scrollbtn").style = "width: 40px; height: 40px;"
114                mouseflag = true;
115            });
116
117            canvas.addEventListener('mousemove', e=>{
118                if(mouseflag){
119                    mdy = e.offsetY - my;
120                    my = e.offsetY;
121                }
122            });
123
124            document.addEventListener('mouseup', e=>{
125                mouseflag = false;
126                mdy = 0;
127            });
128
129            function draw(){
130                ctx.clearRect(0, 0, canvas.width, canvas.height); 
131                time = 1000*music.currentTime;
132                if(!seekbarflg){
133                    document.getElementById("seekbar").style.width = document.getElementById("seekbox").clientWidth*time/maxms + "px";  //style.widthだと取得できない
134                }
135            }
136            setInterval(draw, 10);
137            if(flag){
138                music.play();
139            }
140            //===================================================================================
141            //フッター
142            //===================================================================================
143            function clickPlay(){
144                flag = !flag;
145                if(flag){
146                    music.play();
147                    document.getElementById("playbtn").src=document.getElementById("pause").src;
148                    document.getElementById("playbtn").style="width: 40px; height: 40px;";  
149                }else{
150                    music.pause();
151                    document.getElementById("playbtn").src=document.getElementById("play").src;
152                    document.getElementById("playbtn").style="width: 40px; height: 40px; border-radius: 50%;";   
153                }
154            }
155            music.addEventListener("ended", ()=>{
156                if(loopflg){
157                    music.currentTime = 0;  // 再生位置を先頭に移動
158                    music.play();
159                }else{
160                    flag = false;
161                    document.getElementById("playbtn").src=document.getElementById("play").src;  // 「再生ボタン」に変更
162                    document.getElementById("playbtn").style="width: 40px; height: 40px;  border-radius: 50%;";  
163                }
164            });
165
166            loopflg = false;
167            function clickLoop(){
168                loopflg = !loopflg;
169                if(loopflg){
170                    document.getElementById("loopbtn").style="width: 40px; height: 40px; background-color: rgb(20, 20, 20);"; 
171                }else{
172                    document.getElementById("loopbtn").style="width: 40px; height: 40px;"; 
173                }
174            }
175
176            muteflg = false;
177            function clickVolume(){
178                muteflg = !muteflg;
179                if(muteflg){
180                    document.getElementById("volumebtn").src=document.getElementById("mute").src; 
181                    music.volume = 0;
182                }else{
183                    document.getElementById("volumebtn").src=document.getElementById("volume").src; 
184                    music.volume = document.getElementById("sampleVolume").value;
185                }
186            }
187
188            document.getElementById("sampleVolume").addEventListener("input", ()=>{
189                if(!muteflg){
190                    music.volume = document.getElementById("sampleVolume").value;
191                }
192            });
193
194            function clickScroll(){
195                autoscrollflg = !autoscrollflg;
196                if(autoscrollflg){
197                    document.getElementById("scrollbtn").style = "width: 40px; height: 40px; background-color: rgb(20, 20, 20);"
198                }else{
199                    document.getElementById("scrollbtn").style = "width: 40px; height: 40px;"
200                }
201            }
202
203        </script>
204    </div>
205{% endblock %}