I got this basic music player, when I click an image music starts, when I click it again music stops, and so on. When I do this in HTML everything work properly.
<script>
function StartOrStop(audioFile) {
var audie = document.getElementById("myAudio");
if (!audie.src || audie.src !== audioFile) audie.src = audioFile;
console.log(audie.paused);
if (audie.paused == false) {
console.log('pause');
audie.pause();
} else {
console.log('play');
audie.play();
}
}
</script>
<img src="images/play.png" alt="Play Button" width="400" height="400" onclick="StartOrStop('myMP3.mp3')">
<audio id="myAudio"></audio>
but when i try to connect this to my Database I should simply replace 'myMP3.mp3' with '<?php echo $trackA; ?>'. When I do this and I click for the first time I hear my song, but, when i try to pause the song, the song start from the beginning, it's like the player refresh.
<img src="images/play.png" alt="Play Button" width="400" height="400" onclick="StartOrStop('folder/subfolder/<?php echo $trackA; ?>')">
What am I doing wrong? I tried to activate controls in the audio tag just to understand what's going on, tha controls work properly but when I click the image the song start from the beginning insted of stop it.
I tried also to insert a var song in the script but same resoult.
In the console in HTML everything works, but in php I only get true and play.
what can it be? any ideas?
I found this solution and seems work to me. in the HTML i add the src to my audio tag insted of take the src from the image
<img src="images/play.png" alt="Play Button" width="400" height="400" onclick="StartOrStop()">
<audio src="admin/files/<?php echo $trackA; ?>" id="myAudio"></audio>
and then i edit the js
<script>
function StartOrStop() {
var audie = document.getElementById("myAudio");
console.log(audie.paused);
if (audie.paused == false) {
console.log('pause');
audie.pause();
} else {
console.log('play');
audie.play();
}
}
</script>
now, i don't know why it's work!
