Controller¶
You can create a custom embed and button for the Music Controller in Vocard for each guild. This Music Controller displays the current playback status, including details like whether a track is looping and the number of songs in the queue. Additionally, the controller buttons allow you to perform actions such as pause, skip, forward, rewind, and go back, eliminating the need to type commands.
Music Controller¶
Embeds¶
| Value Name | Description |
|---|---|
| channel_name | The name of the channel the bot is playing on. |
| track_name | The name of the track currently playing. |
| track_url | The url of the track currently playing. |
| track_author | The name of the author of the track currently playing. |
| track_duration | The length of the track currently playing. |
| track_thumbnail | The thumbnail of the track currently playing. |
| track_color | The color associated with the source for the currently playing track. For example, YouTube tracks are indicated in red. This color can be customized in the settings.json file |
| track_requester_id | The id of the requester for the currently playing track. |
| track_requester_name | The name of the requester for the currently playing track. |
| track_requester_mention | The mention of the requester for the currently playing track. |
| track_requester_avatar | The avatar url of the requester for the currently playing track. |
| track_source_name | The name of the source for the currently playing track. |
| track_source_emoji | The emoji of the source for the currently playing track. |
| queue_length | Number of queue lengths |
| volume | Music volume. |
| dj | DJ role. (It can be a user or role) |
| loop_mode | Current repeat mode. |
| default_embed_color | Default embed color. (color_code in settings.json) |
| bot_icon | The avatar of the bot. |
| server_invite_link | The invite url of the support server |
| invite_link | The invite url of the bot. |
| t_{name_of_the_translation} | The translation of the text based on your server settings. For example, t_buttonBack will display as 返回 if your language setting is set to Chinese. |
settings.json
"default_controller": {
"embeds": {
"active": {
"description": "**Now Playing: ```[@@track_name@@]```\nLink: [Click Me](@@track_url@@) | Requester: @@track_requester_mention@@ | DJ: @@dj@@**",
"footer": {
"text": "Queue Length: @@queue_length@@ | Duration: @@track_duration@@ | Volume: @@volume@@% {{loop_mode != 'Off' ?? | Repeat: @@loop_mode@@}}"
},
"image": "@@track_thumbnail@@",
"author": {
"name": "Music Controller | @@channel_name@@",
"icon_url": "@@bot_icon@@"
},
"color": "@@track_color@@"
},
"inactive": {
"title": {
"name": "There are no songs playing right now"
},
"description": "[Support](@@server_invite_link@@) | [Invite](@@invite_link@@) | [Questionnaire](https://forms.gle/Qm8vjBfg2kp13YGD7)",
"image": "https://i.imgur.com/dIFBwU7.png",
"color": "@@default_embed_color@@"
}
}
},
Buttons¶
This documentation provides a detailed breakdown of the custom button configuration in our application.
Button Styles¶
Each style serves a different purpose and can be used to convey the button's function more effectively. For more details on button styles, refer to the Discord ButtonStyle Documentation
| Style Name | Description |
|---|---|
| Grey | A neutral color that blends well with most themes, ideal for secondary actions. |
| Red | A bold color that signifies danger or stop actions, used for critical functions like stopping or disconnecting. |
| Blurple | A vibrant blue hue that attracts attention, suitable for primary actions like play or start. |
| Green | Represents success or positive actions. |
Button Types¶
We categorize buttons into three types for easier understanding: normal buttons, state-based buttons, and full-width select buttons.
-
Normal Buttons
Normal buttons are simple and can include an emoji, label, and optional style. Here are the details:
Button Name Description Back Skips back to the previous song. Skip Skips to the next song. Stop Disconnects the bot from your voice channel and chears the queue. Forward Forward 30 seconds in the current track. VolumeUp Increase player volume by 20%. VolumeDown Decrease player volume by 20%. Autoplay Enable or disable autoplay mode. Shuffle Randomizes the tracks in the queue. Rewind Rewind 30 seconds in the current track. Lyrics Show the lyrics of the current track in an embedded message. -
States Based Button
These buttons change based on their current state, allowing for different actions. A key example is the play-pause button.
Button Name Description States Play-Pause Resume or pause the music. pause, resume Loop Changes Loop mode. [Off, Track, Queue]off, track, queue VolumeMute Mute or unmute the player. mute, muted settings.json"buttons": [ { "loop": { "states": { "off": { "emoji": "🚫", "label": "@@t_player.buttons.loopOff@@", "style": "grey" }, "track": { "emoji": "🔁", "label": "@@t_player.buttons.loopTrack@@", "style": "green" }, "queue": { "emoji": "🔂", "label": "@@t_player.buttons.loopQueue@@", "style": "blurple" } } } } ] -
Full-Width Select Buttons
These buttons span the entire width of the row and are typically used for selecting options, like tracks or effects.
Button Name Description Additional Options Tracks If there are tracks in the queue, a drop-down list will be appear. Up to 25 tracks. max_options (int) Effects Displays all available audio effects that can be applied to the current song.
Button Example¶
settings.json
"buttons": [
{
"back": {
"emoji": "⏮️",
"label": "@@t_player.buttons.back@@"
},
"play-pause": {
"states": {
"pause": {
"emoji": "⏸️",
"label": "@@t_player.buttons.pause@@"
},
"resume": {
"emoji": "▶️",
"label": "@@t_player.buttons.resume@@"
}
}
},
"skip": {
"emoji": "⏭️",
"label": "@@t_player.buttons.skip@@"
},
"stop": {
"emoji": "⏹️",
"label": "@@t_player.buttons.leave@@",
"style": "red"
},
"add-fav": {
"emoji": "❤️",
"label": ""
}
},
{
"tracks": {
"label": "@@t_player.dropdown.trackSelect@@",
"max_options": 10
}
}
]
settings.json
"buttons": [
{
"back": {
"emoji": "⏮️",
"label": "@@t_player.buttons.back@@"
},
"play-pause": {
"states": {
"pause": {
"emoji": "⏸️",
"label": "@@t_player.buttons.pause@@"
},
"resume": {
"emoji": "▶️",
"label": "@@t_player.buttons.resume@@"
}
}
},
"skip": {
"emoji": "⏭️",
"label": "@@t_player.buttons.skip@@"
},
"stop": {
"emoji": "⏹️",
"label": "@@t_player.buttons.leave@@",
"style": "red"
},
"add-fav": {
"emoji": "❤️",
"label": "green"
}
},
{
"loop": {
"states": {
"off": {
"emoji": "🚫",
"label": "Loop"
},
"track": {
"emoji": "🔁",
"label": "Loop",
"style": "green"
},
"queue": {
"emoji": "🔂",
"label": "Loop"
}
}
},
"volumeup": {
"emoji": "🔊",
"label": "@@t_player.buttons.volumeUp@@",
"style": "blurple"
},
"volumedown": {
"emoji": "🔉",
"label": "@@t_player.buttons.volumeDown@@",
"style": "blurple"
},
"volumemute": {
"states": {
"muted": {
"emoji": "🔈",
"label": "@@t_player.buttons.volumeUnmute@@"
},
"mute": {
"emoji": "🔇",
"label": "@@t_player.buttons.volumeMute@@",
"style": "red"
}
}
}
}
{
"tracks": {
"label": "@@t_player.dropdown.trackSelect@@",
"max_options": 10
}
}
]