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

【问题标题】：HTML5 Audio Player Next and Previous functionsHTML5 音频播放器下一个和上一个功能
【发布时间】：2015-06-27 20:22:41
【问题描述】：

我设法获得了一个工作播放列表，但我想让下一个和上一个按钮在播放列表中实际向前和向后跳过，但我似乎无法弄清楚。我想也许我在单击下一步时使用了 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>

任何可能有一些建议的人将不胜感激。

【问题讨论】：

嗨，我们可以举一个有效播放列表的例子吗？在 3 项列表中...
看看我的回答。如果您更改 mp3.mp3，您将看到一个有效的播放列表。通过单击下一首或上一首，它会停止当前歌曲并转到下一首或上一首。

标签： jquery html html5-audio

【解决方案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

看看下面的sn-p。

在使用它之前将 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>

【讨论】：