HTML5 音频播放器下一个和上一个函数

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 音频播放器下一个和上一个函数

HTML5 Audio Player Next and Previous functions

html

jquery

html5-audio