Question

我已经设法获得了一个工作播放列表，但我想让下一个和上一个按钮实际上在播放列表中向前和向后跳过，但我似乎无法弄明白。我想也许如果我在点击下一个时使用了playNext函数，但是我搞砸了或者不是需要做什么。

<body>

<audio id="player"></audio>

<ul id="playlist"><li data-ogg="media/CallToArms.mp3">Call To Arms</li>  <li data-ogg="media/SkinheadProblems.mp3">Skinhead Problems</li><li data- ogg="media/KillTheBill.mp3">Kill The Bill</li></ul>

<button id="stop">Stop</button>

<button id="next">Next</button>
<button id="next">Previous</button>





<script type="text/javascript"    src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
        <script type="text/javascript">
var _player = document.getElementById("player"),
    _playlist = document.getElementById("playlist"),
    _stop = document.getElementById("stop");

// functions
function playlistItemClick(clickedElement) {
    var selected = _playlist.querySelector(".selected");
    if (selected) {
        selected.classList.remove("selected");
    }
    clickedElement.classList.add("selected");

    _player.src = clickedElement.getAttribute("data-ogg");
    _player.play();
}

 function playNext() {
    var selected = _playlist.querySelector("li.selected");
    if (selected && selected.nextSibling) {
        playlistItemClick(selected.nextSibling);
    }
}



// event listeners
_stop.addEventListener("click", function () {
    _player.pause();
});
_player.addEventListener("ended", playNext);
_playlist.addEventListener("click", function (e) {
     if (e.target && e.target.nodeName === "LI") {
        playlistItemClick(e.target);
    }
});


</script>
</body>

任何可能有一些建议的人都会非常感激。

Answer 1

您希望从这行代码中获得什么？

_playlist.querySelector("li.selected").nextSibling;

我可以看到结果如下：

<TextNode textContent=" \n">

我猜您希望获得<li>对吗？

<li class="selected" data-ogg="something.mp3">

如果是，您可能需要使用nextElementSibling

_playlist.querySelector("li.selected").nextElementSibling;

如果您需要更多关于nextSibling和nextElementSibling属性的区别：

Definition and Usage

看一下以下代码段。

使用它改变mp3.mp3之前使用mp3的来源。

var _player = document.getElementById("player"),
    _playlist = document.getElementById("playlist"),
    _stop = document.getElementById("stop");

// functions
function playlistItemClick(clickedElement) {
    var selected = _playlist.querySelector(".selected");
    if (selected) {
        selected.classList.remove("selected");
    }
    clickedElement.classList.add("selected");

    _player.src = clickedElement.getAttribute("data-ogg");
    _player.play();
}

 function playNext() {
    var selected = _playlist.querySelector("li.selected");
    if (selected && selected.nextElementSibling) {
        playlistItemClick(selected.nextElementSibling);
    }
}
 function playPrevious() {
    var selected = _playlist.querySelector("li.selected");
    if (selected && selected.previousElementSibling) {
        playlistItemClick(selected.previousElementSibling);
    }
}

// event listeners
_stop.addEventListener("click", function () {
	if(_player.paused){
    _player.play();
	}else{
	_player.pause();
	}
});

_player.addEventListener("ended", playNext);
_playlist.addEventListener("click", function (e) {
     if (e.target && e.target.nodeName === "LI") {
        playlistItemClick(e.target);
    }
});

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
       

<audio id="player" controls>
  <source  src="mp3.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<ul id="playlist">
<li class="selected" data-ogg="mp3.mp3">Call To Arms</li>  
<li data-ogg="mp3.mp3">Skinhead Problems</li>
<li data-ogg="mp3.mp3">Kill The Bill</li>
</ul>

<button id="stop">Play/Pause</button>
<button id="next" onclick="playNext()" >Next</button>
<button id="previous" onclick="playPrevious()">Previous</button>

HTML5音频播放器下一个和上一个功能

1 个答案: