vs-media-player

Visual Studio Code (VSCode) extension to control media players like Spotify or VLC directly from the editor.

Table of contents

1. Install
2. How to use
   • Spotify
     • Web API
   • VLC
   • Commands
     • Shortcuts

Install [↑]

Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter:

ext install vs-media-player

Or search for things like vs-media-player in your editor:

How to use [↑]

Open (or create) a settings.json file in your .vscode subfolder of your workspace or edit your global settings by using CTRL + , shortcut:

Add a media.player section and define one or more players:

{
    "media.player": {
        "players": [
            {
                "name": "My Spotify player",
                "type": "spotify",
            },

            {
                "name": "My VLC player",
                "type": "vlc",
            }
        ]
    }
}

A player entry supports the following, common properties:

Spotify [↑]

{
    "media.player": {
        "players": [
            {
                "name": "My Spotify player",
                "type": "spotify"
            }
        ]
    }
}

To extend the basic features provided by spotilocal module, take a look at the Web API section to get to known how to setup the extension for OAuth.

Web API [↑]

First of all, you have to register an app here:

After you have added the app, you need to select and edit it (My Applications on the upper left side):

Define a redirect URI that does really exist and can delegate to the PC, where your VS Code is running. The easiest way to use, is localhost, like http://localhost.

What happens is, that, when you start authorizing, your browser is open with a Spotify address, where you are asked, if your account wants to be connected with the app, you have registered:

The extension will request for the following scopes / permissions:

• playlist-read-collaborative
• playlist-read-private
• streaming
• user-library-read
• user-read-playback-state

At the same time a HTTP server is started from VS Code on your local machine, that will wait for Spotify, which will connect to that server, when you click on OK.

Spotify will send an OAuth code to that server, that makes it possible to extend the feature list with the help of Web API:

Now copy all app data to your media.player settings in VS Code:

{
    "media.player": {
        "players": [
            {
                "name": "My Spotify player",
                "type": "spotify",

                "clientID": "<Client ID>",
                "clientSecret": "<Client Secret>",
                "redirectURL": "<Redirect URI>"
            }
        ]
    }
}

An entry supports the following, additional settings:

To start the authorization process, click on the following, yellow button in your status bar:

VLC [↑]

To control your local VLC player, you have to activate Lua HTTP service.

First select Tools >> Preferences in the main menu:

Show all settings and select the node Interface >> Main interfaces by activating Web in the Extra interface modules group:

In the sub node Lua define a password in the Lua HTTP:

Now save the settings and restart the application.

By default the HTTP service runs on port 8080.

If you already run a service at that port, you can change it by editing the vlcrc file, that contains the configuration. Search for the http-port value, change it (and uncomment if needed) for your needs (you also have to restart the player after that).

Look at the FAQ (search for Where does VLC store its config file?) to get information about where vlcrc is stored on your system.

Now update your settings in VS Code:

{
    "media.player": {
        "players": [
            {
                "name": "My VLC player",
                "type": "vlc",

                "password": "myPassword",
                "port": 8080
            }
        ]
    }
}

In that example, you can open localhost:8080/requests/status.xml to check your configuration. Use the password from the settings and leave the username field blank.

An entry supports the following, additional settings:

Commands [↑]

Press F1 to open the list of commands and enter one of the following commands:

Shortcuts [↑]

If you want to define shortcuts / hotkeys for one or more of the upper commands, have a look at the VS Code article Key Bindings for Visual Studio Code.