######                                     #####                                           
#     #  ####   ####  #####  ####  #####  #     #  ####  #####  ###### ######  ####  #    #
#     # #    # #    #   #   #    # #    # #       #    # #    # #      #      #    # #    #
#     # #    # #        #   #    # #    #  #####  #      #    # #####  #####  #      ######
#     # #    # #        #   #    # #####        # #      #####  #      #      #      #    #
#     # #    # #    #   #   #    # #   #  #     # #    # #   #  #      #      #    # #    #
######   ####   ####    #    ####  #    #  #####   ####  #    # ###### ######  ####  #    #

If you want a music player on your CSS profile or website, here's one I made earlier. Simply Ctrl+C the code on your profile and replace the .mp3! There is an example on the bottom right.

You can also move the position of the (fixed) player by changing the "bottom:0;right:0;" to different directions and values, e.g. "top:0;right:0" - and make sure to replace all mentions of "---URL for MP3 file---" with a URL to your require mp3 file


[demo] Non-draggable version:

<div style="font-family:monospace;text-align:center; background:#fff;color:#000;position:fixed; :-;bottom:0;right:0;:-; width:300px;border:1px solid black;">Music Player [<a href="---URL for MP3 file---" style="color:#555; animation:none;">source</a>]<br /><audio preload="auto" controls src="---URL for MP3 file---"></audio></div>

[demo] Draggable version (requires <script> tag):

<div style="font-family:monospace;text-align:center; background:#fff;color:#000;position:absolute; :-;bottom:0;right:0; :-;width:300px;height:80px;border:1px solid black;z-index: 9;" id="--mu"><span style="cursor: move;z-index: 10;" id="--muh">Music Player [<a href="---URL for MP3 file---" style="color:#555; animation:none;">source</a>]</span><br /><audio preload="auto" controls src="---URL for MP3 file---"></audio></div><script>dr(document.getElementById("--mu"));function dr(elmnt) {var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;if (document.getElementById(elmnt.id + "h")) {document.getElementById(elmnt.id + "h").onmousedown = dragMouseDown;} else {elmnt.onmousedown = dragMouseDown;}function dragMouseDown(e) {e = e || window.event;e.preventDefault();pos3 = e.clientX;pos4 = e.clientY;document.onmouseup = closeDragElement;document.onmousemove = elementDrag;}function elementDrag(e) {e = e || window.event;e.preventDefault();pos1 = pos3 - e.clientX;pos2 = pos4 - e.clientY;pos3 = e.clientX;pos4 = e.clientY;elmnt.style.top = (elmnt.offsetTop - pos2) + "px";elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";}function closeDragElement() {document.onmouseup = null;document.onmousemove = null;}}</script>