Music Players & Customisation Tutorial F2U / No need Credits but please don't use this code for Pay To Use stuff without re-linking to this tutorial, I want everyone to know it's free to have music players !
If this player doesn't work it means you have an issue with the hosting website "File Garden"
Place a link to a mp3 file instead of MP3LINK You can't use YouTube link, the mp3 file have to be downloaded and hosted somewhere. A list of possible Hosting Websites is provided further down below.
Base Appearance of the Player vary depending on the browser
Where do I put the code ?
Disable "WYSIWYG" (What You See Is What You Get) which will show your page as code. and place the player code at the right place.
To help place it correctly you can for example write "aaaa" where you want to put it on your page, and then in the code mode look for the "aaaa" and replace it with the player, so it'll be at the right place !
"Ctrl+F" allow you to search for a specific word in your code, so you can use it to find the "aaaa" more easily.
95% of the time it's an issues with the link. If the link is fine : watch if there is any <em> that are right before the player code, and delete them, it might fix it. If you're still having issues, feel free to <ask for help here>.
Change "TEXT HERE' into any text you want ! Change div align="center" to div align="right" or div align="left" to place the text and player how you want. Text color will be based off the theme you're using. select the text and change the color manually if needed
Use either <div class="fixed-bottom"> or <div class="fixed-top"> to chose if you want the player up or down. Use <div align="left"> and <div align="right"> or <div align="center"> just before the code to chose the placement.
Change 'rgb(191, 255, 0)' to chose the color. <rgb generator here>. Change the number in padding:4px to change the width of the color around the player. I recommand to stay between 1 and 10.Change border-radius:40px to change the roundness of the borders ( stay between 0px and 50px )
Website Theme's Color Automatically use the website's theme color !
(Seems to works with the default themes, I'm not sure for the custom ones.)
Change 'rgb(26 140, 255)' to chose the color. <rgb generator here>. Change 'opacity:0.70' to any number between '0.01' and '1.00' to make the 'player' part more or less visible. Change border-radius:60px to change the roundness of the borders ( stay between 0px and 50px )
Colored Filters Any Colors, Squared and Rounded borders ! (Thanks Crowman for this one !)
Warning : Those Players look quite drastically different on Chrome/Firefox/Apple
so be aware the color you see might not be what others see !
PS : For custom width don't forget to change the two occurrence of "style="width:270px;height:40px;' in the code.
Change 'rgb(26 140, 255)' to chose the color. <rgb generator here>. Change border-radius:40px to change the roundness of the borders ( stay between 0px and 50px )
You can replace 'darken' by any of those others adjective for various color effects, there's too many for me to list concisely here so have fun ! ( a pretty cool one imo is difference ) darken , lighten , normal , multiply , screen , overlay , color-dodge , color-burn , hard-light , soft-light , difference , exclusion , hue , saturation , color , luminosity
Colored Inside + Ghost Controls Any Colors, Squared and Rounded borders !
Warning : When no specified width the player will take the full length of the line.If you go for custom width do not forget to change the two occurrence of "style="width:270px;height:40px;' in the code.
<div class="card bg" style="background: rgb(255, 173, 51);"><audio controls="" style="opacity:0.20;"><source src="MP3LINK"></audio></div>
<div class="card bg" style="background: rgb(77, 184, 255);width:270px;height:40px;"><audio controls="" style="opacity:0.20;width:270px;height:40px;"><source src="MP3LINK"></audio></div> <div class="card bg" style="background: rgb(255, 77, 255);width:270px;height:40px;border-radius:50px;"><audio controls="" style="opacity:0.20;width:270px;height:40px;border-radius:50px;"><source src="MP3LINK"></audio></div>
Change 'rgb(77, 184, 255)' to chose the color. <rgb generator here>. Change 'opacity:0.20' to any number between '0.01' and '1.00' to make the 'player' part more or less visible. Higher number mean less visible background colour.Change border-radius:40px to change the roundness of the borders ( stay between 0px and 50px )
Make Your Own ***this part need to be updated*** here is a player that have all the possible customisation option, edit and remove what you want or not !
<Color code>xxx, xxx, xxx (number between 0 and 255. 0=black 255=white)
text-shadow: 0px 0px 15px;
Glowing text effect. 0=none
opacity:0.99;
1.00 = 100% / 0.01 = 1%
border radius:40px;
Rounded Player. 0px=none
padding:2px;
Width of the colored outline. 0px=none
width:300px; height:35px;
Player Size
Unavailable Features
At the moment, Toyhouse block a certain number of coding features (for users safety I assume), so not all the normally available options in html will works. I tried to test several ways to make them works for each to be sure they don't, but I might have missed one that do work, so if you figure out a way, do let me know ! I do not have a premium Toyhouse account so I can only test the html option and not the CCS. - Autoplay / Autostart( Tested / seems to be blocked ) - Setting the starting volume( Tested / seem to be blocked ) - Playlist( Not Tested / assuming it would be blocked since complex coding. You can always just put a bunch of player one after another thought ! )
If you have trouble making it work or questions feel free to comment I'll try and help. Please include your code when asking for help so I can see where the problem is. No need to credit me, but do consider crediting the Musics you use !One exception ; If used in P2U templates, a link to this tutorial IS required ! (I just don't want people to think they have to pay to get a music player)
If this tutorial was helpful to you, feel free to check out my art as a thanks, I would really appreciate it !
