CodePen Embed - Cassette Tape || SVG Animation

<link href="https://fonts.googleapis.com/css2?family=Righteous&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/4d9bce4b44.js" crossorigin="anonymous"></script>
<div class="main">
  <h1>Queen's Playlist</h1>
  <div class="alert"></div>
  <svg viewbox="0 0 100 100">
    <defs>
      <filter id="shadow">
        <feDropShadow dx="0" dy="-0.3" stdDeviation="0.2"/>
      </filter>
    </defs>
    <defs>
      <filter id="shadow-2">
        <feDropShadow dx="0" dy="0" stdDeviation="0.3"/>
      </filter>
    </defs>
    
    <path d="M5 10,
             Q5 8, 7 8,
             L60 8,
             Q62 8, 62 10, 
             L62 45,
             Q62 47, 60 47, 
             L7 47, 
             Q5 47, 5 45
             L5 10" fill="#30a996"/>
    <path d="M10 15, 
             Q10 13, 12 13, 
             L55 13, 
             Q57 13, 57 15, 
             L57 35,
             Q57 37, 55 37, 
             L13 37,
             Q10 37, 10 35, 
             L10 15" fill="#e3dcaa" class="shadow-2"/>
    <path d="M15 47, 
             L18 40, 
             L50 40, 
             L53 47, 
             L15 47"
          fill="#278775"
          class="shadow"/>
    <path d="M10 20, 
             L57 20, 
             L57 25,
             L10 25" fill="#df2a13"/>
    <circle cx="8" cy="11" r="1" fill="#10493e"/>
    <circle cx="59" cy="11" r="1"fill="#10493e"/>
    <circle cx="8" cy="44" r="1" fill="#10493e"/>
    <circle cx="59" cy="44" r="1" fill="#10493e"/>
    <circle cx="23" cy="44" r="1" fill="#30a996"/>
    <circle cx="45" cy="44" r="1" fill="#30a996"/>
     <rect x="28" y="42" rx="0" ry="0" width="1.5" height="1.5" />
    <rect x="38" y="42" rx="0" ry="0" width="1.5" height="1.5"/>
    <rect x="15" y="20" rx="6" width="37" height="12" class="mid-rect"/>
    <rect x="27" y="24" width="13" height="6"/>

  <!--  middle circles-->
    <circle cx="21" cy="26" r="4.5" fill="#30a996"/>
    <circle cx="46" cy="26" r="4.5" fill="#30a996"/>
    <circle cx="21" cy="26" r="3.5" fill="#f6dfda"/>
    <circle cx="46" cy="26" r="3.5" fill="#f6dfda"/>
    <!--  animation will happen here -->
    <g class="first-g">
        <path d="M19 23, 
             L23 29" stroke="#30a996"
  stroke-width=".4" />
    <path d="M23 23, 
             L19 29" stroke="#30a996"
  stroke-width=".4" />
    <path d="M17 26, 
             L25 26" stroke="#30a996"
  stroke-width=".4" />

    <circle cx="21" cy="26" r="2" fill="#f6dfda"/>
    </g>
    <g class="second-g">
    <path d="M48 23, 
             L44 29" stroke="#30a996"
  stroke-width=".4" />
    <path d="M44 23, 
             L48 29" stroke="#30a996"
  stroke-width=".4" />
    <path d="M42 26, 
             L50 26" stroke="#30a996"
  stroke-width=".4" />
    <circle cx="46" cy="26" r="2" fill="#f6dfda"/>
    </g>

  <!--  Lip -->
    <path d="M5 45,
             L4 43,
             L4 35, 
             L5 33" fill="#10493e" /> 
    <path d="M62 45,
             L63 43,
             L63 35, 
             L62 33" fill="#10493e" /> 

  </svg>
  <div class="info">
    <p class="artist"></p>
    <p class="song">

    </p>
  </div>
  <div class="buttons">
  <button class="previous">
    <i class="fas fa-step-backward"></i>
  </button>
  <button class="play">
    <i class="fas fa-play"></i>
  </button>
  <button class="pause">
    <i class="fas fa-pause"></i>
  </button>
  <button class="next">
    <i class="fas fa-step-forward"></i>
  </button>
</div>
</div>

*{
  box-sizing: border-box;
}

body{
  background: #f6dfda;
  font-family: 'Righteous', cursive;
  color:#10493e;
}

.main{
  position: absolute;
  width: 100%;
}

h1{
  position: absolute;
  left: 180px;
  letter-spacing: 5px;
  text-shadow: 3px 3px 1px 
#c1bbbd;
}

.alert{
  position: relative;
  top: 250px;
  left:270px;
  width:130px;
  height: 60px;
  z-index: 1;
  text-align: center;
  visibility: hidden;
  padding-top: 10px;
}

.pop-up{
  visibility: visible;
}

svg{
  position: relative;
  top: -50px;
  width: 1000px;
  height: 1000px;
}

rect{
  fill:#30a996;
}

.mid-rect{
  fill: #10493e;
}

.shadow{
  filter:url(#shadow);
}

.shadow-2{
  filter:url(#shadow-2);
}

.spin {
  transform-origin: center;
  transform-box: fill-box;
  animation: rotate-wheel 8s infinite linear;
}

@keyframes rotate-wheel{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.info{
  position: relative;
  top: -940px;
  left: 100px;
  width: 450px;
  height: 10vh;
  text-align: center;
  font-size: 18px;
}

.buttons{
 position: relative;
 top: -650px;
 left: 50px;
 
}

i{
  color:#10493e;
  font-size: 30px;

}

i.fa-music{
font-size: 15px;
}

button{
  width: 140px;
  height: 50px;
  border-radius: 10px;
  outline: none;
  box-shadow: 2px 2px 3px 
#8d8d8d inset;
}

let songs = [
  {artistName: "Queen", 
  songName: "Bohemian Rhapsody - Sample", 
  url: "https://upload.wikimedia.org/wikipedia/en/f/fb/QueenBohemianRhapsody_Opera.ogg"},
  {artistName: "Queen", 
   songName: 'We Will Rock You - Sample',
   url: "https://upload.wikimedia.org/wikipedia/en/b/bc/Wewillrockyou.ogg"},
  {artistName: "Queen", 
   songName: "Don't Stop Me Know - Sample",
   url: "https://upload.wikimedia.org/wikipedia/en/d/db/Queen_-_Don%27t_Stop_Me_Now.ogg"}, 
  {artistName: "Queen", 
   songName: "I Want To Break Free - Sample",
   url: "https://upload.wikimedia.org/wikipedia/en/7/75/Queen_I_want_to_break_free.ogg"}, 
  {artistName: "Queen", 
   songName: "Another One Bites The Dust - Sample",
   url: "https://upload.wikimedia.org/wikipedia/en/3/39/Another-one-bites-the-dust--forward.ogg"}, 
  {artistName: "Queen", 
   songName: "We Are The Champions - Sample",
   url: "https://upload.wikimedia.org/wikipedia/en/1/1c/Wearethechampions.ogg"},
  {artistName: "Queen", 
   songName: "Crazy Little Thing Called Love - Sample",
   url: "https://upload.wikimedia.org/wikipedia/en/0/06/Queen_-_Crazy_Little_Thing_Called_Love.ogg"}
]

let audio = new Audio(songs[0].url);
let previousButton = document.querySelector('.previous')
let playButton = document.querySelector('.play')
let pauseButton = document.querySelector('.pause')
let nextButton = document.querySelector('.next')
let firstG = document.querySelector(".first-g")
let secondG = document.querySelector(".second-g")
let artist = document.querySelector(".artist")
let song = document.querySelector(".song")
let popUp = document.querySelector('.alert')
let musicLogo = `<i class="fas fa-music"></i>`

let currentSongIndex = 0

const spin = () => {
 firstG.classList.add('spin')
 secondG.classList.add('spin')
}

playButton.addEventListener('click', function(){
  audio.play()
  artist.innerText = currentSong().artistName
  song.innerHTML = currentSong().songName + musicLogo
  spin()
  audio.loop='true'
})

pauseButton.addEventListener('click', function(){
  audio.pause()
  firstG.classList.remove('spin')
  secondG.classList.remove('spin')
})

const currentSong = (index) => {
if(index === undefined){
  return songs[currentSongIndex]
} else if (index < songs.length ){
  artist.innerText = songs[index].artistName 
  song.innerHTML = songs[index].songName + musicLogo
 }
}

const nextSong = ()=> {
  newSongIndex = currentSongIndex + 1
  currentSong(newSongIndex)
  if(newSongIndex < songs.length){
    audio.pause()
    audio = new Audio(songs[newSongIndex].url)
    audio.play()
    audio.loop='true'
    return currentSongIndex = newSongIndex
  } else {
    popUp.classList.add('pop-up')
    popUp.innerText = "This the last song."
      setTimeout(() => {
      popUp.classList.remove('pop-up')
    }, 1000)
    return currentSongIndex
  }
  
}

const previousSong= () => {
  newSongIndex = currentSongIndex - 1
  if(newSongIndex < 0 ){
    popUp.classList.add('pop-up')
    popUp.innerText = 'This is the first song.'
    setTimeout(() => {
      popUp.classList.remove('pop-up')
    }, 1000)
    return currentSongIndex 
  } else {
    audio.pause()
    currentSong(newSongIndex)
    audio = new Audio(songs[newSongIndex].url)
    audio.play()
    audio.loop='true'
    return currentSongIndex = newSongIndex
  }
}

nextButton.addEventListener('click', function(){
 nextSong()
 spin()
})

previousButton.addEventListener('click', function(){
  previousSong()
  spin()
})

This Pen is owned by Derya Tanriverdi on CodePen.

See more by @deryatanriverdi88 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.