Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.05.2015, 13:38
Новичок на форуме
Отправить личное сообщение для Amator Посмотреть профиль Найти все сообщения от Amator
 
Регистрация: 04.05.2015
Сообщений: 4

Переключения композиии
Подскажите пожалуйста как сделать чтобы одна композиция выключалась, при клике на воспроизведении другой композиции!
На примере этого кода:
<!DOCTYPE html>
<html lang="en">
<head>
 <meta name="viewport" content="width=device-width,initial-scale=1" />
	<meta charset="UTF-8">
	<title>Audio</title>
</head>
<body>
	<audio src="sound1.mp3" controls></audio><br>
	<audio src="sound2.mp3" controls></audio><br>
	<audio src="sound3.mp3" controls></audio><br>
	<audio src="sound4.mp3" controls></audio><br>
	<audio src="sound5.mp3" controls></audio><br>
</body>
</html>

Последний раз редактировалось Amator, 06.05.2015 в 13:44.
Ответить с цитированием
  #2 (permalink)  
Старый 07.05.2015, 12:24
Аватар для Опан
Кандидат Javascript-наук
Отправить личное сообщение для Опан Посмотреть профиль Найти все сообщения от Опан
 
Регистрация: 15.03.2013
Сообщений: 100

Добавляем это:
<script>
var previons=100; // любое число, превышающее количество тегов аудио
var alles_audio=document.getElementsByTagName("audio");
for(i=0;i<alles_audio.length;i++){
	alles_audio[i].id=i;
	alles_audio[i].onplay=function(){
		if(previons!=100){alles_audio[previons].pause()};
		this.play();
		previons=this.id;
	}
}
</script>

Я ещё хотел сказать, что отдельный тег аудио для каждой песни делать не рентабельно, это - излишняя загрузка процессора и влечёт за собой проблему избежания одновременной игры треков. Можно сделать, чтобы тег аудио на странице был только один, а кликая по названию песни в треклисте изменять его свойство src и по-новой запускать:
<style>
li:hover{
	width:100px;
	background:gold;
	cursor:pointer;
}
</style>
<audio id=audio src="sound1.mp3" controls></audio>
<ul>
	<li id="sound1.mp3">sound1</li>
	<li id="sound2.mp3">sound2</li>
	<li id="sound3.mp3">sound3</li>
	<li id="sound4.mp3">sound4</li>
	<li id="sound5.mp3">sound5</li>
</ul>

<script>
var alles_li=document.getElementsByTagName("li");
for(i=0;i<alles_li.length;i++){
	alles_li[i].onclick=function(){
		audio.src=this.id;
		audio.play();
	}
}
</script>

Вместо элементов списка можно использовать ссылки или кнопки. А многотежье аудио есть смысл применять там, где действительно нужно накладывать аудиосигналы, на пример, для работы многоканального трекера.

Последний раз редактировалось Опан, 07.05.2015 в 14:28.
Ответить с цитированием
  #3 (permalink)  
Старый 09.05.2015, 17:36
Новичок на форуме
Отправить личное сообщение для Amator Посмотреть профиль Найти все сообщения от Amator
 
Регистрация: 04.05.2015
Сообщений: 4

Спасибо я вам очень благодарен за помочь! Но есть одно но... , тогда как сделать, переключения композиции на следующую после завершения? Раньше я использовал onended а как сейчас осуществить это?

Последний раз редактировалось Amator, 09.05.2015 в 18:01.
Ответить с цитированием
  #4 (permalink)  
Старый 09.05.2015, 23:24
Аватар для Опан
Кандидат Javascript-наук
Отправить личное сообщение для Опан Посмотреть профиль Найти все сообщения от Опан
 
Регистрация: 15.03.2013
Сообщений: 100

Добавляем в начале скрипта переменную index:
var index=0;

Ещё добавляем функцию:
audio.onended=function(){
	index++;
	if(index>=alles_li.length){index=0};
	audio.src=alles_li[index].id;
	audio.play();
}

Теперь задействовано событие onended. За одно и получилось, что после завершения последней песни начинает играть первая.
Ответить с цитированием
  #5 (permalink)  
Старый 02.07.2015, 02:35
Новичок на форуме
Отправить личное сообщение для theodorozzz Посмотреть профиль Найти все сообщения от theodorozzz
 
Регистрация: 02.07.2015
Сообщений: 1

А можно сделать так чтобы файлы переключать ползунком input type="range" с каким-либо выставленным шагом?
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
переключения плеера при помощи javascript karencho7777 Элементы интерфейса 5 08.11.2012 12:23
Скрипт переключения содержимого кнопками Вперед/Назад spo Общие вопросы Javascript 0 11.05.2011 19:57
Кнопка для переключения $HTTP_ACCEPT_LANGUAGE mrilyuha Javascript под браузер 7 26.01.2010 11:19
Блок переключения меню на JS, два скрипта в одном файле Dizeloid Элементы интерфейса 0 30.07.2009 12:03
Js для переключения картинок Konstantin2009 Ваши сайты и скрипты 1 10.02.2009 00:41