jquery处理由jinja（django）加载的html5元素的问题

Question

I am trying to create a media player with django and while jquery is able to pick up the first track, it is not able to pick up the rest

html

{% if tracksurl %}
{% for tracks in tracksurl %}
    <audio class="playsong" src="{{tracks}}"></audio>
{% endfor %}
{% endif %}
<button id="play">PLAY</button>
<button id="stop">STOP</button>
<button id="next">NEXT</button>

jquery

<script>

jQuery(document).ready(function(){
var audioArray = document.getElementsByClassName('playsong');
var nowPlaying = audioArray[i=0];
nowPlaying.load(); 

$('#play').click(function() {
    nowPlaying.play();
})
$('#stop').click(function() {
    nowPlaying.pause();
})

$('#next').click(function() {
    $.each($('audio.playsong'), function() {
        this.pause();
    });
    i++;
    nowPlaying.load();
    nowPlaying.play();
})

})

</script>

tracksurl is a list and currently holds more than 1 url to an audio, and the play button is able to play the first audio track, however when clicked on next, it still only plays the first track

Answer 1

The problem with the code is that the value of nowPlaying is initialized, but it is never really updated (the index i is updated, but not the actual value of nowPlaying ), so it will always be the same song (the first one).

So just add this after the i++ line:

nowPlaying = audioArray[i];

Now, there is another issue with the code: the value of i is being increased without checking if it exceeds the length of the array of audios. That means that the player will break when trying to access the lenght+1 item.

To fix that, update the value of i taking into consideration the length of the array using a module operation:

i = ++i % audioArray.length;

So once all that is fixed, the code would look like this and work fine (demo audio files from MDN and W3Schools):

 jQuery(document).ready(function(){ var audioArray = document.getElementsByClassName('playsong'); var nowPlaying = audioArray[i=0]; nowPlaying.load(); $('#play').click(function() { nowPlaying.play(); }) $('#stop').click(function() { nowPlaying.pause(); }) $('#next').click(function() { $.each($('audio.playsong'), function() { this.pause(); }); i = ++i % audioArray.length; nowPlaying = audioArray[i]; nowPlaying.load(); nowPlaying.play(); }) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <audio class="playsong" src="http://www.w3schools.com/html/horse.mp3"></audio> <audio class="playsong" src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"></audio> <button id="play">PLAY</button> <button id="stop">STOP</button> <button id="next">NEXT</button>