PINTAGON
@PINTAGON
Веб разработчик

Почему воспроизводится только первый трек, а второй не хочет?

Все шалом! Почему воспроизводится только первый трек, а второй не хочет? Я нажимаю на кнопку play на втором треке играет первый вместо второго, как это исправить? Вот код
var audio = document.getElementsByTagName("audio")[0];
var audio_box = document.getElementsByClassName("audio_box")[0];
var audio_bar = document.getElementsByClassName("audio_bar")[0];
var pregress_bar = document.getElementsByClassName("audio_progress")[0];
var play_btn = document.getElementsByClassName("audio_play")[0];
var audio_time = document.getElementsByClassName("audio_time")[0];

window.setInterval(function () {
   updateProgressBar();
}, 100);

function updateProgressBar () {
   var percent = audio.currentTime / audio.duration * 100;
   pregress_bar.style.width = "" + percent + "%";
   audio_time.innerHTML = getTime(Math.round(audio.currentTime)) + " / " + getTime(Math.round(audio.duration));
}

function pause () {
   if (audio.paused) {
      audio.play();
      play_btn.classList.toggle('audio_pause');
   } else {
      audio.pause();
      play_btn.classList.toggle('audio_pause');
   }
}

function forword () {
   audio.currentTime += 30;
}

function backward () {
   audio.currentTime -= 30;
}

function getTime (totalSeconds) {
   var minutes = Math.floor(totalSeconds / 60);
   var seconds = Math.floor(totalSeconds % 60);

   return minutes + ":" + ('0' + seconds).slice(-2);
}

audio_bar.addEventListener("click", getClickPosition, false);

function getClickPosition (event) {
   var parentPosition = getPosition(event.currentTarget);
   var xPosition = event.clientX - parentPosition.x;
   var yPosition = event.clientY - parentPosition.y;

   audio.currentTime = Math.round((xPosition / audio_bar.offsetWidth) * audio.duration);
}

function getPosition (element) {
   var xPosition = 0;
   var yPosition = 0;

   while (element) {
      xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
      yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
      element = element.offsetParent;
   }
   return {x: xPosition, y: yPosition};
}

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <!-- google fonts -->
   <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext">
   <!-- coomon style -->
   <link rel="stylesheet" href="styles/common.css">
   <!-- google jquery  -->
   <script src="javascripts/jquery.min.js" type="text/javascript"></script>
   <title>Audio Player</title>
</head>
<body>
   <div class="music">
      <audio>
         <source src="audios/jackpot.mp3" type="audio/mpeg">
      </audio>
      <div class="audio_box">
         <div class="audio_controls">
            <div class="audio_backward" onclick="backward()"></div>
            <div class="audio_play" onclick="pause()"></div>
            <div class="audio_forward" onclick="forword()"></div>
            <div class="audio_time"></div>
         </div>
         <div class="audio_bar">
            <div class="audio_progress"></div>
         </div>
      </div>
   </div>
<script src="javascripts/common.js" type="text/javascript"></script>
</body>
</html>
  • Вопрос задан
  • 68 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Sveak Барнаул
от 50 000 руб.
NewTech Екатеринбург
от 70 000 до 120 000 руб.