Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

スクリーンショット 2018-11-23 18.32.46.png

前回に引き続きMusicKit JSを使って、ブラウザからApple Musicを操作してみます。今回は、Apple Musicを検索して、アートワーク付きで検索結果を表示します。一覧からボタンを押すと再生が始まります。

準備

事前にMusic IDとMusicKit Private Keyが必要なので、ブラウザだけでApple Musicを再生するを参考に設定をすませておきます。

処理の流れ

Apple Musicの検索

MusicKit.APIMusicKit.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を使用しています。

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>
search.js
var vm = new Vue({
    el: '#app',
    data: {
        albums: []
    }
});

さいごに

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

参考

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away