Audio Player on Hover

by ashleycam3ron

HTML

<script src="https://dl.dropbox.com/s/y64wjnm96v3k021/audio.js"></script>
<div id="player">
  <a class="pulse" id="sydney" href="https://bewildrewild.org/wp-content/uploads/SydneyPursel_Seed-Bomb.mp3">
    <audio id="audio" preload="auto">
      <source src="https://bewildrewild.org/wp-content/uploads/SydneyPursel_Seed-Bomb.mp3" type="audio/mpeg"/>
    </audio>
  </a>

  <a class="pulse" id="virginia" href="https://bewildrewild.org/wp-content/uploads/Virginia-Kovach-Rewilding-Poem.mp3">
    <audio id="audio" preload="auto">
      <source src="https://bewildrewild.org/wp-content/uploads/Virginia-Kovach-Rewilding-Poem.mp3" type="audio/mpeg">
    </audio>
  </a>
</div>

CSS

body {
  background: #000;
}

.pulse {
  position: absolute;
  transition: all 0.5s ease;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0px 0px 13px white, 0 0 9px #1891f2, 0 0 14px #1891f2;
  background-color: white;

}

.pulse:hover {
  background-color: #00fff3;
  transform: scale(1.5);
  margin: -5px;
}

.pulse:before,
.pulse:after{
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -7.5px;
  margin-left: -7.55px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border-style: solid;
  border-width: .5px;
  border-color: white;
  box-sizing: border-box;
  -webkit-animation: scale-before 3.5s infinite ease;
  animation: scale-before 3.5s infinite ease;
}

.pulse:after {
  -webkit-animation: scale-after 2s infinite 0.3s;
  animation: scale-after 2s infinite 0.3s;
}

@keyframes scale-before {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }

  40% {
    opacity: 0.5;
  }

  100% {
    -webkit-transform: scale(2);
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes scale-after {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }

  40% {
    opacity: 0.5;
  }

  100% {
    -webkit-transform: scale(3);
    transform: scale(3);
    opacity: 0;
  }
}

#sydney {
  top: 46%;
  left: 46%;
}
#virginia{
  top: 65%;
  left: 65%;
}

JavaScript

$('#player a').hover(
    function() {
        sound = $(this).children()[0];
        sound.play();
    }, function() {
        sound.pause();
        //sound.currentTime = 0;
    }
);