我的Javascript代码没有'工作不正常

My Javascript code doesn't work properly

本文关键字：工作 不正常 Javascript 代码 我的      更新时间：2023-09-26

var audio, playbtn, mutebtn, seek_bar;
function initAudioPlayer() {
  audio = new Audio();
  audio.src = "nineDays.mp3";
  audio.loop = true;
  audio.play();
  // Set object references
  playbtn = document.getElementById("playpausebtn");
  mutebtn = document.getElementById("mutebtn");
  // Add Event Handling
  playbtn.addEventListener("click", playPause);
  mutebtn.addEventListener("click", mute);
  // Functions
  function playPause() {
    if (audio.paused) {
      audio.play();
      playbtn.style.background = "url(video_pause.png) no-repeat";
    } else {
      audio.pause();
      playbtn.style.background = "url(play.png) no-repeat";
    }
  }
  function mute() {
    if (audio.muted) {
      audio.muted = false;
      mutebtn.style.background = "url(speaker.png) no-repeat";
    } else {
      audio.muted = true;
      mutebtn.style.background = "url(mute.png) no-repeat";
    }
  }
}
window.addEventListener("load", initAudioPlayer); 
body {
  background: #282828;
  color: white;
  font-family: sans-serif;
}
.nav {
  display: flex;
  justify-content: flex-end;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  list-style-type: none;
}
li a {
  color: white;
  text-decoration: none;
  padding: 0 10px;
}
h1 {
  font-size: 13px;
  margin-bottom: 80%;
  margin-right: 50%;
  font-family: 'Montserrat';
}
.container {
  padding-top: 8%;
}
button {
  border: none;
  cursor: pointer;
  outline: none;
}
button#playpausebtn {
  background: url(video_pause.png) center center no-repeat;
  background-size: cover;
  margin-left: 20px;
  marging-top: 35px;
  width: 20px;
  height: 15px;
}
button#mutebtn {
  background: url(speaker.png) center center no-repeat;
  background-size: cover;
  margin-top: 35px;
  width: 25px;
  height: 20px;
}
.soundNav {
  position: absolute;
  width: 20%;
  height: 30px;
  z-index: 99999;
}
<body>
  <div class="soundNav">
    <button id="playpausebtn"></button>
    <button id="mutebtn"></button>
  </div>
  <ul class="nav nav-tabs">
    <li role="presentation"><a href="Final%20project.html">Home</a>
    </li>
    <li role="presentation"><a href="page2.html">About me</a>
    </li>
    <li role="presentation" class="active"><a href="page3.html">Work</a>
    </li>
    <li role="presentation"><a href="contactme.html">Get In Touch</a>
    </li>
  </ul>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div id="my-slider" class="carousel slide" data-ride="carousel">
          <!--Indicators dot nav-->
          <ol class="carousel-indicators">
            <li data-target="#my-slider" data-slide-to="0" class="active"></li>
            <li data-target="#my-slider" data-slide-to="1"></li>
            <li data-target="#my-slider" data-slide-to="2"></li>
            <li data-target="#my-slider" data-slide-to="3"></li>
          </ol>
          <!--wrapper for slides-->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="1.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
              <div class="carousel-caption">
                <h1> © Ed Sheeran Concert at Blossom Center</br>
                                August 2015
               </h1>
              </div>
            </div>
            <div class="item">
              <img src="5.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
              <div class="carousel-caption">
                <h1>  </br>
               </h1>
              </div>
            </div>
            <div class="item">
              <img src="6.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
              <div class="carousel-caption">
                <h1>  </br>
               </h1>
              </div>
            </div>
            <div class="item ">
              <img src="2.jpg" alt="Ed Sheeran Concert, Blossom Center, August2016" />
              <div class="carousel-caption">
                <h1> </h1>
              </div>
            </div>
            <!--controls or next and prev buttons-->
            <a class="left carousel-control" href="#my-slider" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#my-slider" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>


          </div>
        </div>
      </div>
    </div>


  </div>
</body>


</html>

我试图弄清楚问题出在哪里——每当有人打开页面，音乐就会响起。我希望用户能够随时暂停或静音音乐。这很好，只是我的图标不会显示，因为它们是隐藏的。所有内容都在同一个文件夹中。我想使用字形图标，但我不知道如何在javascript中使用它们。

javascript风格的语法略有不同。使用

mutebtn.style.backgroundImage = "url('mute.png') no-repeat";

并确保/mute.png存在并且可读

相关文章：