<table border=1>
<tr>
<td id=audiocontayner><center><br />
Общий плейлист<br /><br />
<input type=checkbox />
<audio id="music" controls>
<source src="1.ogg" type="audio/ogg">
<source src="1.mp3" type="audio/mpeg">
</audio><br />
<input type=checkbox />
<audio id="music" controls>
<source src="2.ogg" type="audio/ogg">
<source src="2.mp3" type="audio/mpeg">
</audio><br />
<input type=checkbox />
<audio id="music" controls>
<source src="3.ogg" type="audio/ogg">
<source src="3.mp3" type="audio/mpeg">
</audio><br /><br />
<button onclick="add_audio()"> добавить аудио </button><br /><br />
</center></td><td id=favourite><center>Плейлист пользователя<br /><br />
</center></td>
</tr>
</table>
<script>
var audiocontayner = document.getElementById("audiocontayner");
var favourite = document.getElementById("favourite");
var all_source = audiocontayner.getElementsByTagName("source");
var all_checkbox = audiocontayner.getElementsByTagName("input");
function add_audio(){
for(i=0;i<all_checkbox.length;i++){
if(all_checkbox[i].checked){
var audio = new Audio();
audio.controls = true;
var source = document.createElement("source");
if(b && b.indexOf(all_source[i * 2].src) != -1){
alert("Такой трек уже есть");
}else{
source.src = all_source[i * 2].src;
source.type = "audio/ogg";
audio.appendChild(source);
source = document.createElement("source");
source.src = all_source[i * 2 + 1].src;
source.type = "audio/mp3";
audio.appendChild(source);
favourite.appendChild(audio);
favourite.innerHTML += "<br />";
a += "#&" + all_source[i * 2].src + "#&" + all_source[i * 2 + 1].src;
localStorage.setItem('tracks', a);
}
}
}
}
var a = localStorage.getItem('tracks');
if(a){
var b = a.split("#&");
for(i=1; i < b.length; i += 2){
var audio = new Audio();
audio.controls = true;
var source = document.createElement("source");
source.src = b[i];
source.type = "audio/ogg";
audio.appendChild(source);
source = document.createElement("source");
source.src = b[i + 1];
source.type = "audio/mp3";
audio.appendChild(source);
favourite.appendChild(audio);
favourite.innerHTML += "<br />";
}
}
</script>
Треки в основном списке, которые следует добавить в список пользователя, нужно будет отмечать чекбоксами. Правда, получилось, что проверка на раннее существование в списке пользователя вновь выбираемого трека работает только после обновления страницы. (видимо, уже хочу спать)