Плейлист

@Шукрона · Регистрация: 03.01.2017

Author24 — интернет-сервис помощи студентам

Помогите пожалуйста создать плейлист на HTML и JS. Очень нужна помощь. Заранее спасибо.

@Опан · 08.11.2017, 22:50

HTML5

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

Javascript

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

@Шукрона · 10.11.2017, 19:34 **[ТС]**

Спасибо большое за помощь. Хотела бы узнать почему не воспроизводятся следующие аудио по списку когда нажимаешь на них?

@shvyrevvg · 10.11.2017, 19:58

Сообщение от Шукрона

Хотела бы узнать почему не воспроизводятся следующие аудио по списку когда нажимаешь на них?

mp3 вместе с html файлом в одной директории находятся?

@Шукрона · 10.11.2017, 20:56 **[ТС]**

HTML5

<html>
<head><title></title>
 
 
<script>
var alles_li = document.getElementsByTagName("li");
for(var i = 0; i < alles_li.length; i++){
    alles_li[i].onclick = function(){
        audio.src = this.id;
        audio.play();
    }
}
</script>
 
<style>
li:hover{
    width:100px;
    background:gold;
    cursor: pointer;
}
</style>
 
</head>
<body>
 
<audio id=audio src="1.mp3" controls></audio>
 
<ul>
    <li id="1.mp3">sound1</li>
    <li id="2.mp3">sound2</li>
    <li id="3.mp3">sound3</li>
 
</ul>
 
</body>
</html>

Добавлено через 9 минут
Вот вес код на одной HTML странице

@Опан · 10.11.2017, 22:08

Но так у Вас получается, что скрипт, обращающийся к тегам <li>...</li> должен работать до того, как они загрузятся на странице. Чтобы такого не было, скрипт должен быть или в конце странице, или в отдельном JS-файле, на который ссылка находится между <head>...</head>, но с атрибутом defer.

Добавлено через 39 минут
Одним словом, сделайте такую страницу:

PHP/HTML

<html>
<head>
<style>
li:hover{
    width:100px;
    background:gold;
    cursor:pointer;
}
</style>
</head>
<body>
<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(var i = 0; i < alles_li.length; i++){
    alles_li[i].onclick = function(){
        audio.src = this.id;
        audio.play();
    }
}
</script>
</body>
</html>

@Шукрона 0 / 0 / 0 Регистрация: 03.01.2017 Сообщений: 22
		1
	Плейлист 07.11.2017, 17:40. Показов 12471. Ответов 5 Метки нет (Все метки) Помогите пожалуйста создать плейлист на HTML и JS. Очень нужна помощь. Заранее спасибо. 0

@Шукрона 0 / 0 / 0 Регистрация: 03.01.2017 Сообщений: 22
	10.11.2017, 19:34 [ТС]	3
	Спасибо большое за помощь. Хотела бы узнать почему не воспроизводятся следующие аудио по списку когда нажимаешь на них? 0

@shvyrevvg 1786 / 1036 / 445 Регистрация: 12.05.2016 Сообщений: 2,550
	10.11.2017, 19:58	4
	Сообщение от Шукрона Хотела бы узнать почему не воспроизводятся следующие аудио по списку когда нажимаешь на них? mp3 вместе с html файлом в одной директории находятся? 0

	10.11.2017, 22:08

Плейлист

Решение