Estoy desarrollando un reproductor de música usando PHP/mysql y JQuery y tengo problemas para "Pausar" el audio. Actualmente, cuando hace una pausa, vuelve a empezar desde el principio. ¿Me estoy perdiendo algo? ¿Hay una mejor manera de hacer esto?

Índice.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(); }