0

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.

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

6
  • вы в localStorage не можете элемент сохранить
    – ThisMan
    25 сен 2019 в 21:18
  • вам нужно там хранить ссылку, на которую ссылается аудио
    – ThisMan
    25 сен 2019 в 21:18
  • Сам эл-т нельзя, но вот его код вполне можно. Хотя в данном случае целесообразней просто ссылку хранить
    – InDevX
    25 сен 2019 в 22:01
  • Я бы посоветовал, описать суть задуманного, каков должен быть конечный результат, Из того что в примере, ясно одно, вообще не ясно ничего....
    – Air
    26 сен 2019 в 3:04
  • В localstorage лучше всего сохранять список ссылок на аудио файлы (плейлист) в виде массива, а на странице циклом генерировать плеер для каждой ссылки, которую потом использовать в этом плеере. (если для каждой песни нужен отдельный плеер)
    – Опан
    26 сен 2019 в 8:32

2 ответа 2

0

Могу предложить сохранение ссылок на аудиофайлы в 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>

3
  • Я хотела сделать простенький сайт, добавить на него несколько аудио, а пользователь нажавший на кнопку "добавить аудио" бы мог добавить выбранное аудио в свой плейлист. Но это несерьёзно, а просто для опыта. Нельзя ли это как-то реализовать без ввода prompt ?!)
    – user327919
    26 сен 2019 в 21:05
  • Можно. Я уже почти написал код, сегодня чуть позже опубликую.
    – Опан
    27 сен 2019 в 13:11
  • Спасибо вам большое, что уделили время, для моего вопроса.
    – user327919
    27 сен 2019 в 14:44
0

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

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

2
  • Сказать вам спасибо, будет мало. Я пойду реализовывать написанное. A вам всего хорошего :)
    – user327919
    28 сен 2019 в 12:45
  • 1
    Спасибо, вам того же :)
    – Опан
    28 сен 2019 в 13:19

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.