Apple MusicのJavaScriptライブラリ「MusicKit JS」使って、ブラウザ上でApple Musicを再生してみます。完成画面はこんな感じです。アートワークや曲の情報も表示することができます。
[（その2）]
(https://qiita.com/yuppejp/items/95cf03f047d842bf7ab3)に続きます。
（なんか怪しい）
#必要なもの
- 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をエディタで開いて編集する
# 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
<!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）]
(https://qiita.com/yuppejp/items/95cf03f047d842bf7ab3)
##参考
- [MusicKit JS | Apple Developer Documentation]
(https://developer.apple.com/documentation/musickitjs) - Getting Keys and Creating Tokens | Apple Developer Documentation
- [iOS 11] Apple Music APIにアクセスするために必要な作業について #WWDC17 ｜ DevelopersIO