ちょっとだけオーディオファイルを連続再生したい
たまになのですがローカルにある音楽ファイルを
ここからここまでの複数ファイルを再生したい。という時があります。
プレイリストを作成すればもちろん再生できるのですが
アプリの起動待ちなどが入り地味に即効性がない。
過去のリストが残る。リストを削除・整理しなければならない。同期されてしまう。
ブラウザで再生をしようと思うと1曲だけ再生される。
サラッと再生したいだけなのですが・・・
このくらいであればjsでできるのでは？と作ってみました
サンプル
play_audio_files.htm
ソース
play_audio_files.htm
<html>
<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:">
<head>
<style>
.flt_lef{float:left;}
.tex_rig{text-align:right;}
.mar_r30{margin-right:30px;}
.tbl_td_fnt_s12 td{font-size:12px;}
</style>
<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 < 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 + "<tr><td>" + this.files[int_loop2].name + "</td><td class='tex_rig'>" + int1 + "</td>"
}
music_list.innerHTML=str_music_list
//*********************************************//
for(int_loop1=0; int_loop1<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)
}
}
</script>
</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>
</html>
使い方
上記ソースをhtmlファイルとして開きます
下図画面が開くので ファイル選択 をクリックします
再生したいファイルを選択します
再生が始まります。
audioタブのcontrolはonにしてますがボリュームコントロール用です。
早送りはできません。次の曲へ進むこともできません。
一時停止は表示されていますが効きません。一時停止してもしばらくすると次の曲が再生されます。
