Techy's Music Player: A Simple, Customizable Client-Side Music Player

Resources Community Resources
, , , ,
#1

Techy’s music player
Techy’s music player1563×123 40 KB

A little update from developer: It’s been a while since I open-sourced something. One of my last projects, Techy’s Obby System, did pretty well and helped a lot of developers out there. However, it was heavily unoptimized due to my lack of scripting skills at the time, so I didn’t open-source too many models afterward. Recently, I was looking for a client-side music player for my game but couldn’t find a good one. So, I decided to spend some time creating this music player and open-sourcing it to save some of your time as well. Here it is!

Key features:

  • Highly customizable
  • Simple animations enhance the UI’s visual appeal
  • Easily configurable settings
  • Allows users to loop & shuffle
  • Supports album art, music name, and artist
  • Compatible with all devices

The music loader preloads all musics before appearing to ensure gapless music. You can tweak settings in the configuration script, or modify the main script if you have a good knowledge in scripting. You can get some idea about how customizable the UI & the system is from the Configuration script.

Cofiguration Script 
local Config = {
	-- Created by 0Techy
	-- Note that the music player will first preload all sounds then load. So you might not see the music player visible for a few seconds after joining
	
	ApplyScriptedTheme = true; -- Set to false if you want to manually color the UI. It will disable loop/shuffle selected animation too
	PrimaryColor = Color3.fromRGB(45, 52, 54);
	SecondaryColor = Color3.fromRGB(27, 194, 87);
	TextImageColor = Color3.fromRGB(255, 255, 255);
	BackgroundTransparency = 0.2;
	-- Tip: You can manually change the UI Corner Values
	
	ConsoleToggleButton = Enum.KeyCode.DPadUp; -- The button used to toggle the visibility of the GUI
	ConsolePause = Enum.KeyCode.DPadDown; -- Only applies when music frame is fully visible
	ConsoleNext = Enum.KeyCode.DPadRight;
	ConsolePrevious = Enum.KeyCode.DPadLeft; 
	-- Loop and Shuffle for console isn't scripted yet. Feel free to modify the script to add that.
	
	UseConfigPositions = true; -- Set to false if you don't want it to animate and want to create it yourself
	MusicPlayer_Hidden = UDim2.new(0.01, 0, 0.962, 0);
	MusicPlayer_HalfVisible = UDim2.new(0.01, 0, 0.89, 0);
	MusicPlayer_Visible = UDim2.new(0.01, 0, 0.815, 0);
	IconHoverSizeIncrease = UDim2.new(0.02, 0, 0.02, 0);
	-- Animation settings can be tweaked by some advanced scripting in VisibilityHandler (I forgot lol)
		
    StartWithRandomMusic = true; -- If false, the first music in the list plays by default. Else, plays a random one from the list.
	DefaultVolume = 0.5; 
	MusicIntervalDelay = 0.5; -- Delay after a music ends (in seconds)
	MusicInfoViewTime = 3.5; -- For how long the music player stays half visible after a music ends (in seconds)
	MobileMouseLeaveDelay = 1.5; -- Set how long the music player stays half visible after a player using mobile clicks on it. This delay allows them to fully open the music player
	ShowArtist = true;
	Debug = true;
	
	MusicList = {
		{
			SoundId = 1846575559;
			MusicName = ""; -- Leaving it empty like this will make the script automatically use the name thats used in the store
			MusicArtist = ""; -- Leaving it empty will make the script automatically use the creator name thats used in the store
			AlbumIcon = ""; -- Leaving it empty will use the default icon from the UI. Make sure to put "rbxassetid://youriconid" if you're using custom one
		};
		
		{
			SoundId = 1845756489;
			MusicName = "";
			MusicArtist = "";
			AlbumIcon = "";
		};
		
		{
			SoundId = 1835643971;
			MusicName = "";
			MusicArtist = "";
			AlbumIcon = "";
		};
		
		{
			SoundId = 1841647093;
			MusicName = "";
			MusicArtist = "";
			AlbumIcon = "";
		};
	}
}

return Config

Setup:

  • Get the model by pressing the button below
    button
  • Insert it in your game and move MusicPlayer to StarterGui
  • Open Configuration script and add some music ID (you can find in store) by following the correct format
  • Enjoy!

Showcase:

(sorry for low quality recording)

You can also test the music player out yourself in this game! Also here are some…

Screenshots

image
image1519×789 111 KB

image
image
image
image

Lastly, a heavily customized UI. ApplyScriptedTheme was still set to true, just added some UIStroke and removed some UICorner from the UI.
image

Thanks for checking my creation out. Hope it helped. Feel free to give me suggestions through replies or direct messages.

6 Likes
#2

Hello,

If it loades all music beforehand , and there are like 10 or 20 large songs… will that cause the client to need to have alot of memory and or bog it down ?

1 Like
#3

Thanks for your feedback. After some testing, I realized that it was the :GetProductInfo taking time to load info for each music. So I decided to use Spawn to invidually load the song infos seperately and prioritize loading the first song info manually. This has made the loading almost instant. Do let me know through messages if you have suggestions!

#4

Cool! Is the music game place editable? Ill check later…

#5

nice player! there is a small bug in MusicList Previous button line 299, i change it to:

Frame.Previous.MouseButton1Click:Connect(function()
	if CurrentQueue.Value >= 2 then
		CurrentQueue.Value -= 1
	else
		CurrentQueue.Value = MusicCount
	end
end)
#6

Randomize play function will call the random function cyclically causing bug, it will loop and return music 1