Как сохранить audio добавленое в div с помощью localStorage?

344

11 августа 2021, 23:20

function f1() { 
  var a = document.getElementById("music"); 
  var e = document.createElement("e"); 
  var c = a.cloneNode(); 
  e.appendChild(c); 
  var b = document.getElementsByClassName("favourite")[0]; 
  b.appendChild(e); 
  localStorage.setItem("myMus", a); 
 
 
} 
document.getElementsByClassName("favourite")[0].appendChild("e").localStorage.getItem("myMus");

.favourite { 
  background-color: red; 
  width: 300px; 
  height: 200px; 
}

<audio id="music" controls> 
    <source src="horse.ogg" type="audio/ogg"> 
    <source src="horse.mp3" type="audio/mpeg"> 
</audio> 
<button onclick="f1()">Add</button> 
<div class="favourite"></div>

Хочу чтобы при обновлении страницы, аудио добавленный в div, сохранялся, но не знаю как это сделать с помощью localStorage.

Буду благодарна за помощь.

Answer 1

Могу предложить сохранение ссылок на аудиофайлы в localStorage и последующее отображение их (даже после обновления страницы) в виде плееров, в даном случае ссылки нужно вводить с помощью prompt:

<div id=favourite></div> 
<script> 
var mylink = prompt("Введите УРЛ аудиофайла"); 
var a = localStorage.getItem('tracks'); 
if(mylink)a += "#&" + mylink; 
localStorage.setItem('tracks', a); 
var b = a.split("#&"); 
for(i=1; i < b.length; i ++){ 
	var audio = new Audio(b[i]); 
	audio.controls = true; 
	document.getElementById("favourite").appendChild(audio); 
	document.getElementById("favourite").innerHTML += "<br />"; 
} 
</script>

Answer 2

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

Треки в основном списке, которые следует добавить в список пользователя, нужно будет отмечать чекбоксами. Правда, получилось, что проверка на раннее существование в списке пользователя вновь выбираемого трека работает только после обновления страницы. (видимо, уже хочу спать)