1.目的
英語のリスニング用の音源をiPhoneにブラウザ経由でダウンロードしたけど、
自分の手元にある、音楽再生アプリ（LineMusicとMusicアプリ）では認識してくれない。
しかも未だにめんどくさがって、PCにはItunesすらないからMusicライブラリには入れれない。
端末にアプリ追加できるほど容量に余裕がない。
＝＞ブラウザで動くものにすればいいんじゃね。
2.条件
iPhoneのダウンロードなどに入ってる音声ファイルを使って、一曲をループしたい。
できればあんまりデータを食わないほうがいい。
3.設計
超シンプル
<html>
<body>
<input type="file" id="music">
<div id="player">
<audio id="main" controls loop src="" ></audio>
</div>
<script>
document.getElementById( "music" ).addEventListener( "change", function() {
var blobUrl = window.URL.createObjectURL( this.files[0] ) ;
document.getElementById( "main" ).setAttribute("src",blobUrl)
}
) ;
</script>
</body>
</html>
仕組み
audioタグを使って実装
コントロール表示+loopで実装するだけ。
本当ならInputタグはファイル制限すべきだけど、今回はめんどくさくてしません。
Scriptの中身は、Inputの変更を検知し、オブジェクトURL生成して、プレーヤーのSRCに放り込むだけ。
かんたんでしょ。
ちなみに、なぜか動画でもいけます。（映像はないですけど）
バックグラウンド再生もできます。
なお、音声データはサーバーにアップロードされてないので、オフラインで使えそう。（PWA化すればいいのでは？）
4.注意事項
何故かIphoneのHtmlViewerくんでは読み込めませんでした。
＝＞GASにページとして追加したら動いた。
バックグラウンド再生ははじめの頃はSafariでしかできなかった。
＝＞今はChromeでも動く
まれに、バックグラウンド再生を停止すると、再開できないこともある。
アプリを再開すると治る。
改善点
ループや再生速度の設定ボタンぐらいはほしい
ホントは連続再生したい。
おしまい