Unable to add music file in audio player

user_17018529 0
Viewed 43

I working on Audio Player for my website so I designed this play and pause animation for UI of audio player but I am having trouble adding an music file into this code. I also tried using some code from an template(https://codepen.io/himalayasingh/pen/QZKqOX) on the following code I made but it didn't workout. Thanks in advance.

let mainCover = document.querySelector("#main_cover");

mainCover.addEventListener("click", () => {
  if (mainCover.classList.contains("active")) {
    mainCover.classList.remove("active");
    mainCover.classList.add("inactive");
  } else {
    mainCover.classList.remove("inactive");
    mainCover.classList.add("active");
  }
});

let posts = document.querySelectorAll(".p_img");

imagesLoaded(posts, function () {
  document.querySelector("#cover").classList.add("loaded");
  document.querySelector("#loading").classList.add("loaded");
});
* {
  -webkit-tap-highlight-color: transparent;
}

*:focus {
  outline: none;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: #000;
}

#cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
}

#cover.loaded {
  display: block;
}

#loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000;
  z-index: 125;
}

#loading:before {
  content: "Loading App ...";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  color: #fff;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  animation: blink 1.5s ease 0s infinite;
  transform: translateY(-50%);
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

#loading.loaded {
  display: none;
}

.p_img {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  opacity: 0;
}

.center {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  margin: 0 auto;
  transform: translateY(-50%);
}

#app {
  width: 300px;
  margin: 0 auto;
}

#main_cover {
  position: relative;
  display: block;
  width: 300px;
  height: 300px;
  border: 0;
  border-radius: 50%;
  background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/f1.gif);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  cursor: pointer;
  overflow: hidden;
  transition: 0.1s ease transform;
}

#main_cover:active {
  transform: scale(0.9);
}

#main_cover.active {
  background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/bg.gif);
}

#main_cover.inactive {
  background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/f1.gif);
}

#main {
  width: 54px;
  height: 60px;
  overflow: hidden;
}

.bar {
  position: absolute;
  width: 8px;
  background-color: #fff;
  border-radius: 10px;
  transition: 0.4s ease transform, 0.4s ease top, 0.4s ease bottom;
}

#_1 {
  top: 0;
  bottom: 0;
}

#_2 {
  top: -13px;
  left: 23px;
  height: 60px;
  transform: rotateZ(-60deg) translateY(0px);
}

#_3 {
  top: 13px;
  left: 23px;
  height: 60px;
  transform: rotateZ(60deg) translateY(0);
}

#_4,
#_5 {
  top: 27px;
  right: 0;
  bottom: 27px;
}

#main_cover.active #_2 {
  transform: rotateZ(-60deg) translateY(53px);
}

#main_cover.active #_3 {
  transform: rotateZ(60deg) translateY(-53px);
  transition-delay: 0.5s;
}

#main_cover.active #_4 {
  bottom: 0;
}

#main_cover.active #_5 {
  top: 0;
  transition-delay: 0.5s;
}

#main_cover.inactive #_2 {
  transform: rotateZ(-60deg) translateY(0);
}

#main_cover.inactive #_3 {
  transform: rotateZ(60deg) translateY(0);
  transition-delay: 0.5s;
}

#main_cover.inactive #_4 {
  bottom: 27px;
}

#main_cover.inactive #_5 {
  top: 27px;
  transition-delay: 0.5s;
}

#app_info {
  position: relative;
  text-align: center;
  padding: 30px 0;
}

#app_info span {
  display: inline-block;
  color: #adadad;
  font-size: 14px;
}
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<div id="cover">
  <div id="app" class="center">
    <div id="main_cover">
      <div id="main" class="center">
        <div class="bar" id="_1"></div>
        <div class="bar" id="_2"></div>
        <div class="bar" id="_3"></div>
        <div class="bar" id="_4"></div>
        <div class="bar" id="_5"></div>
      </div>
    </div>

    <div id="app_info"><span>Radhey Sada Mujh Par</span></div>
  </div>
  <img src="img/f1.gif" class="p_img">
  <img src="img/bg.gif" class="p_img">
</div>

<div id="loading"></div>

css html javascript
1 Answers

I added some simple audio code to make your buttons work. Here is the audio element added to your HTML:

<audio id="audio_player" controls>
  <source src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/2.mp3" type="audio/mpeg">
  <p>Your browser doesn't support HTML5 audio. Here is
     a <a href="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/2.mp3">link to the audio</a> instead.</p>
</audio>

Then, you need to get the audio_player in the JavaScript code with:

let audioPlayer = document.querySelector("#audio_player");

and then play and pause it with audio_player.play() and audio_player.pause()

Finally, you need to hide the audio element as you don't need it with a bit of CSS:

audio {
  display: none;
}

Here is a link to: more information about audio

let mainCover = document.querySelector("#main_cover");
let audioPlayer = document.querySelector("#audio_player");

mainCover.addEventListener("click", () => {
  if (mainCover.classList.contains("active")) {
    mainCover.classList.remove("active");
    mainCover.classList.add("inactive");
    audio_player.pause();
  } else {
    mainCover.classList.remove("inactive");
    mainCover.classList.add("active");
    audio_player.play();
  }
});

let posts = document.querySelectorAll(".p_img");

imagesLoaded(posts, function() {
  document.querySelector("#cover").classList.add("loaded");
  document.querySelector("#loading").classList.add("loaded");
});
* {
  -webkit-tap-highlight-color: transparent;
}

*:focus {
  outline: none;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color: #000;
}

audio {
  display: none;
}

#cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
}

#cover.loaded {
  display: block;
}

#loading {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000;
  z-index: 125;
}

#loading:before {
  content: "Loading App ...";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  color: #fff;
  font-size: 14px;
  line-height: 14px;
  text-align: center;
  animation: blink 1.5s ease 0s infinite;
  transform: translateY(-50%);
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

#loading.loaded {
  display: none;
}

.p_img {
  position: fixed;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  opacity: 0;
}

.center {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  margin: 0 auto;
  transform: translateY(-50%);
}

#app {
  width: 300px;
  margin: 0 auto;
}

#main_cover {
  position: relative;
  display: block;
  width: 300px;
  height: 300px;
  border: 0;
  border-radius: 50%;
  background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/f1.gif);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  cursor: pointer;
  overflow: hidden;
  transition: 0.1s ease transform;
}

#main_cover:active {
  transform: scale(0.9);
}

#main_cover.active {
  background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/bg.gif);
}

#main_cover.inactive {
  background-image: url(https://himalayasingh.github.io/audio-player-play-and-pause-animation-1/img/f1.gif);
}

#main {
  width: 54px;
  height: 60px;
  overflow: hidden;
}

.bar {
  position: absolute;
  width: 8px;
  background-color: #fff;
  border-radius: 10px;
  transition: 0.4s ease transform, 0.4s ease top, 0.4s ease bottom;
}

#_1 {
  top: 0;
  bottom: 0;
}

#_2 {
  top: -13px;
  left: 23px;
  height: 60px;
  transform: rotateZ(-60deg) translateY(0px);
}

#_3 {
  top: 13px;
  left: 23px;
  height: 60px;
  transform: rotateZ(60deg) translateY(0);
}

#_4,
#_5 {
  top: 27px;
  right: 0;
  bottom: 27px;
}

#main_cover.active #_2 {
  transform: rotateZ(-60deg) translateY(53px);
}

#main_cover.active #_3 {
  transform: rotateZ(60deg) translateY(-53px);
  transition-delay: 0.5s;
}

#main_cover.active #_4 {
  bottom: 0;
}

#main_cover.active #_5 {
  top: 0;
  transition-delay: 0.5s;
}

#main_cover.inactive #_2 {
  transform: rotateZ(-60deg) translateY(0);
}

#main_cover.inactive #_3 {
  transform: rotateZ(60deg) translateY(0);
  transition-delay: 0.5s;
}

#main_cover.inactive #_4 {
  bottom: 27px;
}

#main_cover.inactive #_5 {
  top: 27px;
  transition-delay: 0.5s;
}

#app_info {
  position: relative;
  text-align: center;
  padding: 30px 0;
}

#app_info span {
  display: inline-block;
  color: #adadad;
  font-size: 14px;
}
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<div id="cover">
  <div id="app" class="center">
    <div id="main_cover">
      <div id="main" class="center">
        <div class="bar" id="_1"></div>
        <div class="bar" id="_2"></div>
        <div class="bar" id="_3"></div>
        <div class="bar" id="_4"></div>
        <div class="bar" id="_5"></div>
      </div>
    </div>

    <div id="app_info"><span>Radhey Sada Mujh Par</span></div>
  </div>
  <img src="img/f1.gif" class="p_img">
  <img src="img/bg.gif" class="p_img">
</div>
<audio id="audio_player" controls>
  <source src="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/2.mp3" type="audio/mpeg">
  <p>Your browser doesn't support HTML5 audio. Here is
     a <a href="https://raw.githubusercontent.com/himalayasingh/music-player-1/master/music/2.mp3">link to the audio</a> instead.</p>
</audio>
<div id="loading"></div>

user_185953210
Related