Переключения композиии
Подскажите пожалуйста как сделать чтобы одна композиция выключалась, при клике на воспроизведении другой композиции!
На примере этого кода: <!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> |
Добавляем это:
<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>
Вместо элементов списка можно использовать ссылки или кнопки. А многотежье аудио есть смысл применять там, где действительно нужно накладывать аудиосигналы, на пример, для работы многоканального трекера. |
Спасибо я вам очень благодарен за помочь! Но есть одно но... , тогда как сделать, переключения композиции на следующую после завершения? Раньше я использовал onended а как сейчас осуществить это?
|
Добавляем в начале скрипта переменную index:
var index=0; Ещё добавляем функцию:
audio.onended=function(){
index++;
if(index>=alles_li.length){index=0};
audio.src=alles_li[index].id;
audio.play();
}
Теперь задействовано событие onended. За одно и получилось, что после завершения последней песни начинает играть первая. |
А можно сделать так чтобы файлы переключать ползунком input type="range" с каким-либо выставленным шагом?
|
| Часовой пояс GMT +3, время: 03:18. |