Все шалом! Почему воспроизводится только первый трек, а второй не хочет? Я нажимаю на кнопку 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>
Средний