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
.
Буду благодарна за помощь.
Могу предложить сохранение ссылок на аудиофайлы в 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>
<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>
Треки в основном списке, которые следует добавить в список пользователя, нужно будет отмечать чекбоксами. Правда, получилось, что проверка на раннее существование в списке пользователя вновь выбираемого трека работает только после обновления страницы. (видимо, уже хочу спать)
Виртуальный выделенный сервер (VDS) становится отличным выбором
Есть основной код который должен выполняться
Изучая туториал по react столкнулся с проблемой после подключения
Пытаюсь спарсить несколько страницДобавил элемент WebBrowser и кнопку, на ее нажатие поставил событие
Использую библиотеку NinjectПомогите разобраться почему не работает Property Injection