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>
  • Вопрос задан
  • 91 просмотр
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы