I have a loop that makes a table, and each of the rows have an audio file, the audio playing has an ID of "audio"+i to give unique ids to the different audios.
I'm making a progress bar but I need the "i" variable to determine which of the audios the progress bar should act on, if I replace "i" with a number, then it works. I just haven't found a way to get the "i" variable.
HTML/PHP where the loop and audio are:
for($i=0; $i<$count; $i++){
$res = mysqli_fetch_array($result);
echo('<tbody id="tbody">
<tr>
<audio id="audio'.$i.'" src="mp3/'.$res["song_artist"].'-'.$res["song_title"].'.mp3">
<td><button class="playbutton" id="playbtn'.$i.'" onclick="playStop('.$i.')">▷</button></td>
<td><img class="songimg" src="getimage.php?id='.$res["song_id"].'"/> </td>
<td>'.$res["song_title"].'</td>
<td>'.$res["song_artist"].'</td>
<td>'.$res["song_genre"].'</td>
<td>'.$res["song_album_name"].'</td>
</tr>
</tbody>');
}
}
Progress bar code where I need the "i" variable:
var progressbar = document.getElementById("progress-bar");
progressbar.onclick = function(e) {
var audio = document.getElementById("audio"+i);
audio.currentTime = ((e.offsetX/progressbar.offsetWidth) * audio.duration);
}
}
Thank you in advance.
One of the ways is to use a hidden field to store the value of the "i".
So in your page, add the following HTML hidden field (say I set it to have an initial value of 0 , but you may use other initial value):
<input type=hidden id=activei value="0">
Now in your function playStop(i) , add a statement to store the i value to the hidden field:
function playStop(i)
{
document.getElementById("activei").value=i;
//// other commands
}
Then , change to use
var progressbar = document.getElementById("progress-bar");
progressbar.onclick = function(e) {
var audio = document.getElementById("audio"+document.getElementById("activei").value);
audio.currentTime = ((e.offsetX/progressbar.offsetWidth) * audio.duration);
}
}
Based on your code you already have a playStop() stop function in javascript in which you pass to it the value of i as a string. From this setup you could setup an "app level" global where that i gets stored for usage by other javascript scripts in your code.
E.g.
app = {};
app.currentI = -1;
function playStop(i) {
app.currentI = parseInt(i);
// the rest of code
}
...
var progressbar = document.getElementById("progress-bar");
progressbar.onclick = function(e) {
if (app.currentI > -1) {
var audio = document.getElementById("audio" + app.currentI);
audio.currentTime = ((e.offsetX/progressbar.offsetWidth) * audio.duration);
}
}
Since the (e) will be the target, which you need upon it being clicked, the app.currentI is the i from the PHP side you also need to know which audio was clicked, since it's already hard-coded via your call to playStop().
There is probably a better way to do all this, but without testing it myself, this solution uses your current design approach and should work without any major tweaks.
Update: In regards to I couldn't make this work for me, maybe I miss understood, but when I tested this, it didn't work, I tried logging the value of app.currentI to see if something was wrong with it, and I got "app is not defined". -- yksi
Here's a working example. app itself in this example would be defined in the global scope.
var app = {};
app.currentI = -1;
function playStop(i) {
app.currentI = i;
console.log(app.currentI);
}<!doctype html>
<html>
<head>
</head>
<body>
<button onclick="playStop(0)" type="button">Play/Stop 0</button></br>
<button onclick="playStop(1)" type="button">Play/Stop 1</button></br>
<button onclick="playStop(2)" type="button">Play/Stop 2</button></br>
<button onclick="playStop(3)" type="button">Play/Stop 3</button></br>
<button onclick="playStop(4)" type="button">Play/Stop 4</button></br>
</body>
</html>I'm showing just the rendered html for the PHP part, but that code would have looked like as follows:
<?php
for ($i = 0; $i < 5; $i++) {
?>
<button onclick="playStop(<?php echo $i; ?>)" type="button">Play/Stop <?php echo $i; ?></button></br>
<?php
}
?>
In this way you won't need any hidden dom variables and can store all your app level specific stuff to a javascript object, e.g. app or any other name you specify.