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

![スクリーンショット 2018-11-23 18.32.46.png](https://qiita-image-store.s3.amazonaws.com/0/77444/142d8054-5632-6919-25cb-38a63d3640e6.png)

[前回](https://qiita.com/yuppejp/items/084db977f09850a2b4cc)に引き続きMusicKit JSを使って、ブラウザからApple Musicを操作してみます。今回は、Apple Musicを検索して、アートワーク付きで検索結果を表示します。一覧からボタンを押すと再生が始まります。

# 準備
事前にMusic IDとMusicKit Private Keyが必要なので、[ブラウザだけでApple Musicを再生する](https://qiita.com/yuppejp/items/084db977f09850a2b4cc)を参考に設定をすませておきます。

# 処理の流れ
## Apple Musicの検索

[MusicKit.API](https://developer.apple.com/documentation/musickitjs/musickit/api)か[MusicKit.Library](https://developer.apple.com/documentation/musickitjs/musickit/library)を使ってkey-value形式で検索キーワードを指定すると、結果がプロミスで返されます。いい感じのオブジェクトが返ってくるので、特にパースし直すことなくtableに突っ込むことができます。今回はVue.jsを使用しました。

```javascript
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ピクセルを指定しました。

```html
<td><img v-bind:src="d.attributes.artwork.url.replace(/({w}|{h})/g, '50')"></td>
```

# コードの全容
全体の作りとしてはVue.jsの基本的な機能のみ使用し、整形のためにBootstrap4を使用しています。

```html:search.html
<!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>
```

```javascript:search.js
var vm = new Vue({
    el: '#app',
    data: {
        albums: []
    }
});
```

#さいごに
JavaScriptだけで、自分専用のApple Musicプレイヤーができちゃいます。低レベルのAPIもたくさん用意されているので、ほかにも色々とできそうです。
こんな使い方もできるよ！というのがあれば、ぜひ教えてください。

#参考
- [Accessing MusicKit Features Using JavaScript](https://developer.apple.com/documentation/musickitjs/accessing_musickit_features_using_javascript)