网站音频播放器无法添加音乐文件的技术求助

问题背景 #

我在开发个人网站的音频播放器，已经完成了播放/暂停的UI动画，但无法在现有代码中集成音乐文件播放功能，尝试修改参考模板后仍未成功，需要帮助。

解决方案步骤 #

• 步骤1：添加HTML5 Audio元素
  在HTML结构中插入<audio>标签，指定你的音乐文件路径，设置preload="auto"让浏览器预加载音频资源，同时给元素设置ID以便JavaScript控制。

• 步骤2：绑定UI与音频播放逻辑
  初始化Audio对象，将封面的点击事件与音频的播放/暂停动作绑定，同时处理音频播放结束后的UI状态重置，确保UI与音频状态同步。

• 步骤3：适配浏览器播放政策
  现代浏览器要求必须通过用户主动交互（如点击）才能触发音频播放，现有封面点击事件刚好满足这一要求，无需额外调整。

修改后的完整代码 #

HTML部分 #

<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>
  <!-- 新增音频元素，替换src为你的音乐文件路径 -->
  <audio id="audioPlayer" preload="auto" src="你的音乐文件路径.mp3"></audio>
  <img src="img/f1.gif" class="p_img">
  <img src="img/bg.gif" class="p_img">
</div>

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

CSS部分 #

* {
  -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;
}

JavaScript部分 #

let mainCover = document.querySelector("#main_cover");
// 初始化音频播放器对象
const audioPlayer = document.getElementById('audioPlayer');

mainCover.addEventListener("click", () => {
  if (mainCover.classList.contains("active")) {
    // 暂停音频并切换UI状态
    audioPlayer.pause();
    mainCover.classList.remove("active");
    mainCover.classList.add("inactive");
  } else {
    // 播放音频并切换UI状态，捕获可能的播放错误
    audioPlayer.play().catch(err => {
      console.error('音频播放失败:', err);
    });
    mainCover.classList.remove("inactive");
    mainCover.classList.add("active");
  }
});

// 音频播放结束后自动重置UI状态
audioPlayer.addEventListener('ended', () => {
  mainCover.classList.remove("active");
  mainCover.classList.add("inactive");
});

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

imagesLoaded(posts, function () {
  document.querySelector("#cover").classList.add("loaded");
  document.querySelector("#loading").classList.add("loaded");
});

内容的提问来源于stack exchange，提问作者Keshav Goel