Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div id='musicplayer'>
- <div id='musicpixel'>
- <img src='https://media.discordapp.net/attachments/1011654476983177419/1076918588788715620/3a8d8f51.png'>
- <div class='overlay'>
- <div class='playpause'><i class="fas fa-play"></i></div>
- </div>
- </div>
- <div id='musictitle'>
- <span class='marquee'>this is draggable on desktop . . .</span>
- </div>
- </div>
- <audio id='musicsrc' loop src='https://cdn.discordapp.com/attachments/1011654612551487558/1020593805671542815/Knights_the_Phantom_Thief.mp3'></audio>
- <style>
- #musicplayer{
- display:grid;
- grid-template-columns:20px auto;
- align-items:center;
- width: 90px;
- font-family:handy;
- font-size:11px;
- color:#8ba9da;
- line-height:140%;
- border: 1px solid #8ba9da;
- border-radius: 3px;
- background:white;
- }
- #musictitle{
- font-family:handy;
- overflow: hidden;
- white-space: nowrap;
- display:inline-block;
- width: calc(100% - 10px - 1px);
- margin-left: calc(10px + 1px);
- }
- #musicpixel{
- width:120%;
- paddin-top:0px;
- position:relative;
- min-height: 15px;
- background:white;
- border-right: 1px solid #8ba9da;
- }
- .overlay {
- opacity:0;
- position:absolute;
- top:0;
- left:0;
- text-align:center;
- width:100%;
- height:100%;
- transition:0.3s ease;
- background: white;
- }
- #musicplayer:hover .overlay {
- opacity: 1;
- transition:0.3s ease;
- }
- .playpause{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-40%, -50%);
- }
- .playpause:hover{
- cursor:help;
- }
- #musicpixel img{
- display:block;
- }
- .marquee{
- display: inline-block;
- padding-left: 100%;
- animation: marquee 5s linear infinite;
- }
- @keyframes marquee{
- 0% {
- transform: translate(0, 0);
- }
- 100% {
- transform: translate(-100%, 0);
- }
- }
- /* end of music player */
- </style>
- <script>
- document.querySelector('.playpause').addEventListener('click', playpause);
- function playpause(){
- if(document.querySelector('.playpause').innerHTML == '<i class="fas fa-play"></i>'){
- document.querySelector('#musicsrc').play();
- document.querySelector('.playpause').innerHTML = '<i class="fas fa-pause"></i>';
- } else{
- document.querySelector('#musicsrc').pause();
- document.querySelector('.playpause').innerHTML = '<i class="fas fa-play"></i>';
- }
- }
- </script>
- <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
- <link rel="stylesheet" href="/resources/demos/style.css">
- <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
- <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
- <script>
- $( function() {
- $( "#musicplayer" ).draggable();
- } );
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement