So I would like to create a page where there are 5 audio players and, depending on the click on the play button, the music should be played on the player in question. In my case the music is always and only played in the first player. I thought about looping after designating the player class with document.getElementsByClassName but then I just can’t figure out how I could proceed
let content = document.getElementById("content");
let players = document.getElementsByClassName("player");
// Specify globally used values
let isPlaying = "";
let updateTimer;
for(i = 0; i < players.length; i++) {
console.log(players)
}
// Select all the elements in the HTML page
// and assign them to a variable
let track_name = document.querySelector(".track-name");
let playpause_btn = document.querySelector(".playpause-track");
let seek_slider = document.querySelector(".seek_slider");
let volume_slider = document.querySelector(".volume_slider");
let curr_time = document.querySelector(".current-time");
let total_duration = document.querySelector(".total-duration");
// Create the audio element for the player
let curr_track = document.createElement('audio');
// Define the list of tracks that have to be played
let track_list = [
{
name: "1",
artist: "",
image: "Image URL",
path: "patches/fm8.mp3",
},
{
name: "2",
artist: "",
image: "Image URL",
path: "patches/absynth.mp3",
},
];
document.getElementById("1").addEventListener("click", someFunction);
document.getElementById("2").addEventListener("click", someFunction);
//assegno pulsante a brano
function someFunction(event) {
console.log(event.target.id);
let brano = event.target.id;
switch(brano) {
case "1": track_index = 0;
break;
case "2": track_index = 1;
break;
}
function loadTrack(track_index) {
// Clear the previous seek timer
clearInterval(updateTimer);
resetValues();
// Load a new track
curr_track.src = track_list[track_index].path; // qui con 0, 1, 2, 3 etc seleziono il brano da riprodurre
curr_track.load();
track_name.textContent = track_list[track_index].name;
// Set an interval of 1000 milliseconds
// for updating the seek slider
updateTimer = setInterval(seekUpdate, 1000);
}
// Load the first track in the tracklist
loadTrack([track_index]);
/*
let isPlaying = curr_track.currentTime > 0 && !curr_track.paused && !curr_track.ended
&& curr_track.readyState > curr_track.HAVE_CURRENT_DATA;
*/
if (!isPlaying) {
curr_track.play();
isPlaying = true;
playpause_btn.innerHTML = '<i class="fas fa-pause"></i>';
}}
// Function to reset all values to their default
function resetValues() {
curr_time.textContent = "00:00";
total_duration.textContent = "00:00";
seek_slider.value = 0;
if (isPlaying) pauseTrack();
}
function playpauseTrack() {
// Switch between playing and pausing
// depending on the current state
if (!isPlaying) playTrack();
else pauseTrack();
}
function playTrack() {
// Play the loaded track
curr_track.play();
isPlaying = true;
// Replace icon with the pause icon
playpause_btn.innerHTML = '<i class="fas fa-pause"></i>';
}
function pauseTrack() {
// Pause the loaded track
if(isPlaying) {
curr_track.pause();
isPlaying = false;
// Replace icon with the play icon
playpause_btn.innerHTML = '<i class="fas fa-play"></i>';
}}
function seekTo() {
// Calculate the seek position by the
// percentage of the seek slider
// and get the relative duration to the track
seekto = curr_track.duration * (seek_slider.value / 100);
// Set the current track position to the calculated seek position
curr_track.currentTime = seekto;
}
function setVolume() {
// Set the volume according to the
// percentage of the volume slider set
curr_track.volume = volume_slider.value / 100;
}
function seekUpdate() {
let seekPosition = 0;
// Check if the current track duration is a legible number
if (!isNaN(curr_track.duration)) {
seekPosition = curr_track.currentTime * (100 / curr_track.duration);
seek_slider.value = seekPosition;
// Calculate the time left and the total duration
let currentMinutes = Math.floor(curr_track.currentTime / 60);
let currentSeconds = Math.floor(curr_track.currentTime - currentMinutes * 60);
let durationMinutes = Math.floor(curr_track.duration / 60);
let durationSeconds = Math.floor(curr_track.duration - durationMinutes * 60);
// Add a zero to the single digit time values
if (currentSeconds < 10) { currentSeconds = "0" + currentSeconds; }
if (durationSeconds < 10) { durationSeconds = "0" + durationSeconds; }
if (currentMinutes < 10) { currentMinutes = "0" + currentMinutes; }
if (durationMinutes < 10) { durationMinutes = "0" + durationMinutes; }
// Display the updated duration
curr_time.textContent = currentMinutes + ":" + currentSeconds;
total_duration.textContent = durationMinutes + ":" + durationSeconds;
}
}div#main {margin-top: 50px;}
.contain {
height: 150px;
width: 700px;
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 0 auto;
align-items: center;
background-color: #000;
}
.contain + .contain {margin-top: 50px;}
div.image {
margin-top: 2px;
}
.patchimg {
width: 150px;
height: 150px;}
div.desc {
display: flex;
align-items: center;
width: 400px;
height: 200px;
padding-left: 30px;
padding-right: 20px;
}
.descr {
height: 100px;
width: 700px;
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 0 auto;
margin-top: 20px;
align-items: center;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
}
.descr p {
margin-left: 14px;
font-size: 12px;
color: #000;
padding: 10px;
}
#playerdiv {
display: flex;
align-items: center;
width: 400px;
height: 100px;
padding-left: 30px;
padding-right: 20px;
background-color: black;
display: none;
}
/*starts player code*/
#content{
margin: 0 auto;
margin-right: 30px;
width: auto;
display: flex;
justify-content: center;
}
/* Using flex with the row direction to
align items in a horizontal direction */
.buttons {
height: 30px;
display: flex;
align-items: center;
color: #fff;
opacity: 0.9;
}
i.fa-volume-down,
i.fa-volume-up {
padding: 10px;
color: #fff;
margin-top: 10px;
}
.playpause-track {
padding: 20px;
opacity: 0.8;
/* Smoothly transition the opacity */
transition: opacity .2s;
}
/* Change the opacity when mouse is hovered */
.playpause-track:hover {
float: right;
opacity: 1.0;
cursor: pointer;
}
/* Define the slider width so that it scales properly */
.slider_container {
color: #fff;
width: 120%;
max-width: 960px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0.8;
}
/* Modify the appearance of the slider */
input.seek_slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 5px;
width: 300px;
background: #fff;
opacity: 0.9;
-webkit-transition: .2s;
transition: opacity .2s;
}
.fa, .fas {font-weight: 900px;}
/* Modify the appearance of the slider thumb */
.seek_slider::-webkit-slider-thumb,
.volume_slider::-webkit-slider-thumb {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 15px;
height: 15px;
background: #fff;
cursor: pointer;
border-radius: 50%;
}
/* Change the opacity when mouse is hovered */
.seek_slider:hover,
.volslide:hover {
opacity: 1.0;
}
.seek_slider {
width: 100%;
}
.current-time,
.total-duration {
padding: 10px;
color: #fff;
}
/* Change the mouse cursor to a pointer
when hovered over */
i.fa-play-circle,
i.fa-pause-circle,
i.fa-step-forward,
i.fa-step-backward {
cursor: pointer;
}
div.playpause-track{
margin-right: -5px;
}<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LISEROS - PATCHES</title>
<!--style-->
<link href="CSS/patches.css" type="text/css" rel="stylesheet" />
<!--BUTTONS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
</head>
<body>
<div id="main">
<!--PATCH BLOCK -->
<div class="contain">
<div class="image">
<a class="open" href="#playerdiv"><input type="image"class="patchimg" src="images/patches/fm8.png"></a>
</div>
<div id="content">
<!--apro player-->
<div class="player">
<!-- Define the section for displaying track buttons -->
<div class="buttons"> <span class="track-name"></span>
<!-- Define the section for displaying the seek slider-->
<div class="playpause-track" id="1" type="button" onclick="playpauseTrack()">
<i class="fas fa-play"></i>
</div>
<div class="slider_container"><div class="current-time">00:00</div><input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()"><div class="total-duration">00:00</div></div>
<span class="buypatch"> <a href="" target="_blank" rel="noopener noreferrer"> BUY </a></span>
<!--chiudo buttons-->
</div>
<!--chiudo player-->
</div>
<!--chiudo content-->
</div>
</div>
<div class="descr">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse architecto voluptas,
veritatis distinctio neque ipsam libero minus laborum facilis impedit tenetur labore,
corrupti vel. Quaerat non ut dolore cum quasi? </p>
</div>
<!--PATCH BLOCK -->
<!--PATCH BLOCK -->
<div class="contain">
<div class="image">
<a class="open" href="#playerdiv"><input type="image"class="patchimg" src="images/patches/fm8.png"></a>
</div>
<div id="content">
<!--apro player-->
<div class="player">
<!-- Define the section for displaying track buttons -->
<div class="buttons"> <span class="track-name"></span>
<!-- Define the section for displaying the seek slider-->
<div class="playpause-track" id="2" type="button" onclick="playpauseTrack()">
<i class="fas fa-play"></i>
</div>
<div class="slider_container"><div class="current-time">00:00</div><input type="range" min="1" max="100" value="0" class="seek_slider" onchange="seekTo()"><div class="total-duration">00:00</div></div>
<span class="buypatch"> <a href="" target="_blank" rel="noopener noreferrer"> BUY </a></span>
<!--chiudo buttons-->
</div>
<!--chiudo player-->
</div>
<!--chiudo content-->
</div>
</div>
<div class="descr">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse architecto voluptas,
veritatis distinctio neque ipsam libero minus laborum facilis impedit tenetur labore,
corrupti vel. Quaerat non ut dolore cum quasi? </p>
</div>
<!--PATCH BLOCK -->
</div>
<!--end of logo-->
<script src="js/patches.js"></script>
</body>
</html>