Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Аудио-плеер audiojs, проблема с плейлистом (https://javascript.ru/forum/misc/56353-audio-pleer-audiojs-problema-s-plejjlistom.html)

Exhaust_ 11.06.2015 18:09

Аудио-плеер audiojs, проблема с плейлистом
 
Есть такой аудио-плеер audiojs
Он может плейлисты воспроизводить, вот пример
Проблема в том, что он не дружит с html-тэгами. Если есть между списком треков <img>, то он останавливается, если часть треков завернута в тэги <div>, то понимает их как отдельный плейлист и крутит по кругу.
Как заставить его не замечать тэги между треками?
Вот пример с исходным кодом и расставленными тэгами:
https://www.dropbox.com/s/gqk3w01kzaa569z/audiojs.rar
Помогите устранить проблему

Опан 14.06.2015 23:12

Когда-то и я любил этот пример, но потом оказалось, что его можно сделать без jQuery и подключаемых модулей. Так намного роще разобраться, и можно будет вставлять любые теги.

KosBeg 15.06.2015 09:32

Цитата:

Сообщение от Опан
что его можно сделать без jQuery и подключаемых модулей

мне тоже нравится audiojs от kolber, но проблема в том что он с jQuery,
мне нужно на чистом js,
а вы говорите что можно и на чистом js,
можно ли получить пример?

Опан 16.06.2015 00:34

<style>
li{
	width:150px;
	cursor:pointer;
}
li:hover{
	color:#1bb;
}
</style>

<audio id=audio controls></audio>
<ul>
	<li id="1.mp3">Трек-1</li>
	<li id="2.mp3">Трек-2</li>
	<li id="3.mp3">Трек-3</li>
	<li id="4.mp3">Трек-4</li>
	<li id="5.mp3">Трек-5</li>
</ul>

<script>
var alles_li=document.getElementsByTagName("li");
var index=0;
for(i=0;i<alles_li.length;i++){
	alles_li[i].innerHTML="&nbsp;&nbsp;&nbsp;"+alles_li[i].innerHTML;
	alles_li[i].id+=("&"+i);
	alles_li[i].onclick=function(){
		index=this.id.split("&")[1];
		play_selected();
	}
}
audio.onended=function(){
	index++;
	if(index<alles_li.length){play_selected()}
	else{alles_li[index-1].style.background="#fff"};
}
function play_selected(){
	for(j=0;j<alles_li.length;j++){alles_li[j].style.background="#fff"};
	alles_li[index].style.background="gold";
	audio.src=alles_li[index].id.split("&")[0];
	audio.play();
}
</script>


Часовой пояс GMT +3, время: 13:46.