音频暂停不起作用，全局-局部变量问题

Question

我认为对于初学者来说，我已经把事情复杂化了，但我只想一次在我的四个按钮中添加addEventListener。然后将该事件传递给一个新函数，该函数检查是哪个按钮触发了该事件。之后，为每个按钮调用相应的函数。

直到这里一切都很顺利。一切都很好，我甚至可以让控制台记录每个功能的消息，但除此之外，音频不会暂停。音频播放良好，但不会暂停，我认为是全局-局部变量问题，但在查看DevTools时，console.log表示，相同的音频正在传递给我的暂停功能，但仍然没有暂停。我不想采取最后手段，但从昨天开始就在做这件事，任何见解都会很棒。

var audioBar = document.getElementsByClassName("audioBar");
var playerBtn = document.getElementsByClassName("playerBtn");
var prev = document.getElementById('prev');
var play = document.getElementById('play');
var pause = document.getElementById('pause');
var pause = document.getElementById('stop');
var next = document.getElementById('next');
var seek = document.getElementById("seek");
var eListener;
for (var i = 0; i < playerBtn.length; i++) {
    playerBtn[i].addEventListener("click", whichButton, true);
    eListener = playerBtn[i];
}
function whichButton(eListener) {
    var whichID = eListener.target.parentElement.id;
    var whichClass = eListener.target.className;
    event.preventDefault();
    switch (whichID) {
        case "prev":
            // event.preventDefault();
            prevIt();
            break;
        case "play":
            // event.preventDefault();
            playIt();
            break;
        case "stop":
            // event.preventDefault();
            stopIt();
            break;
        case "next":
            // event.preventDefault();
            nextIt();
            break;
        default:
            event.preventDefault();
    }
    var passenger; //Declaring passenger on global scale within whichButton
    function playIt() {
        // var currentSong;
        function audio(src) { //constructor for audio for future efficiency
            var currentSong = new Audio(src);
            this.src = src;
            this.play = function () {
                currentSong.play();
            };
            this.pause = function () {
                currentSong.pause();
            };
            this.stop = function () {
                currentSong.pause();
                currentSong.currentTime = 0
            };
            // return currentSong;
        }
        passenger = new audio(songs[0].file); //The passenger that's been playing around.
        if (whichClass === "fa fa-play fa-2x") {
            event.target.className = "fa fa-pause fa-2x";
            // console.log(whichClass);
            console.log("playing it");
            passenger.play();
            console.log(passenger); //Checking which passenger is being played
        } else {
            event.target.className = "fa fa-play fa-2x";
            // console.log(whichClass);
            console.log("pausing it"); // << This works great!
            passenger.pause(); // << But this does not
        }
        // return passenger;
    }
    console.log(passenger); //Same passenger as the above one
    function stopIt() {
        passenger.stop(); //passing Same passenger to stop function but does not do it.
        passenger.pause();
        passenger.currentTime = 0;
        console.log("stopping it");
    }
    function nextIt() {
        console.log("next one");
    }
}

audioPlayerContainer {
    background: -webkit-linear-gradient(top, #494949 0%, #434242 31%, #393838 55%, #242323 83%, #1b1a1a 100%, #161515 100%, #0b0b0b 100%);
    /*background: -webkit-linear-gradient(top, #cc4b56 0%, #c01f2c 31%, #c01f2c 55%, #c01f2c 83%, #c01f2c 100%, #ac1b27 100%, #991823 100%);*/
    border: #c01f2c solid 4px;
    border-top: #fff solid 1.5px;
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    /*padding: 5px 50px 5px 0;*/
}
.relativeWrapper {
    position: relative;
    height: 100%;
    box-sizing: border-box;
}
.audioBar {
    display: inline-block;
    background: #c01f2c;
    width: 15%;
    height: 100%;
    font-size: 2rem;
    line-height: 1rem;
    text-align: center;
    box-sizing: border-box;
    float: left;
}
.audioBar h6 {
    top:50%;
    transform: translateY(-50%);
    position: relative;
    line-height: 1.1rem;
}
.fa-music {
    font-size: 2rem;
    float: left;
    margin: 0 0 0 15%;
}
.aPCController {
    display: inline;
    float: left;
    color: #f2f2f2;
    margin-left: 2%;
    width: 15%;
    height: 35px;
    /*padding-top: 0.25%;*/
    top: 50%;
    transform: translateY(-50%);
    position: relative;
    /*background: #f4c5c4;*/
}
.aPCController a {
    color:#fff;
}
.aPCController a~a {
    margin-left: 15px;
}
.seekWrapper {
    position: relative;
    float: left;
    background: #2f2f2f;
    height: 35px;
    top: 50%;
    transform: translateY(-50%);
}
.seek {
    width: 55%;
    /*display: inline-block;*/
}
.seekWrapper input {
    /*For div*/
    display: block;
    font-size: 0px;
    background: #c01f2c;
    /*width: 50%;*/
    height: 100%;
    /*For input*/
    -webkit-appearance: none;
    width: 100%;
    cursor: pointer;
}
.seekWrapper input::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 2px solid #000;
    /*border-radius: 25%;*/
    background: #fff;
    width: 15px;
    height: 35px;
    margin-top: -1px;
}
span #title {
    text-align: center;
    vertical-align: middle;
    color: #fff;
    /*display: inline;*/
}
.vol {
    width: 10%;
    margin-left: 1%;
}
canvas {
    top: 50%;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow: inset 0 0 10px #000000;
}

<div class="audioPlayerContainer wrapper">
    <div class="relativeWrapper">
        <!--<div class="audioBar"></div>-->
        <div class="audioBar">
            <h6><i class="fa fa-music fa-2x"></i>audio </br> bar</h6>
        </div>
        <div class="aPCController"> <a class="playerBtn" id="prev" href="" title=""><i class="fa fa-step-backward fa-2x"></i></a>
 <a class="playerBtn" id="play" href="" title=""><i class="fa fa-play fa-2x"></i></a>
 <a class="playerBtn" id="stop" href="" title=""><i class="fa fa-stop fa-2x"></i></a>
 <a class="playerBtn" id="next" href="" title=""><i class="fa fa-step-forward fa-2x"></i></a>
        </div>
        <!--<div id="seekWrapper"><p id="seek"><span id="title">some random title</span></p></div>-->
        <div class="seekWrapper seek" id="seekWrapper">
            <input type="range" id="seek" value="0" max=""><span class="_label"><p>RadioHead - Creep</p></span>
        </div>
        <div class="seekWrapper vol" id="volWrapper">
            <input type="range" id="vol" value="0" max="10">
        </div>
        <!--<canvas id="previous" width="50px" height="50px" onmouseover=""></canvas>
            <canvas id="play" width="50px" height="50px" onmouseover=""></canvas>
            <canvas id="next" width="50px" height="50px" onmouseover=""></canvas>-->
    </div>
</div>

如果需要任何其他细节，请告诉我。谢谢

编辑：我让乘客停止或暂停的唯一情况是，当我直接将乘客参数传递给stopIt函数时，这进一步让我相信这是全局/局部变量争议的情况。但对于一个新手来说，我什么都看不见。研究了很多，尝试了很多，但都无济于事。

passenger = new audio(songs[0].file);                     //The passenger that's being playing around.
      if (whichClass === "fa fa-play fa-2x"){
            event.target.className = "fa fa-pause fa-2x";
            // console.log(whichClass);
            console.log("playing it");
            passenger.play();
            stopIt(passenger);    // <<<<<Only if I do this, it stops
          }
      else {
            event.target.className = "fa fa-play fa-2x";
            // console.log(whichClass);
            console.log("pausing it");       // << This works great!
            passenger.pause();              // << But this does not
          }
    // return passenger;
  }          
function stopIt(stopThis){
      stopThis.stop();                  
      stopThis.pause();
      stopThis.currentTime = 0;
      console.log("stopping it");
  }

这样，它会暂停/停止，但一旦乘客开始播放，它就会停止，而无需点击停止按钮，因为该功能是由playIt函数调用的，而不是点击事件。所以不知道该怎么办。

Answer 1

在播放任何音频/视频文件之前，您必须先加载它。例如

this.play = function(){
  currentSong.load();
  currentSong.play();
};

愿这能解决你的问题。

Answer 2

这里的主要问题是，whichButton不是作为事件侦听器在各种播放按钮之间共享的同一对象，因此当您将passenger放在外部时，它将是真正的全局对象，还有其他小问题，在演示中解决了这些问题：

小提琴演示

Answer 3

function whichButton(eListener) {
    var whichID = eListener.target.parentElement.id;
    var whichClass = eListener.target.className;
    event.preventDefault();

event未定义。。。这将导致javascript错误。

Answer 4

这有点晚了，但我觉得我需要写下我用它做了什么。正如mido22所暗示的那样，我的乘客遇到了麻烦，所以不得不全部改变。我不得不重写大部分内容。

不管怎么说，这是相当混乱的，不在这个项目上工作，所以不关心演示。结束了这么长时间的回归，但忘记了回到斯塔克弗流。今天来到这里是为了寻求不同问题的答案。

如果有人感兴趣，请告诉我如何使这个代码更好。

var audioBar = document.getElementsByClassName("audioBar"),
      playerBtn = document.getElementsByClassName("playerBtn"),
      prev = document.getElementById('prev'),
      play = document.getElementById('play'),
      pause = document.getElementById('pause'),
      pause = document.getElementById('stop'),
      next = document.getElementById('next'),
      seek = document.getElementById("seek"),
      vol = document.getElementById("vol"),
      songInfo = document.getElementById("songInfo").querySelectorAll("p"),
      eListener;
  for(var i=0; i<playerBtn.length; i++){ 
      playerBtn[i].addEventListener("click", whichButton, true);
      eListener = playerBtn[i];
  }
  var audio = new Audio(), 
      factor = (seek.clientWidth/audio.duration) * parseFloat(audio.currentTime) / (seek.clientWidth/100);
      audio.src = function (){songs[0].file};
      vol.value = 5;
  function progress(){
    seek.value = 0;
    seek.value = (seek.clientWidth/audio.duration) * parseFloat(audio.currentTime) / (seek.clientWidth/100);
    songInfo[0].textContent = songs[0].artist + " - " + songs[0].title;
    songInfo[1].textContent = String(audio.currentTime).toTime() + " | " + String(audio.duration).toTime();
    if(audio.ended || audio.paused) {play.childNodes[0].className = "fa fa-play fa-2x";}
  }
  function volChange(){ vol.value = event.target.value; audio.volume = vol.value/10; }
  function seekupdate(){ seek.value = event.target.value; audio.currentTime = seek.value/(seek.clientWidth/audio.duration) * (seek.clientWidth/100) }
  audio.addEventListener("timeupdate", progress);
  seek.addEventListener("input", seekupdate);
  vol.addEventListener("input", volChange);
  function  whichButton(eListener){ 
      var whichID = eListener.target.parentElement.id,
          whichClass = eListener.target.className;
          event.preventDefault();
      if(!(audio.paused) && whichID === "stop") {audio.pause(); audio.currentTime = 0;}
      if((audio.paused) && whichClass === "fa fa-play fa-2x") {audio.play(); event.target.className = "fa fa-pause fa-2x";}
      if(!(audio.paused) && whichClass === "fa fa-pause fa-2x") {audio.pause(); event.target.className = "fa fa-play fa-2x";}
  }