Apple MusicのJavaScriptライブラリ「MusicKit JS」使って、ブラウザ上でApple Musicを再生してみます。完成画面はこんな感じです。アートワークや曲の情報も表示することができます。
（その2）に続きます。

（なんか怪しい）

必要なもの

Apple Musicのメンバーシップ
Apple Developer Programのメンバーシップ
ブラウザ

準備

MusicKit JSはDeveloper Tokenが必要です。Developer Tokenを生成するために事前にMusic IDとMusicKit Private Keyが必要なので、順番に作成していきます。

Music IDの作成

Apple DeveloperサイトのMusic ID登録を開く
https://developer.apple.com/account/ios/identifier/musicId
DescriptionとIdentifierを入力
・Music ID Description : 認証時に表示される表示名（後から変更可能)
・Identifier : 一意の識別名で逆ドメイン名が推奨

MusicKit Private Keyの作成

Apple DeveloperサイトのKey登録を開く
https://developer.apple.com/account/ios/authkey/
MusicKitにチェックを入れて、Continueをクリック
キーファイルをダウンロード
ダウンロードは1回しかできないようなので、大切に保管しておきます。

Developer Tokenの作成

apple-music-token-generatorをダウンロード

$ git clone https://github.com/pelauimagineering/apple-music-token-generator.git

music_token.pyをエディタで開いて編集する

music_token.py

# requires pyjwt (https://pyjwt.readthedocs.io/en/latest/)
# pip install pyjwt


import datetime
import jwt


secret = """-----BEGIN PRIVATE KEY-----
(AuthKey_xxxxxxxxxx.p8の内容を貼り付ける）
-----END PRIVATE KEY-----"""
keyId = "(先ほど作成したPrivate Key ID)"
teamId = "(Apple DeveloperアカウントのTeam ID)"
alg = 'ES256'

# 有効期間を変更する場合はtime_expiredを変更する
time_now = datetime.datetime.now()
time_expired = datetime.datetime.now() + datetime.timedelta(hours=12)

pyjwtとcryptographyをインストールし、music_token.pyを実行

$ sudo pip install pyjwt
$ sudo pip install cryptography

$ python music_token.py
----TOKEN----
(developer token)
----CURL----
curl -v -H 'Authorization: Bearer (developer token)' "https://api.music.apple.com/v1/catalog/us/artists/36954"

これで、Developer Tokenを取得することができました。

音楽再生用のWebページを作成

Apple　Musicのプレイリストの「トゥディズヒッツ」を再生するWebページを作成してみます。アートワークや再生時間などもいっしょに表示することができます。

ここの公式ページを参考に作成しました。
https://developer.apple.com/documentation/musickitjs/adding_musickit_features_using_html

play.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<!-- Configuring MusicKit JS -->
<meta name="apple-music-developer-token" content="(自分のdeveloper token)">
<meta name="apple-music-app-name" content="My Cool Web App">
<meta name="apple-music-app-build" content="yyyy.mm.dd">
<script src="https://js-cdn.music.apple.com/musickit/v1/musickit.js"></script>

<title>MusicKit Features Using HTML</title>
</head>
<body>
<center>

<!-- To set a queue using a playlist identifier in the Apple Music API -->
<button data-apple-music-set-queue="pl.f4d106fed2bd41149aaacabb233eb5eb">Today's hits</button>

<!-- Add Media Playback Controls -->
<button data-apple-music-pause></button>
<button data-apple-music-play></button>
<button data-apple-music-skip-to-next-item></button>
<button data-apple-music-skip-to-previous-item></button>

<!-- nowPlayingItem.artworkURL -->
<p><img data-apple-music-now-playing="artworkURL" width="300" height="300" /></p>

<!-- Default nowPlayingItem.info -->
<p data-apple-music-now-playing></p>

<!-- Add Current Playback Information -->
<p>
<time id="apple-music-current-playback-duration"></time>
<time id="apple-music-current-playback-time"></time>
<span id="apple-music-current-playback-progress"></span>
</p>

</center>
</body>
</html>

補足：setQueueするときにプレイリストのIDが必要になりますが、これはiTunesのプレイリストを開いて、プレイリストの共有>リンクのコピーで調べることができます。

Webサーバーに配置

今回はPythonの簡易Webサーバー機能を使いました。

$ sudo python -m SimpleHTTPServer
Serving HTTP on 0.0.0.0 port 8000 ...

再生してみる

ブラウザでplay.htmlを開く
http://localhost:8000/play.html
最初のアクセス時にApple　IDの認証が要求される
Apple IDとパスワードを入力するとアクセスリクエストの確認ダイアログが表示される
再生が始まる
Apple Musicのトゥディズヒッツがブラウザで聞けたー♪

さいごに

意外と簡単にブラウザ上でApple Musicを再生することができました。iTunesをインストールしなくてもPCで気軽にApple Musicを聴くことができます。
アーティストや曲の検索やレーティング付けなどもできるみたいなので、次回にチャレンジしてみたいと思います。

続きはこちら。
- ブラウザだけでApple Musicを再生する（その2）

ブラウザだけでApple Musicを再生する（その1）