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

Question

前提・実現したいこと

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

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

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

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

該当のソースコード

{% extends 'base.html' %}

{% block content %}
    <style>
    //略
    </style>
    <div id=seekbox>
        <div id=seekbar></div>
    </div>
    <footer class="footer">
        <div class="fcontainer">
            {% load static %}
            <div class="passive">
                <img id="pause" src="{% static 'img/pause.png' %}"></img>
                <img id="play" src="{% static 'img/play.png' %}"></img>
                <img id="volume" src="{% static 'img/volume.png' %}"></img>
                <img id="mute" src="{% static 'img/mute.png' %}"></img>
            </div>
            <img src="{{ albam.art.url }}" style="width: 45px; height: 45px; margin-left: 5px;"/>
            <p>{{ score.song_name }}</p>
            <img src="{% static 'img/pause.png' %}" onclick="clickPlay()" style="width: 40px; height: 40px;" alt="pause" id="playbtn">
            <img src="{% static 'img/loop.png' %}" onclick="clickLoop()" style="width: 40px; height: 40px;" alt="loop" id="loopbtn">
            <img src="{% static 'img/volume.png' %}" onclick="clickVolume()" style="width: 40px; height: 40px;" alt="volume" id="volumebtn">
            <input type="range" value="0.5" id="sampleVolume" min="0" max="1" step="0.02" >
            <img src="{% static 'img/autoscroll.png' %}" onclick="clickScroll()" style="width: 40px; height: 40px; background-color: rgb(20, 20, 20);" alt="scroll" id="scrollbtn">
        </div>
    </footer>
    <div class="score_detail">

        <audio id=audio>
            <source src="{{ score.musicfile.url }}">
        </audio>

        <div class="score">
            <img class="score_art" src="{{ score.score_art.url }}" style="width: 1400px; height: 817px;"/>
            <canvas id="myCanvas" width="1400" height="817"></canvas>
        </div>

        {{ note|json_script:"note" }}
        {{ maxdt|json_script:"maxdt" }}
        {{ tempo|json_script:"tempo" }}
        
        <script>
            var tempo = JSON.parse(document.getElementById('tempo').textContent);
            var note = JSON.parse(document.getElementById('note').textContent);
            var maxdt = JSON.parse(document.getElementById('maxdt').textContent);


            maxdt = (tempo[0][1]/480)*(maxdt/1000);

            var music = document.getElementById("audio");
            music.volume = 0.5;

            // メタデータ読み込み完了時に実行されるイベント
            music.addEventListener("loadedmetadata",function (e){
                // 再生総時間を取得する
                maxms = 1000*music.duration;
            });
　　　　　　  //========================================================
            //シークバー操作
           //==========================================================
            var seekbarflg = false;
            document.getElementById("seekbox").addEventListener("mousedown", ()=>{
                seekbarflg = true;
            });
            document.addEventListener("mousemove", (e)=>{
                if(seekbarflg){
                    document.getElementById("seekbar").style.width = e.offsetX;
                }
            });

            document.addEventListener('mouseup', () => {
                if(seekbarflg){
                    music.currentTime = music.duration*document.getElementById("seekbar").clientWidth/document.getElementById("seekbox").clientWidth;
                    seekbarflg = false;
                }
            });
            //================================================================
            //
            //================================================================
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");

            function drawNote(track, a){
                let midi = [];
                for(let i=0;i<note[track].length;i++){
                    ctx.beginPath();
                    if(note[track][i][2]>0){
                        midi.push(note[track][i]);
                    }else{
                        for(let j=0;j<midi.length;j++){
                            if(note[track][i][1]==midi[j][1]){
                                ctx.arc(500+midi[j][0]%7680/10, 100*(Math.floor(midi[j][0]/7680)+1)-a, 10, 0, Math.PI*2);
                                ctx.fillText(midi[j][1]+",", 500+midi[j][0]%7680/10, 100*(Math.floor(midi[j][0]/7680)+1)-50-a);
                                midi.splice(j, 1);
                            }
                        }
                    }
                    ctx.fillStyle = "#0095DD";
                    ctx.fill();
                    ctx.closePath();
                }
            }

            var time = music.currentTime;
            var flag = true; //再生
            var autoscrollflg = true; //再生バー追従 
            var mouseflag = false;

            canvas.addEventListener('mousedown', e=>{
                my = e.offsetY;
                autoscrollflg = false;
                document.getElementById("scrollbtn").style = "width: 40px; height: 40px;"
                mouseflag = true;
            });

            canvas.addEventListener('mousemove', e=>{
                if(mouseflag){
                    mdy = e.offsetY - my;
                    my = e.offsetY;
                }
            });

            document.addEventListener('mouseup', e=>{
                mouseflag = false;
                mdy = 0;
            });

            function draw(){
                ctx.clearRect(0, 0, canvas.width, canvas.height); 
                time = 1000*music.currentTime;
                if(!seekbarflg){
                    document.getElementById("seekbar").style.width = document.getElementById("seekbox").clientWidth*time/maxms + "px";  //style.widthだと取得できない
                }
            }
            setInterval(draw, 10);
            if(flag){
                music.play();
            }
            //===================================================================================
            //フッター
            //===================================================================================
            function clickPlay(){
                flag = !flag;
                if(flag){
                    music.play();
                    document.getElementById("playbtn").src=document.getElementById("pause").src;
                    document.getElementById("playbtn").style="width: 40px; height: 40px;";  
                }else{
                    music.pause();
                    document.getElementById("playbtn").src=document.getElementById("play").src;
                    document.getElementById("playbtn").style="width: 40px; height: 40px; border-radius: 50%;";   
                }
            }
            music.addEventListener("ended", ()=>{
                if(loopflg){
                    music.currentTime = 0;  // 再生位置を先頭に移動
                    music.play();
                }else{
                    flag = false;
                    document.getElementById("playbtn").src=document.getElementById("play").src;  // 「再生ボタン」に変更
                    document.getElementById("playbtn").style="width: 40px; height: 40px;  border-radius: 50%;";  
                }
            });

            loopflg = false;
            function clickLoop(){
                loopflg = !loopflg;
                if(loopflg){
                    document.getElementById("loopbtn").style="width: 40px; height: 40px; background-color: rgb(20, 20, 20);"; 
                }else{
                    document.getElementById("loopbtn").style="width: 40px; height: 40px;"; 
                }
            }

            muteflg = false;
            function clickVolume(){
                muteflg = !muteflg;
                if(muteflg){
                    document.getElementById("volumebtn").src=document.getElementById("mute").src; 
                    music.volume = 0;
                }else{
                    document.getElementById("volumebtn").src=document.getElementById("volume").src; 
                    music.volume = document.getElementById("sampleVolume").value;
                }
            }

            document.getElementById("sampleVolume").addEventListener("input", ()=>{
                if(!muteflg){
                    music.volume = document.getElementById("sampleVolume").value;
                }
            });

            function clickScroll(){
                autoscrollflg = !autoscrollflg;
                if(autoscrollflg){
                    document.getElementById("scrollbtn").style = "width: 40px; height: 40px; background-color: rgb(20, 20, 20);"
                }else{
                    document.getElementById("scrollbtn").style = "width: 40px; height: 40px;"
                }
            }

        </script>
    </div>
{% endblock %}