Home/ Questions/Q 7927313
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T19:14:40+00:00

I’m creating an online music player using php and javascript and I can’t figure

  • 0

I’m creating an online music player using php and javascript and I can’t figure out the best way to handle an issue. I have created a MySQL database that holds the song’s Name, Artist, Album, etc.

I created a playlist from an XML file that is generated from the MySQL db which appears on the page and the only functionality I can’t get is making the name of the song appear in the “Now Playing” banner when I click on a song from the playlist.

I think I need some kind of “onClick” function but I can’t figure out exactly what I need to do. Also, I obviously don’t want to have to refresh the page just to play a new song.

Thanks for your help!

The basic code for my player is below. The actual player uses a custom interface and an XML playlist but this is basically it. I just need to figure out how to create the “Now Playing” function. Thanks!

<html>
<head>
<script type="text/javascript">

    function loadPlayer() {
        var audioPlayer = new Audio();
        audioPlayer.controls="controls";
        audioPlayer.addEventListener('ended',nextSong,false);
        audioPlayer.addEventListener('error',errorFallback,true);
        document.getElementById("player").appendChild(audioPlayer);
        nextSong();
    }
    function nextSong() {
        if(urls[next]!=undefined) {
            var audioPlayer = document.getElementsByTagName('audio')[0];
            if(audioPlayer!=undefined) {
                audioPlayer.src=urls[next];
                audioPlayer.load();
                audioPlayer.play();
                next++;
            } else {
                loadPlayer();
            }
        } else {
            alert('the end!');
        }
    }
    function errorFallback() {
            nextSong();
    }
    function playPause() {
        var audioPlayer = document.getElementsByTagName('audio')[0];
        if(audioPlayer!=undefined) {
            if (audioPlayer.paused) {
                audioPlayer.play();
            } else {
                audioPlayer.pause();
            }
        } else {
            loadPlayer();
        }
    }
    function pickSong(num) {
        next = num;
        nextSong();
    }

    var urls = new Array();
        urls[0] = '/testphp/upload/Sleep Away.mp3';
        urls[1] = '/testphp/upload/Kalimba.mp3';
        urls[2] = '/testphp/upload/Sleep Away.mp3';
        urls[3] = '/testphp/upload/Kalimba.mp3';
    var next = 0;


</script>

</head>
<body>

<div id="player"></div>
<a href="#" onclick="playPause()">Play / Pause!</a> |
<a href="#" onclick="nextSong()">Next!</a><br><br>

<a href="#" onclick="pickSong(0)">Sample 1</a><br>
<a href="#" onclick="pickSong(1)">Sample 2</a><br>
<a href="#" onclick="pickSong(2)">Missing File</a><br>
<a href="#" onclick="pickSong(3)">Sample 3</a>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I assume the name of the song you clicked on is on the page right? If so you can use jquery to grab that name and write it to the banner but like the first comment said, it is hard to help you without seeing some kind of code or example code.

    Update: Assuming you have jquery.

    Ok, so you just need to create a div for now playing

    <div id="nowPlaying"></div>

    For the pick song html, add a class to the anchor tags something like class=”songs” then create a jquery function to catch the clicking

    $('a.songs').click(function(){
    $('#nowPlaying').html($(this).html());
});

    I have not tested but it should work, this function will pick up the html for the anchor you clicked on and output it in nowPlaying. For the next() function you just need to output the song name in the correct position of the array (you have to parse the string so it outputs the name, btw the names in the array should match the html). Something like this inside the nextsong function

    $('#nowPlaying').html(parseThis(urls[index]));

    you have to define parseThis to parse your string so it gives the song name instead of the entire path. Or you can create a different array that only has the song name so you can just grab it. Make sure you have a default case for if there is no next song or you can circle back to the fist song, that’s up to you. That’s the logic at least, it’s fairly simple and the logic can probably be improved as well but that should get you started

    • 0