javascript - 无法在音频播放器中添加音乐文件

标签 javascript html css

我为我的网站开发音频播放器，因此我为音频播放器的 UI 设计了此播放和暂停动画，但我在将音乐文件添加到此代码中时遇到问题。我还尝试在我编写的以下代码中使用模板( https://codepen.io/himalayasingh/pen/QZKqOX )中的一些代码，但没有成功。提前致谢。

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>

最佳答案

我添加了一些简单的音频代码来使您的按钮正常工作。以下是添加到 HTML 中的 audio 元素:

<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>

然后，您需要在 JavaScript 代码中获取 audio_player:

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

然后使用audio_player.play()和audio_player.pause()播放和暂停

最后，您需要隐藏 audio 元素，因为您不需要使用一些 CSS:

audio {
  display: none;
}

这里是一个链接: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>

关于javascript - 无法在音频播放器中添加音乐文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73268298/

上一篇：R Shiny Leaflet addLegend() 指定标签顺序

下一篇：c# - 如何从列表列表中选择项目

相关文章：

css - 如何使 div 与父级高度相同(显示为表格单元格)

javascript - 向下滚动时，容器Div溢出将被裁剪

javascript - 如何更改按钮的颜色，以便在使用 jQuery 单击按钮时更改为另一种颜色？

javascript - AngularJS:将服务变量绑定(bind)到 Controller $scope 上的值

javascript - 动态调整iFrame高度动态改变内容高度(里面有解释)

javascript - 拆分 PHP 和 HTML 标签并在 JavaScript 中将其合并在一起

css - 如何更改下拉菜单中插入符号的颜色？

javascript - 使用 JavaScript 进行验证

javascript - 正确获取并显示 JSON 数据，没有 "undefined"

javascript - 如何使导航栏仅在移动 View 中折叠

©2024 IT工具网  联系我们