今回は、同じサーバーにて領域展開中の
naf.f5.siで公開されている、音楽プレイヤーを見ていく。
※htmlの勉強はQiitaとかでやってください。ここを見ても特に勉強にはなりません。
まずは、どんな構造かをご覧いただこう。
player.htm
<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title>Instant Player</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.2/Sortable.min.js"></script></head>
<body style="font-family:sans-serif;background:#121212;color:#fff;text-align:center;margin:0;padding:20px">
<h1>Instant Music Player</h1>
<div style="max-width:400px;margin:auto;background:#1E1E1E;padding:15px;border-radius:10px">
<label for="f" style="display:inline-block;background-color:dodgerblue;color:white;padding:10px 140px;border-radius:5px;cursor:pointer;font-size:16px;text-align:center;width:auto;">ファイルを選択</label>
<input type="file" id="f" accept=".mp3,.ogg,.wav,.aac,.zip" multiple style="display:none">
<div id="n" style="margin-top:10px;font-size:14px;color:#888;word-wrap:break-word"></div>
<ul id="p" style="list-style:none;padding:0"></ul>
<audio id="a" controls style="width:100%;margin:5px 0;padding:10px;border:none;border-radius:5px;margin-left:-10px;"></audio>
<button id="b1" style="width:100%;margin:5px 0;padding:10px;border:none;border-radius:5px;background:dodgerblue;color:#fff;cursor:pointer">I◀︎◀︎</button>
<button id="b2" style="width:100%;margin:5px 0;padding:10px;border:none;border-radius:5px;background:dodgerblue;color:#fff;cursor:pointer">▶</button>
<button id="b3" style="width:100%;margin:5px 0;padding:10px;border:none;border-radius:5px;background:dodgerblue;color:#fff;cursor:pointer">I I</button>
<button id="b4" style="width:100%;margin:5px 0;padding:10px;border:none;border-radius:5px;background:dodgerblue;color:#fff;cursor:pointer">▶︎▶︎I</button>
<button id="b5" style="width:100%;margin:5px 0;padding:10px;border:none;border-radius:5px;background:dodgerblue;color:#fff;cursor:pointer">Loop OFF</button>
<button id="b6" style="width:100%;margin:5px 0;padding:10px;border:none;border-radius:5px;background:dodgerblue;color:#fff;cursor:pointer">Shuffle OFF</button>
</div>
<script>
const $=i=>document.getElementById(i),f=$("f"),a=$("a"),p=$("p"),n=$("n"),b1=$("b1"),b2=$("b2"),b3=$("b3"),b4=$("b4"),b5=$("b5"),b6=$("b6");
let q=[],c=0,r=false,s=false;
const save=()=>localStorage.setItem("playlist",JSON.stringify(q));
const load=()=>{(JSON.parse(localStorage.getItem("playlist")||"[]")).forEach(({name:n,url:u})=>{q.push({name:n,url:u});add(n,u)});};
const add=(n,u)=>{const li=document.createElement("li");li.dataset.url=u;li.style.cssText="background:#333;margin:5px 0;padding:10px;border-radius:5px;display:flex;justify-content:space-between;align-items:center";li.innerHTML=`${n}<button style='background:mediumblue;color:#fff;width:60px;border-radius:3px;cursor:pointer'>✖</button>`;li.querySelector("button").onclick=()=>{if(u===q[c]?.url)a.pause();q=q.filter(t=>t.url!==u);li.remove();save();};p.appendChild(li);};
const play=i=>{if(!q[i])return;a.src=q[i].url;a.play();[...p.children].forEach(li=>li.style.background="#333");[...p.children].find(li=>li.dataset.url===q[i].url).style.background="dodgerblue";c=i;};
const next=()=>{c=s?Math.floor(Math.random()*q.length):c+1;if(c>=q.length)c=r?0:q.length-1;play(c);};
const prev=()=>{c=s?Math.floor(Math.random()*q.length):c-1;if(c<0)c=r?q.length-1:0;play(c);};
f.onchange=async e=>{for(const file of e.target.files){if(file.name.endsWith(".zip")){const z=await JSZip().loadAsync(file);for(const n in z.files){const f=z.files[n];if(!f.dir&&/\.(mp3|ogg|wav|aac)$/i.test(n)){const bl=await f.async("blob"),u=URL.createObjectURL(new File([bl],n));q.push({name:n,url:u});add(n,u);}}}else if(/\.(mp3|ogg|wav|aac)$/i.test(file.name)){const u=URL.createObjectURL(file);q.push({name:file.name,url:u});add(file.name,u);}}save();if(q.length===1)play(0);};
b2.onclick=()=>a.play();
b3.onclick=()=>a.pause();
b4.onclick=next;
b1.onclick=prev;
b5.onclick=()=>{r=!r;b5.textContent=r?"Loop ON":"Loop OFF"};
b6.onclick=()=>{s=!s;b6.textContent=s?"Shuffle ON":"Shuffle OFF"};
a.onended=next;
new Sortable(p,{animation:150,onUpdate:()=>{q=[...p.children].map(li=>{const u=li.dataset.url,t=q.find(x=>x.url===u);return{name:t.name,url:u};});save();}});
load();
</script></body></html>
これでもだいぶ軽くした方だが、やっぱりめちゃめちゃごつい。
このhtmlでは、
- 再生・停止(当たり前)
- ドラッグして並び替え
- トラック送り
- ランダム再生
- ループ再生or一番下でスタック
仕組みは詳細に書くのがめんどくさいので多少端折るが、
1.htmlデフォルトのaudio(音声プレイヤー)を配置
2.inputを用意し、音声ファイルを読み込ませる
3.読み込んだ音声ファイルを保存し、javascriptでaudioに適用
と、ざっとこんな感じである。
特に何も難しいことはしていない。
が、html3.2ぐらいのコードあえて合わせたり、インデントなどを極限まで削ったり、CSSをゼロにしたりしたので、
かなり見づらくなっている。
特筆すべきこともあまりないので、今回はここまで。
追記：この音楽プレーヤーのコードは勝手に使って大丈夫です。
コメント