Spotify を VSCode 上で操作できる拡張機能「vscode-spotify」をご紹介します

#VSCode（Visual Studio Code）

#Spotify

てんとタカハシ

2020.08.14

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

テントの中から失礼します、CX事業本部のてんとタカハシです！

私が仕事中、お供にしているものと言えば、音楽。そう、Spotify なのですが、VSCode 上で Spotify を操作できる拡張機能 vscode-spotify が便利だったので、ご紹介したいと思います。

この拡張機能を使用することで、VSCode 上からプレイリストを選択して曲を再生できたり、ショートカットキーで曲をスキップできたりしちゃいます。（但し、Spotify のアプリ自体は起動しておく必要があります。）

尚、環境は macOS を前提とさせてください m(_ _)m

できること・できないこと

できること

基本的にプレイリストの再生周りができるようになります。

プレイリストの再生/停止/スキップ/戻る
プレイリスト内のシャッフル再生
プレイリストのリピート再生
音量調整

できないこと

プレイリストに登録していない曲の再生
曲単位のリピート再生
プレイリストの作成や曲の追加

などなど。再生周りの単純な機能以外はできないと思ってください。

曲を再生するまでの手順

vscode-spotify をインストールする

VSCode 上で拡張機能 vscode-spotify を検索してインストールしてください。インストールすると、アクティビティバーに Spotify のアイコンが追加されます。Spotify のアイコンを選択すると、サイドバーに PLAYLISTS と TRACKS が表示されます。

VSCode 上から Spotify にログインする

画面下のステータスバーを見ると、Spotify にログインするためのボタンが表示されているので、そちらをクリックします。

すると、ブラウザが立ち上がって、Spotify のログイン画面が表示されます。ご自身のアカウントでログインしてください。

ログインが完了すると、下記の画面が表示されるので、ブラウザを閉じて、VSCode に戻ってください。

VSCode のサイドバーに表示されている PLAYLISTS の部分をマウスオーバーすると、リロードボタンが表示されるので、それをクリックします。すると、自身が登録しているプレイリストの一覧が表示されるようになります。プレイリストを1つ選択すると、下にある TRACKS に曲の一覧が表示されます。

Spotify アプリを起動する

この状態で、曲を選択すれば再生ができそうだ！！と思いそうなのですが、残念。このままだと下記のエラーが表示されてしまいます。

ちょっと残念ポイントですが、Spotify のアプリを起動しておく必要があります。あくまでこの拡張機能がやってくれるのは VSCode 上で Spotify のアプリを操作するといったようなイメージになります。

曲を再生する

Spotify のアプリを起動したら、VSCode 上で曲を選択して再生することができます。

が、それでも先ほどと同じエラーが出てしまうことがあります。その場合は、ステータスバーに表示されている再生ボタンをクリックするか、

それでもダメであれば、Spotify のアプリ上で一旦テキトーな曲を再生してから、VSCode 上で曲を選択すると上手くいくと思います。

ステータスバーに表示するボタンを追加する

settings.json に設定を追加することで、ステータスバーに表示するボタンの種類を増やしたり、ボタンの位置を変更できたりします。ここでは、リピートボタンと、シャッフルボタンを追加していこうと思います。

settings.json に下記を追加してください。

"spotify.showToggleRepeatingButton": true,
"spotify.showToggleShufflingButton": true

その後、VSCode 上で、ウィンドウの再読み込み（コマンドパレットにて reload で検索）をすると、ステータスバーにボタンが2つ追加されていることが確認できます。

尚、ここで言っているリピートとは、プレイリストのリピートであり、曲単位でのリピートは機能としてサポートしていないようです。

ショートカットキー

初期設定の中でよく使用するショートカットキーは下記2つになると思います。

^ + ⌘ + ]: 次の曲を再生
^ + ⌘ + [: 前の曲を再生

曲の再生/停止のショートカットキーは用意されていないので、自分で設定してあげる必要があります。

おわりに

今回は、VSCode 上で Spotify を操作できる拡張機能 vscode-spotify についてご紹介しました。皆さんお好みの曲は再生できたでしょうか。

テレワークが日常的になった今、コーディングしながら音楽を聴く時間が増えた方は多いのではないでしょうか。曲の再生や停止などの単純な操作くらい Spotify のアプリを使えばいいじゃんと思うかもしれませんが、いちいち画面を切り替える必要が無くなることで、集中している頭に変なノイズを入れずに済むのが便利だと思います。

興味を持った方がいれば、是非是非使ってみてください。

今回は以上になります。最後まで読んで頂きありがとうございました！