JavaScript Music Player (Progress bar + Track title error)

Question

I had posted some questions to try and get a music player finished and came to the conclusion I needed to re-write my code. With this fresh code its a lot smoother and I belive my bugs now to be a simple fix, I am just not sure what they are. I'll provide a short video along with the explaination and code below. Thanks for any input and explainations to where I went wrong!

So, upon page load / refresh the title of track1 is 'Send Me On My Way' which can be seen in the HTML. However this will not play a song. Track 1 (or others) will play following (nextSong / previousSong) functions. It will then display track1.mp3 (not the title) I tried to edit the name of the songs in the file but then they didnt play.

This is my main issue to get the player up and running as intended. Finally, I was hoping to add some functionality to the progress bar by allowing the user to skip the song, not totally needed but if its a simple edit that would be appreciated.

A visual below https://imgur.com/a/oFuBKLY

</audio>

<header id="about">
    <div class="menu">
        <span class="bar"></span>
    </div>
    <nav class="nav">
        <div class="overlay">
            <ul>
                <li><a href="index.html">Home</a> </li>
                <li><a class=active href="Album.html">Album</a> </li>
                <li><a href="Gallery.html">Gallery</a> </li>
                <li><a href="Book.html">Book Us</a> </li>
            </ul>
        </div>
    </nav>

<div id="main">
    <div id="image">
        <img src="/images/J&G Logo.png"/>
    </div>
    <div id="player">
        <div output id ="songTitle"  >Im On My Way</div>
            <div id="buttons">
                <button id="pre" onclick="pre()"><img src="/images/backwards.png"></button>
                <button id="play" onclick="playOrPauseSong()"><img src="/images/play.png"></button>
                <button id="next" onclick="next()"><img src="/images/forwards.png"></button>
        </div>
    </div>


    <div id="seek-bar">
        <div id="fill"></div>
        <div id="handle"></div>
    </div>
</div>

and the script

var songs = ["/music/Track1.mp3", "/music/Track2.mp3", "/music/Track3.mp3", "/music/Track4.mp3", "/music/Track5.mp3", "/music/Track6.mp3", "/music/Track7.mp3"];
var poster = ["/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png"];

var songTitle = document.getElementById("songTitle");
var fillBar = document.getElementById("fill");

var song = new Audio();
var currentSong = 0;


function playSong(){

   song.src = songs[currentSong];

   songTitle.textContent = songs[currentSong];

   song.play();
}
       function playOrPauseSong(){

           if(song.paused){
               song.play();
               $("#play img").attr("src","/images/Pause.png");
           }
           else{
               song.pause();
               $("#play img").attr("src","/Images/Play.png");
           }
       }

       song.addEventListener('timeupdate',function(){

           var position = song.currentTime / song.duration;

           fillBar.style.width = position * 100 +'%';
       });


       function next(){

           currentSong++;
           if(currentSong > 6){
               currentSong = 0;
           }
           playSong();
           $("#play img").attr("src","/images/Pause.png");
           $("#image img").attr("src",poster[currentSong]);
           $("#bg img").attr("src",poster[currentSong]);
       }

       function pre(){

           currentSong--;
           if(currentSong < 0){
               currentSong = 6;
           }
           playSong();
           $("#play img").attr("src","/images/Pause.png");
           $("#image img").attr("src",poster[currentSong]);
           $("#bg img").attr("src",poster[currentSong]);
       }

Answer 1

I have created a small example based on your code with progress bar and very basic title selection logic. I fixed the first play action and first title issues as well. You can refer to w3schools where you can find more examples of events and attributes for tag.

var songs = ["https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-4.mp3", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-5.mp3", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-6.mp3", "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-7.mp3"];
var poster = ["/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png", "/images/J&G Logo.png"];
var titles = ["I'm On My Way", "Rolling In The Deep", "Mad World", "Too Close", "Feelin' Good", "I Will Wait", "All These Things That I've Done"]

var songTitle = document.getElementById("songTitle");
var fillBar = document.getElementById("fill");

var song = new Audio();
var currentSong = 0;
songTitle.textContent = titles[currentSong];

function playSong(){

   song.src = songs[currentSong];

   songTitle.textContent = titles[currentSong];

   song.play();
}
       function playOrPauseSong(){
           if(song.paused){
               playSong();
               $("#play img").attr("src","/images/Pause.png");
           }
           else{
               song.pause();
               $("#play img").attr("src","/Images/Play.png");
           }
       }

       song.addEventListener('timeupdate',function(){
          $('#seekbar').attr("value", this.currentTime / this.duration);
       });


       function next(){
           currentSong++;
           if(currentSong > songs.length - 1){
               currentSong = 0;
           }
           playSong();
           $("#play img").attr("src","/images/Pause.png");
           $("#image img").attr("src",poster[currentSong]);
           $("#bg img").attr("src",poster[currentSong]);
       }

       function pre(){
           currentSong--;
           if(currentSong < 0){
               currentSong = songs.length - 1;
           }
           playSong();
           $("#play img").attr("src","/images/Pause.png");
           $("#image img").attr("src",poster[currentSong]);
           $("#bg img").attr("src",poster[currentSong]);
       }
       
       function countProgress(event) {
          
       }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</audio>

<header id="about">
    <div class="menu">
        <span class="bar"></span>
    </div>
    <nav class="nav">
        <div class="overlay">
            <ul>
                <li><a href="index.html">Home</a> </li>
                <li><a class=active href="Album.html">Album</a> </li>
                <li><a href="Gallery.html">Gallery</a> </li>
                <li><a href="Book.html">Book Us</a> </li>
            </ul>
        </div>
    </nav>

<div id="main">
    <div id="image">
        <img src="/images/J&G Logo.png"/>
    </div>
    <div id="player">
        <div output id="songTitle"></div>
            <div id="buttons">
                <button id="pre" onclick="pre()"><img src="/images/backwards.png"></button>
                <button id="play" onclick="playOrPauseSong()"><img src="/images/play.png"></button>
                <button id="next" onclick="next()"><img src="/images/forwards.png"></button>
        </div>
    </div>

<progress id="seekbar" value="0" max="1" style="width:200px;"></progress>
</div>