HTML5音频播放器的下一个和上一个功能 [英] HTML5 Audio Player Next and Previous functions
问题描述
我设法获得了一个工作播放列表，但是我想使下一个"和上一个"按钮实际上在播放列表中向前和向后跳过，但似乎无法弄清楚.我想也许在单击next时使用了playNext函数，但是我搞砸了，或者那不是必须要做的.
I have managed to get a Working playlist but I want to make the Next and Previous Buttons actually skip forwards and backwards in the playlist but I can't seem to figure it out. I thought maybe if I used the playNext function when next is clicked but either i messed that up or thats not what needs to be done.
<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>
任何对它有意见的人将不胜感激.
Anyone who might have some advice it would be greatly appreciated.
推荐答案
您希望从这行代码中得到什么?
What you expect to get from this line of code?
_playlist.querySelector("li.selected").nextSibling;
我看到的结果是这样的:
As i can see the result is something like:
< TextNode textContent ="\ n">
我猜您希望得到正确的< li> 吗?
I guess you expect to get an <li> right?
< li class ="selected" data-ogg ="something.mp3">
如果是，则可能需要使用 nextElementSibling
If yes you might need to use nextElementSibling
_playlist.querySelector("li.selected").nextElementSibling;
如果您需要更多有关nextSibling和nextElementSibling属性的区别，请访问:
If you need more about the difference of nextSibling and nextElementSibling properties at:
看看下面的代码片段.
使用它之前，请先将mp3.mp3更改为mp3的来源.
BEFORE USING IT CHANGE mp3.mp3 WITH THE SOURCE OF AN 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音频播放器的下一个和上一个功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
