Question

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>

我试图了解问题所在 - 每当有人打开页面时，音乐就会开始。我希望用户能够随时暂停或静音音乐。这样做很好，除了我的图标不会显示，它是隐藏的。一切都在同一个文件夹中。我正在考虑使用glyphicons，但我不知道如何在javascript中使用它们。

Answer 1

javascript样式语法有点不同。使用

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

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

我的Javascript代码无法正常运行

1 个答案: