I am developing a music player using PHP/mysql and JQuery and I am having trouble "Pausing" the audio. Currently when it pauses it starts from the beginning again, Am i missing something? is there a better way to do this?
Index.php
<?php
include 'header.php';
include 'config/config.php';
?>
<div class="content">
<div class="left-sidebar">
<table>
<?php
$sql = "SELECT mp_id, mp_name, mp_desc, mp_img, mp_media FROM media";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo '
<tr>
<td class="image-song"><img class="song-img" src="'.$row["mp_img"].'"/>
' . $row["mp_name"]. '
<audio class="media-link" src="' . $row["mp_media"]. '"> </audio>
<button class="left-play" type="button" onclick="playAudio(this)"><img src="images/play-button.svg"></button>
<button class="left-pause" onclick="pauseAudio(this)"><img src="images/pause-button.svg"></button></td>
</tr>
';
}
}
else {
echo "No music available";
}
$conn->close();
?>
</table>
</div>
<div class="player-sec">
<div class="main-player">
</div>
<div class="audio-controls">
<span class="prev-btn"><img src="images/rewind-button.svg"></span>
<span class="play-btn" onClick="playAudio()"><img src="images/play-button.svg"></span>
<span class="next-btn"><img src="images/forward-button.svg"></span>
</div>
</div>
<?php
include 'footer.php';
?>
Javascript.js
function playAudio(playButton) {
jQuery('audio').each(function() {
this.pause();
this.currentTime = 0;
});
var song = playButton.previousElementSibling;
song.play();
var element = document.getElementsByClassName("left-play");
element.classList.add("active");
var element = document.getElementsByClassName("left-pause");
element.classList.add("pausable");
}
function pauseAudio(pauseButton) {
jQuery('audio').each(function() {
this.pause();
});
var nsong = pauseButton.getElementsByClassName("media-link");
nsong.pause();
}