Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <head>
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
- </head>
- <style>
- #musicplayer {
- display:grid;
- grid-template-columns:25px auto;
- align-items:center;
- left:10px;
- bottom: 2em;
- width: 90%;
- position: relative;
- font-family: pixel;
- font-size:14px;
- line-height:100%;
- background:white;
- border: 1px solid #000;
- }
- @media only screen and (max-width: 600px) {
- #musicplayer {
- position: relative;
- bottom: 1.875em;
- left:8px;
- }
- }
- #musictitle{
- overflow: hidden;
- white-space: nowrap;
- display:inline-block;
- width: calc(100% - 10px - 1px);
- margin-left: calc(10px + 1px);
- }
- #musicpixel{
- width:100%;
- padding:4px;
- position:relative;
- min-height: 1px;
- background:white;
- border-right: 1px solid black;
- }
- .overlay {
- opacity:0;
- position:relative;
- top:-5px;
- left:-5px;
- text-align:center;
- width:60%;
- height:70%;
- transition:0.3s ease;
- background:white;
- }
- #musicplayer:hover .overlay {
- opacity: 1;
- transition:0.3s ease;
- }
- .playpause{
- position: absolute;
- top: 50%;
- left: 80%;
- transform: translate(-50%, -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);
- }
- }
- </style>
- <div id='musicplayer'>
- <div id='musicpixel'>
- <img src='https://static.tumblr.com/rltvkjt/jwflmr3vh/marcadores71.gif'>
- <div class='overlay'>
- <div class='playpause'><i class="fas fa-play"></i></div>
- </div>
- </div>
- <div id='musictitle'>
- <span class='marquee'>my satisfaction by ive </span>
- </div>
- </div>
- <audio id='musicsrc' loop src='https://dl.dropbox.com/s/7ikkgtq483uvjyv/SHOOT%21.mp3'></audio>
- <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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement