8
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-11-23

スクリーンショット 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もたくさん用意されているので、ほかにも色々とできそうです。
こんな使い方もできるよ!というのがあれば、ぜひ教えてください。

#参考

8
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?