Apple の MusicKit JS を使って、とりあえず簡単な音楽プレーヤーを作ってみます。
その前段階として Developer Token を作成してください。下記が参考になれば幸いです。
- 公式
- このブログ内の記事
というわけで作ったのが下記の html ファイル。「Your Developer Token」となっている部分を自身で作成したものに置換すれば動くと思います。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>MusicKit JS</title>
</head>
<body>
<center>
<p><img id="artwork"/></p>
<p id="media-item-title">Display Media Item Title here</p>
<p id="album-title">Display Album Title here</p>
<p id="artist-name">Display Artist Name here</p>
<p id="playback-time">Display Playback Time here</p>
<p><button id="play">Play</button><button id="pause">Pause</button></p>
<p><button id="previous-item">Previous</button><button id="next-item">Next</button></p>
</center>
<script src="https://js-cdn.music.apple.com/musickit/v1/musickit.js"></script>
<script type="text/javascript">
// MusicKit JS の Promise を作成
const setupMusicKit = new Promise((resolve) => {
document.addEventListener('musickitloaded', function () {
// MusicKit を定義
MusicKit.configure({
developerToken: 'Your Developer Token',
app: {
name: 'My MusicKit JS App',
build: '2022.11.14'
}
})
// MusicKit のインスタンスで Promise を resolve
resolve(MusicKit.getInstance())
})
});
// MusicKit.configure() が完了するのを待って残りを実行
setupMusicKit.then(async (music) => {
// 再生中の曲の情報を表示する HTML 要素を取得
let currentSongName = document.getElementById('media-item-title');
let currentAlbumName = document.getElementById('album-title');
let currentArtistName = document.getElementById('artist-name');
let playbackTime = document.getElementById('playback-time');
// playbackTimeDidChange をトリガーにして再生時間の表示を更新
music.addEventListener('playbackTimeDidChange', () => {
playbackTime.textContent = music.player.currentPlaybackTime
});
// mediaItemDidChange をトリガーにして再生中の曲名の表示を更新
music.addEventListener('mediaItemDidChange', () => {
currentSongName.textContent = music.player.nowPlayingItem.title
});
// Play ボタンと player.play() の紐付け
let playButton = document.getElementById('play');
playButton.addEventListener('click', async () => {
await music.player.play();
// 曲を再生しつつ、紐づく情報の表示を更新
currentAlbumName.textContent = music.player.nowPlayingItem.albumName
currentArtistName.textContent = music.player.nowPlayingItem.artistName
});
// Pause ボタンと player.pause() の紐付け
let pauseButton = document.getElementById('pause');
pauseButton.addEventListener('click', () => {
music.player.pause();
});
// Previous ボタンと player.skipToPreviousItem() の紐付け
let previousButton = document.getElementById('previous-item');
previousButton.addEventListener('click', () => {
music.player.skipToPreviousItem();
});
// Next ボタンと player.skipToNextItem() の紐付け
let nextButton = document.getElementById('next-item');
nextButton.addEventListener('click', () => {
music.player.skipToNextItem();
});
// アルバムを再生 Queue に登録
await music.setQueue({
album: '1542182291' // アルバム ID を渡す
})
// アルバム情報取得のプロミス
let albumInfoPromise = music.api.album(1542182291)
albumInfoPromise.then((albumData) => {
let artworkImg = document.getElementById('artwork')
// アルバムアートの URL を取得
let artworkURL = MusicKit.formatArtworkURL(albumData.attributes.artwork, 100, 100)
// アルバムアートを表示
artworkImg.setAttribute('src', artworkURL)
})
})
</script>
</body>
</html>
大事なのは下記の記述で MusicKit JS を読み込んでいるところと。。。
<script src="https://js-cdn.music.apple.com/musickit/v1/musickit.js"></script>
下記の様な感じで MusicKit インスタンスの Promise を作っているところ。
// MusicKit JS の Promise を作成
const setupMusicKit = new Promise((resolve) => {
document.addEventListener('musickitloaded', function () {
// MusicKit を定義
MusicKit.configure({
developerToken: 'Your Developer Token',
app: {
name: 'My MusicKit JS App',
build: '2022.11.14'
}
})
// MusicKit のインスタンスで Promise を resolve
resolve(MusicKit.getInstance())
})
});
この辺りは色々やり方があるんだと思いますが、とりあえず「musickitloaded」のイベントを待って MusicKit.configure() を実行する必要があります。
あとは公式ドキュメントを見ながら色々遊べればと。。。
ちなみに Apple Music API という、アルバムや楽曲などの情報の取得を主とした API もありますが、MusicKit API の MusicKit.API クラスがその役割を担っています。