Как правильно сохранить и использовать playlist для HTML5 Audio tag?

Question

[ILoveYAnny]

Здравствуйте, я проектирую нативный плеер, без внешних плагинов. Думаю как правильно решить такую задачу. Я Аяксом получают набор ID, мне нужно как то их сохранить, потом при проигрывании трека или при нажатии на кнопку дальше включить следующий трек. А если ID закончились получить новую партию.
Отсюда возникают два вопроса:
1) Где их хранить? В разметке?
2) Как понять что ID закончились? После конца проигрывания или нажатия на кнопку Next удалять текущий ID ?
Мысль то как это реализовать есть, но вот хочется правильно и без говнокода обойтись.
Есть some соображения ?)

Answer 1

[Илья Рычагов]

1)
Звук в html5 можно пускать не только аудио-тегом, но и объектом js.
Например,

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

то же самое, что и

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

Вы можете с сервера получать ссылки на музыку, сохранять их в массив и включать по очереди.
ну например (я использую jquery ниже):

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)
можно сделать счетчик кол-во проигранных мелодий, и если он достигает длины массива, запрашивать новый список.
можно смотреть на какой позиции вы находитесь сейчас через .indexOf()
можно удалять предыдущий проигранный элемент: delete my_music[0], если включился my_music[1]. Ну это такое себе)

Я бы подключил jquery и audio.js - там много чего полезного)

Comments

[ILoveYAnny]

Спасибо) Примерно так я и реализовал)