Определение пути через атрибут data

@Azzar90 · Регистрация: 22.07.2017

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

Всем привет.Кто может подсказать как добавить значения с помощью data атрибута?дело в том что есть такой код и я в нём создал то из чего состоит тег <audio>вот код.мне получилось сделать так чтобы при нажатии на id="plays" играла музыка,но как сделать так чтобы путь к музыке прописывался не в js а в теге li id="audio" я пытался как то передать этому тэгу через атрибут data но как то не правильно.Можете помочь подкорректировать код?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<li id="plays">проиграть</li>
<li id="plays2">стоп</li>
<li id="audio" data-src="Spacebeat.mp3"></li>
 
</ul>
<script>
var aud = new Audio();
//aud.src = 'Spacebeat.mp3';
var muz = document.getElementById('audio');
id = muz.dataset.src;
//var time = aud.duration;
// Функция stop для Audio:
HTMLAudioElement.prototype.stop = function()
{
this.pause();
this.currentTime = 0.0;
}
 
$('#plays').click(function(){
  if('#plays'){
      aud.play();
  }
  
  $('#plays2').click(function(){
   if('#plays2'){
      aud.stop();
    }
  });
});
 
</script>

@Опан · 08.11.2017, 02:52

Если я правильно понял замысел, что в будущем таких тегов <li>...</li> будет много, в каждом будет путь к такому-то аудиофайлу, и по клику на этом <li> должен будет проигрываться соответствующий аудиофайл, то проще будет путь прописать в атрибуте name или id.

@Azzar90 · 08.11.2017, 07:01 **[ТС]**

Да вы правильно поняли.эти тэги li их будет много так как настраивается сайт под музыкальную тематику.Как например zaycev.net итд

Добавлено через 14 минут
вы вот говорите что лучше использовать атрибут name для пути к mp3 но я вот попробовал и написал в теге li и путь тоже и ничего не помогло.не проигрывает.или что то не так я сделал?а вы знаете как передать переменную js в html код
var aud = new Audio();
aud.src = 'Spacebeat.mp3'; для того чтобы это строка попала в тег li для пути к файлу.что нужно сделать?

@j2FunOnly · 08.11.2017, 10:02

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Audio</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
  <body>
    <ul>
      <li id="plays">проиграть</li>
      <li id="plays2">стоп</li>
      <li class="audio" data-src="audio1.mp3">one</li>
      <li class="audio" data-src="audio2.mp3">two</li>
      <li class="audio" data-src="audio3.mp3">three</li>
    </ul>
    <script>
      var aud = new Audio();
      aud.autoplay = true;
 
      HTMLAudioElement.prototype.stop = function () {
        this.pause();
        this.currentTime = 0.0;
      }
 
      $('#plays').click(function () {
        if ('#plays') { // wtf?
          aud.play();
        }
      });
 
      $('#plays2').click(function () {
        if ('#plays2') { // wtf?
          aud.stop();
        }
      });
 
      $('.audio').click(function () {
        aud.src = this.dataset.src;
      });
    </script>
  </body>
</html>

@Azzar90 · 08.11.2017, 13:15 **[ТС]**

Спасибо огромное что подсказали мне как быть.Получается тот код что выше я написал при вопросе получается я где то ходил рядом и почти было всё верно.Но вот другой вопрос по поводу продолжительности.Не могу сделать её.Ведь должна двигаться полоса состояния от начала к концу и вот мой код
<li class="duration" data-duration=""></li>
aud.duration = this.dataset.duration; чего же здесь не хватает?

@Опан · 08.11.2017, 17:27

<li>...</li> - это пункт списка, заставлять его двигаться не очень удобно. Можно сделать прогрессбар с помощью дива с динамической шириной внутри другого дива. Вот этот же код с добавлением div id=contayner и div id=progress. За одно пример, как вместо data-src можно использовать id:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Audio</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
  <body>
    <ul>
      <li id="plays">проиграть</li>
      <li id="plays2">стоп</li>
      <li class="audio" id="audio1.mp3">one</li>
      <li class="audio" id="audio2.mp3">two</li>
      <li class="audio" id="audio3.mp3">three</li>
    </ul>
    <div id=contayner style="position:absolute;background:gold;width:300px;height:30px">
        <div id=progress style="position:absolute;background:blue;width:0px;height:30px"></div>
    </div>
    <script>
      var aud = new Audio();
      aud.autoplay = true;
 
      HTMLAudioElement.prototype.stop = function () {
        this.pause();
        this.currentTime = 0.0;
      }
 
      $('#plays').click(function () {
        if ('#plays') { // wtf?
          aud.play();
        }
      });
 
      $('#plays2').click(function () {
        if ('#plays2') { // wtf?
          aud.stop();
          clearInterval(myinterval);
        }
      });
 
      $('.audio').click(function () {
        aud.src = this.id;
        myinterval = setInterval(function(){
            progress.style.width = Math.floor(aud.currentTime / aud.duration * parseInt(contayner.style.width)) + "px";
        },200);
      });
    </script>
  </body>
</html>

Добавлено через 33 минуты
Видимо, с name я перегнул, использовать его вместо data-src что-то не получается. Вот ещё простой пример, как примерно то же можно сделать без jquery:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<body>
<ul>
    <li onclick="aud.play()">проиграть</li>
    <li onclick="aud.pause()">стоп</li>
    <li id="audio1.mp3">one</li>
    <li id="audio2.mp3">two</li>
    <li id="audio3.mp3">three</li>
</ul>
<script>
var aud = new Audio();
var all_li = document.getElementsByTagName("li");
for(var i=2; i<all_li.length; i++){
    all_li[i].onclick = function(){
        aud.src = this.id;
        aud.play();
    }
}
</script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Рецензия / Мнение/ Перевод https:/ / **********/ gallery/ thinkpad-x220-tablet-porn-gzoEAjs . . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

@Опан Юзер с абсолютным слухом 709 / 489 / 195 Регистрация: 17.12.2010 Сообщений: 1,428
	08.11.2017, 02:52
	Если я правильно понял замысел, что в будущем таких тегов <li>...</li> будет много, в каждом будет путь к такому-то аудиофайлу, и по клику на этом <li> должен будет проигрываться соответствующий аудиофайл, то проще будет путь прописать в атрибуте name или id. 0

@Azzar90 -3 / -1 / 1 Регистрация: 22.07.2017 Сообщений: 195
	08.11.2017, 07:01 [ТС]
	Да вы правильно поняли.эти тэги li их будет много так как настраивается сайт под музыкальную тематику.Как например zaycev.net итд Добавлено через 14 минут вы вот говорите что лучше использовать атрибут name для пути к mp3 но я вот попробовал и написал в теге li и путь тоже и ничего не помогло.не проигрывает.или что то не так я сделал?а вы знаете как передать переменную js в html код var aud = new Audio(); aud.src = 'Spacebeat.mp3'; для того чтобы это строка попала в тег li для пути к файлу.что нужно сделать? 0

@Azzar90 -3 / -1 / 1 Регистрация: 22.07.2017 Сообщений: 195
	08.11.2017, 13:15 [ТС]
	Спасибо огромное что подсказали мне как быть.Получается тот код что выше я написал при вопросе получается я где то ходил рядом и почти было всё верно.Но вот другой вопрос по поводу продолжительности.Не могу сделать её.Ведь должна двигаться полоса состояния от начала к концу и вот мой код <li class="duration" data-duration=""></li> aud.duration = this.dataset.duration; чего же здесь не хватает? 0