javascript - 无法解决javascript的音频搜索

Question

我正在使用 HTML 和 JavaScript 制作音频播放器。我也在使用 Bootstrap，但是当我想寻找播放器的音频时，连接 Bootstrap 时寻找不起作用。没有 Bootstrap 寻求作品。请帮我弄清楚如何寻找音频。

这是我的index.html

var audio, playbtn, mutebtn, seekslider, volumeslider, seeking = false,
  seekto, curtimetext, durtimetext;

function initAudioPlayer() {
  audio = new Audio();
  audio.src = "test.mp3";
  audio.loop = true;
  audio.play();
  // Set object references
  playbtn = document.getElementById("playpausebtn");
  mutebtn = document.getElementById("mutebtn");
  seekslider = document.getElementById("seekslider");
  volumeslider = document.getElementById("volumeslider");
  curtimetext = document.getElementById("curtimetext");
  durtimetext = document.getElementById("durtimetext");
  // Add Event Handling
  playbtn.addEventListener("click", playPause);
  mutebtn.addEventListener("click", mute);
  seekslider.addEventListener("mousedown", function(event) {
    seeking = true;
    seek(event);
  });
  seekslider.addEventListener("mousemove", function(event) {
    seek(event);
  });
  seekslider.addEventListener("mouseup", function() {
    seeking = false;
  });
  volumeslider.addEventListener("mousemove", setvolume);
  audio.addEventListener("timeupdate", function() {
    seektimeupdate();
  });
  // Functions
  function playPause() {
    if (audio.paused) {
      audio.play();

    } else {
      audio.pause();

    }
  }

  function mute() {
    if (audio.muted) {
      audio.muted = false;

    } else {
      audio.muted = true;

    }
  }

  function seek(event) {
    if (seeking) {
      seekslider.value = event.clientX - seekslider.offsetLeft;
      seekto = audio.duration * (seekslider.value / 100);
      audio.currentTime = seekto;
    }
  }

  function setvolume() {
    audio.volume = volumeslider.value / 100;
  }

  function seektimeupdate() {
    var nt = audio.currentTime * (100 / audio.duration);
    seekslider.value = nt;
    var curmins = Math.floor(audio.currentTime / 60);
    var cursecs = Math.floor(audio.currentTime - curmins * 60);
    var durmins = Math.floor(audio.duration / 60);
    var dursecs = Math.floor(audio.duration - durmins * 60);
    if (cursecs < 10) {
      cursecs = "0" + cursecs;
    }
    if (dursecs < 10) {
      dursecs = "0" + dursecs;
    }
    if (curmins < 10) {
      curmins = "0" + curmins;
    }
    if (durmins < 10) {
      durmins = "0" + durmins;
    }
    curtimetext.innerHTML = curmins + ":" + cursecs;
    durtimetext.innerHTML = durmins + ":" + dursecs;
  }
}
window.addEventListener("load", initAudioPlayer);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar-fy-music navbar-fixed-bottom">
  <div class="music-container">
    <div class="interface-audio">
      <div class="col-md-12">
        <div class="col-md-2 col-xs-2">
          <div class="controllers">
            <div class="controller-backward">
              <i class="fa fa-step-backward"></i>
            </div>
            <div class="controller-play" id="playpausebtn">
              <i class="fa fa-play"></i>
            </div>
            <div class="controller-forward">
              <i class="fa fa-step-forward"></i>
            </div>
          </div>
        </div>
        <div class="col-md-2 col-xs-2">
          <div class="now-playing">
          </div>
        </div>
        <div class="col-md-5 col-xs-5">
          <div class="seeking-bar">
            <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
          </div>
        </div>
        <div class="col-md-2 col-xs-2">
          <div class="speaker">
            <div class="volumeupdown" id="mutebtn"><i class="fa fa-volume-up"></i>
            </div>
            <div class="volumerange">
              <input id="volumeslider" type="range" min="0" max="100" value="100" step="1">
            </div>
          </div>
        </div>
        <div class="col-md-1 col-xs-1">
          <div class="playlist">
            <i class="fa fa-list-ul"></i>
          </div>
        </div>
      </div>
    </div>
  </div>