前回に引き続きMusicKit JSを使って、ブラウザからApple Musicを操作してみます。今回は、Apple Musicを検索して、アートワーク付きで検索結果を表示します。一覧からボタンを押すと再生が始まります。
準備
事前にMusic IDとMusicKit Private Keyが必要なので、ブラウザだけでApple Musicを再生するを参考に設定をすませておきます。
処理の流れ
Apple Musicの検索
MusicKit.APIかMusicKit.Libraryを使ってkey-value形式で検索キーワードを指定すると、結果がプロミスで返されます。いい感じのオブジェクトが返ってくるので、特にパースし直すことなくtableに突っ込むことができます。今回はVue.jsを使用しました。
function search(keyword) {
music.api.search(
keyword,
{ limit: 10, types: 'artists,albums' }).then(function (results) {
console.table(results.albums.data[0].attributes);
Vue.set(vm, 'albums', results.albums.data)
});
}
Artworkの処理
Artwork(jpeg画像)は obj.attributes.artwork.url に入っていて取り回しが良いのですが、画像サイズがプレースフォルダで可変になっていて直接imgタグに貼れないので、希望のサイズに置換します。今回は縦と横をそれぞれ50ピクセルを指定しました。
<td><img v-bind:src="d.attributes.artwork.url.replace(/({w}|{h})/g, '50')"></td>
コードの全容
全体の作りとしてはVue.jsの基本的な機能のみ使用し、整形のためにBootstrap4を使用しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- Configuring MusicKit JS -->
<script src="https://js-cdn.music.apple.com/musickit/v1/musickit.js"></script>
<title>MusicKit Features Using JavaScript</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
</head>
<body>
<div id="app">
<p></p>
<div class="container">
<div class=" input-group">
<input type="text" class="form-control" placeholder="アーティスト名" id="keyword">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" onclick=search(document.getElementById('keyword').value)>検索</button>
</div>
</div>
<table class="table">
<tr v-for="(d, i) in albums">
<td><img v-bind:src="d.attributes.artwork.url.replace(/({w}|{h})/g, '50')"></td>
<td>{{ d.attributes.name }}</td>
<td>{{ d.attributes.artistName }}</td>
<td>{{ d.attributes.releaseDate }}</td>
<td>
<button type="button" class="btn btn-link" v-bind:value="d.id" onclick=play(this.value)>▶︎</button>
<button type="button" class="btn btn-link" onclick=music.player.stop()>■</button>
</td>
</tr>
</table>
</div>
</div>
<script>
var music = null;
document.addEventListener('musickitloaded', function () {
// MusicKit global is now defined
MusicKit.configure({
developerToken: 'your developerToken',
app: {
name: 'My Cool Web App',
build: '2018.11.23'
}
});
music = MusicKit.getInstance();
// This ensures user authorization before calling play():
music.authorize().then(function () {
console.log('authorized');
});
});
function search(keyword) {
music.api.search(
keyword,
{ limit: 10, types: 'artists,albums' }).then(function (results) {
console.table(results.albums.data[0].attributes);
Vue.set(vm, 'albums', results.albums.data)
});
}
function play(id) {
music.setQueue({
album: id
}).then(function (queue) {
// Queue is instantiated and set on music player.
console.log('queue: ' + queue);
music.player.play().then(function (pos) {
console.log('pos:' + pos);
});
});
}
</script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="./search.js"></script>
</body>
</html>
var vm = new Vue({
el: '#app',
data: {
albums: []
}
});
#さいごに
JavaScriptだけで、自分専用のApple Musicプレイヤーができちゃいます。低レベルのAPIもたくさん用意されているので、ほかにも色々とできそうです。
こんな使い方もできるよ!というのがあれば、ぜひ教えてください。
#参考