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

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>

如果需要任何其他详细信息，请告诉我。谢谢!

编辑:我让 passenger 停止或暂停的唯一情况是当我直接将 passenger 参数传递给 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 函数调用的，而不是 click 事件。所以不知道该怎么办。

Answer 1

before playing any audio/video file you have to load it first. eg,

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

May this will solve your problem.