mp3などのオーディオファイルを連続再生するhtmlを作ってみた

<h1>ちょっとだけオーディオファイルを連続再生したい</h1>
たまになのですがローカルにある音楽ファイルを
ここからここまでの複数ファイルを再生したい。という時があります。
プレイリストを作成すればもちろん再生できるのですが
アプリの起動待ちなどが入り地味に即効性がない。
過去のリストが残る。リストを削除・整理しなければならない。同期されてしまう。
ブラウザで再生をしようと思うと1曲だけ再生される。
サラッと再生したいだけなのですが・・・
このくらいであればjsでできるのでは？と作ってみました
<h1>サンプル</h1>
<a href='https://gtlgqvxdkbh2dm3axzu5fq-on.drv.tw/play_audio_files/play_audio_files.htm' target='_blank'>play_audio_files.htm</a>
<h1>ソース</h1>
play_audio_files.htm
<pre>
&lt;html>
    &lt;meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; connect-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src * blob:; media-src * blob:">
    &lt;head>
        &lt;style>
            .flt_lef{float:left;}
            .tex_rig{text-align:right;}
            .mar_r30{margin-right:30px;}
            .tbl_td_fnt_s12 td{font-size:12px;}
        &lt;/style>
        &lt;script>
            //*******************************************//
            function st_sub(){
                document.getElementById('files').addEventListener('change', handleFileSelect, false);
            }
            //*******************************************//
            function sleep(second) {
                return new Promise(resolve => {
                    setTimeout(() => {
                        resolve()
                    }, second * 1000)
                })
            }
            //*******************************************//
            async function handleFileSelect(evt){
                var str_music_list=""
                for(int_loop2=0; int_loop2 &lt; evt.target.files.length; int_loop2++){
                    auo.src = URL.createObjectURL(this.files[int_loop2]);
                    await sleep(0.5)
                    int1 = document.getElementById("auo").duration
                    await sleep(0.1)
                    str_music_list= str_music_list + "&lt;tr>&lt;td>" + this.files[int_loop2].name + "&lt;/td>&lt;td class='tex_rig'&gt;" + int1 + "&lt;/td></tr>"
                }
                music_list.innerHTML=str_music_list
                //************************************************//
                for(int_loop1=0; int_loop1&lt;evt.target.files.length;int_loop1++){
                    title.textContent=this.files[int_loop1].name
                    auo.src = URL.createObjectURL(this.files[int_loop1]);
                    await sleep(1)
                    int1 = document.getElementById("auo").duration
                    await sleep(1)
                    auo.play();
                    await sleep(int1)
                }
            }
        &lt;/script>
    &lt;/head>

        <body onload="st_sub()">
            <div class="flt_lef mar_r30">
                <span id="title"></span><br />
                <audio controls id="auo"></audio>
            </div>
        
            <div class="flt_lef">
                <input type="file" id="files" class="disp_no" name="files[]" multiple /><br />
                <table id="music_list" class="tbl_td_fnt_s12"></table>
            </div>
        </body>
&lt;/html>
</pre>

<h1>使い方</h1>
上記ソースをhtmlファイルとして開きます
![無題の図形描画.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1906297/99d63cec-fc09-2219-f12f-594ff46683c8.png)

下図画面が開くので　ファイル選択　をクリックします
![play_audio_files (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1906297/08ba8ffa-1983-05a4-9ee2-04964a267d86.png)

再生したいファイルを選択します![play_audio_files (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1906297/67c71c30-c85a-3ebe-a268-c78ae24d90c4.png)

再生が始まります。
audioタブのcontrolはonにしてますがボリュームコントロール用です。
早送りはできません。次の曲へ進むこともできません。
一時停止は表示されていますが効きません。一時停止してもしばらくすると次の曲が再生されます。
![play_audio_files (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1906297/502aa3bf-448a-2887-629e-78917cbd3423.png)