CODEWITHSUNDEEP
jqueryhtmlhtml5-audio
Bradg89
Bradg89

Reputation: 153

HTML5 Audio Player Next and Previous functions

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.

Upvotes: 1

Views: 4355

Answers (1)

Gerasimos Pap
Gerasimos Pap

Reputation: 459

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">

I guess you expect to get an <li> right?

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

If yes you might need to use nextElementSibling

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

If you need more about the difference of nextSibling and nextElementSibling properties at:

Definition and Usage

Take a look of the following snippet.

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>

Upvotes: 3

Related Questions