Определение пути через атрибут 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>

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

@Опан Юзер с абсолютным слухом 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