How to properly save and use playlist for HTML5 Audio tag?

Question

JavaScript

Hello, I'm designing a native player, without external plugins. I think how to solve such a problem. I get a set of IDs with Ajax, I need to save them somehow, then when I play a track or when I press the button, turn on the next track. And if the ID is over, get a new batch.
This raises two questions:
1) Where to store them? In markup?
2) How to understand that the ID is over? After the end of playback or pressing the Next button, delete the current ID ?
There is an idea how to implement this, but I want to do it correctly and without shitty code.
Any thoughts?)

Answer 1

1)
Sound in html5 can be played not only with an audio tag, but also with a js object.
For example,

<audio controls>
  <source src="audio_file.mp3" type="audio/mpeg">
</audio>

the same as

<script>
var audio = new Audio('audio_file.mp3');
audio.play();
</script>

You can receive links to music from the server, save them to an array and turn them on one by one.
well for example (I use jquery below):

var my_music = new Array();
$.post('audio_server.php').done(function(data){
   //data - это, допустим, json с сервера со списком музыки (в виде ссылок)
   my_music = $.parseJSON(data);// вот здесь и хранится список песен
   var audio = new Audio( my_music[0] ); // запускаем первый трек
   audio.play();
});

2)
you can make a counter for the number of tunes played, and if it reaches the length of the array, request a new list.
you can look at what position you are now through .indexOf()
you can delete the previous played element: delete my_music[0] if my_music[1] is enabled. Well, it's such a thing)
I would connect jquery and audio.js - there are a lot of useful things)