我认为我对初学者来说过于复杂，但我想要做的就是立即将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 = 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函数调用而不是单击事件。 所以不知道该怎么做。
答案 0 :(得分：0)
在播放任何音频/视频文件之前，您必须先加载它。 例如，
this.play = function(){
currentSong.load();
currentSong.play();
};
这可以解决你的问题。
答案 1 :(得分：0)
这里的主要问题是，whichButton与作为事件监听器的各种播放按钮之间共享的对象不同，因此当您将passenger置于外部时，它将是真正全局的，也是还有其他小问题，在演示中修复它们：
答案 2 :(得分：0)
function whichButton(eListener) {
var whichID = eListener.target.parentElement.id;
var whichClass = eListener.target.className;
event.preventDefault();
event未定义...这将导致javascript错误。
答案 3 :(得分：0)
有点晚了，但我想我需要写下我对此所做的事情。 就像mido22建议的那样，我的乘客遇到了麻烦，所以不得不改变一切。我不得不重写大部分内容。
无论如何，它非常混乱，没有在这个项目上工作所以不关心演示。完成了这么长时间但又忘了回到stackoverflow。今天来到这里寻求不同查询的答案。
如果有人有兴趣，请告诉我如何使这段代码更好。
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";}
}