Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.06.2015, 18:09
Аспирант
Отправить личное сообщение для Exhaust_ Посмотреть профиль Найти все сообщения от Exhaust_
 
Регистрация: 16.09.2014
Сообщений: 52

Аудио-плеер audiojs, проблема с плейлистом
Есть такой аудио-плеер audiojs
Он может плейлисты воспроизводить, вот пример
Проблема в том, что он не дружит с html-тэгами. Если есть между списком треков <img>, то он останавливается, если часть треков завернута в тэги <div>, то понимает их как отдельный плейлист и крутит по кругу.
Как заставить его не замечать тэги между треками?
Вот пример с исходным кодом и расставленными тэгами:
https://www.dropbox.com/s/gqk3w01kzaa569z/audiojs.rar
Помогите устранить проблему
Ответить с цитированием
  #2 (permalink)  
Старый 14.06.2015, 23:12
Аватар для Опан
Кандидат Javascript-наук
Отправить личное сообщение для Опан Посмотреть профиль Найти все сообщения от Опан
 
Регистрация: 15.03.2013
Сообщений: 100

Когда-то и я любил этот пример, но потом оказалось, что его можно сделать без jQuery и подключаемых модулей. Так намного роще разобраться, и можно будет вставлять любые теги.
Ответить с цитированием
  #3 (permalink)  
Старый 15.06.2015, 09:32
Аватар для KosBeg
Профессор
Отправить личное сообщение для KosBeg Посмотреть профиль Найти все сообщения от KosBeg
 
Регистрация: 22.05.2015
Сообщений: 384

Сообщение от Опан
что его можно сделать без jQuery и подключаемых модулей
мне тоже нравится audiojs от kolber, но проблема в том что он с jQuery,
мне нужно на чистом js,
а вы говорите что можно и на чистом js,
можно ли получить пример?
Ответить с цитированием
  #4 (permalink)  
Старый 16.06.2015, 00:34
Аватар для Опан
Кандидат Javascript-наук
Отправить личное сообщение для Опан Посмотреть профиль Найти все сообщения от Опан
 
Регистрация: 15.03.2013
Сообщений: 100

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

Последний раз редактировалось Опан, 19.06.2015 в 00:58. Причина: лучше, когда после окончания воспроизведения кликнутой композиции автоматом начинает играть следующая после неё.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как встроить в HTML стандартный FalshPlayer плеер для проигрывания аудио? Почемучкин Flash 15 11.11.2012 20:43
jquery аудио плеер: плейлист не отображается в firefox roy-aron jQuery 0 27.06.2012 17:20
Mp3 плеер на JavaScript/Flash krisstail Работа 1 26.05.2012 03:00
Проблема с flowplayer или помочь найти видео плеер snapson Библиотеки/Тулкиты/Фреймворки 8 09.03.2012 20:00
Проблема при воспроизведении аудио при использовании jplayer nemish Events/DOM/Window 0 01.12.2011 16:15