我正在用 Javascript 构建自定义音频播放器,但我无法将事件监听器附加到列表中的每首歌曲。当我点击播放列表中的轨道时,我想通过一个名为selectTrack(x) 的函数解析一个数据属性来告诉播放器播放哪首歌。但是,我不断收到一条错误消息,指出此函数未定义。
这是我遇到的问题:
// attach event listener and get data value from div
var myListener = document.getElementsByClassName("trackListRow");
for (var i=0; i < myListener.length; i++)
{
myListener[i].getAttribute("data-track-index");
mylistener[i].addEventListener("click", function(){
selectTrack(datavalue);
});
}
完整代码贴在下面。
var trackListContainer, playPrevBtn, playPauseBtn, PlayNextBtn;
var trackRow, songArray;
songArray = ["Aminaiyoamoore", "adg3com_chuckedknuckles" ];
// create track list - append to container
var i;
for (i = 0; i < songArray.length; i++) {
trackRow = document.createElement("div");
trackRow.textContent = songArray[i];
trackRow.className = "trackListRow";
// set data attribute to array index number for event handling
trackRow.setAttribute("data-track-index", songArray.indexOf(songArray[i]));
trackListContainer = document.getElementById("trackListContainer");
trackListContainer.appendChild(trackRow);
}
// Problems here
// attach event listener and get data value from div
var myListener = document.getElementsByClassName("trackListRow");
for (var i=0; i < myListener.length; i++)
{
myListener[i].getAttribute("data-track-index");
mylistener[i].addEventListener("click", function(){
selectTrack(datavalue);
});
}
var playPrevBtn, playPauseBtn, playNextBtn;
playPrevBtn = document.getElementById("playPrevBtn");
playPauseBtn = document.getElementById("playPauseBtn");
playNextBtn = document.getElementById("playNextBtn");
function initBeatPlayer() {
// var dir = "audio/";
var dir = "http://www.puntlandtvradio.net/placeholders/audio/"
var ext = ".mp3";
playlist_array_index = 0;
audio = new Audio();
playPauseBtn.addEventListener("click", playPause);
playPrevBtn.addEventListener("click", seekBackward);
playNextBtn.addEventListener("click", seekForward);
audio.addEventListener("ended", function() {
switchTrack()
});
// functions
function selectTrack(datavalue){
playlist_array_index = datavalue
audio.src = dir + songArray[playlist_array_index] + ext;
audio.play();
}
function playPause() {
if (audio.paused) {
audio.play();
document.getElementById("playPauseBtn").textContent = "PAUSE";
} else {
audio.pause()
document.getElementById("playPauseBtn").textContent = "PLAY"
}
}
function seekBackward() {
if (playlist_array_index <= 0) {
playlist_array_index = 0;
audio.src = dir + songArray[playlist_array_index] + ext;
audio.pause();
audio.currentTime = 0;
audio.play();
} else {
playlist_array_index--;
audio.src = dir + songArray[playlist_array_index] + ext;
audio.play();
}
}
function seekForward() {
if (playlist_array_index == (songArray.length - 1)) {
playlist_array_index = 0;
} else {
playlist_array_index++;
audio.src = dir + songArray[playlist_array_index] + ext;
audio.play();
}
}
//end functions
}
window.addEventListener("load", initBeatPlayer);
#container{width: 320px; margin: auto; overflow: hidden;}
#controls {}
#playPrevBtn, #playPauseBtn, #playNextBtn{ font-size: 25px; margin: 5px;}
.trackListRow {font-size: 20px; background-color: aliceblue; color: black; padding: 10px; margin: 5px;}
.trackListRow:hover {background: brown; color: white; }
<!--player control buttions -->
<div id="container">
<div id="trackListContainer"> </div>
<div id="controls">
<button id="playPrevBtn"> << </button>
<button id="playPauseBtn">PAUSE</button>
<button id="playNextBtn">>></button>
</div>
<div> music by puntlandtvradio.net - for educational purposes </div>
</div>
最佳答案
一些事情:
for
循环中的第二行:mylistener
应该是myListener
(大写的 L)- 事件监听器中的数据值未定义,先声明。
- 正如评论指出的那样,
selectTrack
在initBeatPlayer
中,因此不公开。但是,考虑到selectTrack
还需要引用initBeatPlayer
中的其他变量,最好将处理程序绑定(bind)工作移到initBeatPlayer
中,如下所示好吧。
这是一个“有效”的 jsFiddle,您仍然需要清理该代码段旁边的其他部分: https://jsfiddle.net/bosjuLmo/1/
关于javascript - 如何将事件监听器附加到 html 元素数组并将数据属性解析为 javascript 中的参数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39691959/