今日は、JavaScriptで「プレイリストを選択した曲から連続再生する音楽プレイヤー」のコードを紹介します。
用途としては、サーバに音楽ファイルを置いて、それをブラウザ上から連続再生する、というものです。
ローカルなら適当な音楽再生ソフトを使ってプレイリスト作るだけですが、サーバ上に置いておけば、端末内に音楽ファイルが不要で、どこでも聞けるのがメリットです。
実際にはPHPでディレクトリ内の音楽ファイルを取得した上で、必要に応じて並び替えやmp3tagの取得などをします。
では早速、Edgeに内蔵しているCopilotでコードを生成します。
Copilotで生成する
プレイリストをクリックして選択した曲から連続再生し、タイトル表示、時間表示機能を持つ音楽プレイヤーのHTMLとJavaScriptのコードをおしえて
これで完成、といきたかったのですが生成してみると、曲の再生位置が変更できない仕様だったので、<audio>タグを使うように指示してみました。
ですが、これもうまく行かず、次の曲がなぜか自動的に再生されないので、最初のコードを元に、<audio>タグを使って改修しました。
最初のコードを表示するとこんなの↓（1個目が再生進捗バー、2個目が音量バー）
<audio>タグだとこうなる↓
改修したものがこちら。
<html>
<body>
<div id="player">
<div id="songTitle"> </div>
<audio id="audioPlayer" controls="controls"></audio>
<ul id="playlist">
<li data-src="song1.mp3">Song 1</li>
<li data-src="song2.mp3">Song 2</li>
<li data-src="song3.mp3">Song 3</li>
</ul>
</div>
<script>
// UI要素を取得
var songTitle = document.getElementById('songTitle');
var playlistItems = document.querySelectorAll('#playlist li');
var audioPlayer = document.getElementById('audioPlayer');
// プレイリストの項目をクリックしたらその曲を再生
playlistItems.forEach(function(item, index) {
item.addEventListener('click', function() {
audioPlayer.src = this.getAttribute('data-src');
audioPlayer.play();
songTitle.textContent = this.textContent;
currentSong = index;
});
});
playlist.addEventListener('click', function (e) {
if (e.target && e.target.nodeName === 'LI') {
audioPlayer.src = e.target.getAttribute('data-src');
audioPlayer.play();
}
});
audioPlayer.addEventListener('ended', function () {
currentSong++;
if (currentSong == playlistItems.length) currentSong = 0;
audioPlayer.src = playlistItems[currentSong].getAttribute('data-src');
audioPlayer.play();
songTitle.textContent = playlistItems[currentSong].textContent;
});
// 初期音量調節
audioPlayer.volume = 0.3;
</script>
</body>
</html>
シンプルですが、作業がてら音楽を流すには十分です。
ぜひお使いください。
本日は以上です！
コメント