Need some javascript show image and play song at same time

Question

I am trying to figure out how to display an image inside of a div that corresponds to the song that is playing in the playlist. Right now I only have the image showing IF the person has actually CLICKED a song, but I would like it to show the image when the code shifts from one song to the next automatically. I do not know how to do that as I am very new to jquery here are the relevant snippets.

This is just a snippet of the playlist:

<li>
  <a href="audio/02.mp3"onclick="changeImg('audio/2.jpg');" >
    Above All - Michael W. Smith
  </a>
</li>

and this is these are the scripts used(which by the way, I am sure can be condensed in a very big way - but I have not attempted this as of yet!

<script>
$(document).ready(function () {
  init();
  function init(){
    var current = 0;
    var audio = $('#audio');
    var playlist = $('#playlist');
    var tracks = playlist.find('li a');
    var len = tracks.length - 1;
    var imghol = document.getElementById("imageHolder");
    audio[0].volume = .10;
    audio[0].play();
    playlist.on('click','a', function(e){
      e.preventDefault();
      link = $(this);
      current = link.parent().index();
      run(link, audio[0]);
    });
    audio[0].addEventListener('ended',function(e){
      current++;
      if(current == len){
        current = 0;
        link = playlist.find('a')[0];
      }else{
        link = playlist.find('a')[current];    
      }
      run($(link),audio[0]);
    });
  }
  function run(link, player){
    player.src = link.attr('href');
    par = link.parent();
    par.addClass('active').siblings().removeClass('active');
    player.load();
    player.play();
  }
});
</script>

<script type="text/javascript">
  function changeImg(image){
  var imghol = document.getElementById("imageHolder");
  imghol.src = image;
}
</script>    

So far everything works GREAT, but as I said - I would LIKE to have the image that corresponds to the song automatically switch to another image when the song auto plays a different song.

The image showing method was taken from this site where someone else asked how to show an image when clicking on a list item, and I adapted the answer to fit what I needed it to show - but cannot figure out to get it to auto show!

Thanks :)

Answer 1

The code below is fully untested. See the edit below.
I re-ordered things in there.

Please change your markup from <a href="audio/02.mp3"onclick="changeImg('audio/2.jpg');" >
to this: <a href="audio/02.mp3">

Adjust your filenames to match!
audio/02.mp3 should match audio/02.jpg
Just the file extention needs to be different.

Then, consider this:

<script>
$(document).ready(function () {
  var current = 0;
  var audio = $('#audio');
  var playlist = $('#playlist');
  var tracks = playlist.find('li a');
  var len = tracks.length - 1;
  var imghol = $("#imageHolder");

  function init(){
    audio[0].volume = .10;
    //audio[0].play();
  }
  init();

  // Your click handler
  playlist.on('click','a', function(e){
    e.preventDefault();
    link = $(this);
    current = link.parent().index();
    run(link, audio[0]);
  });

  // Audio end event handler
  audio.on('ended',function(e){
    current++;
    if(current == len){
      current = 0;
      link = playlist.find('a')[0];
    }else{
      link = playlist.find('a')[current];    
    }
    run($(link),audio[0]);
  });

  // Run function
  function run(link, player){
    player.src = link.attr('href');
    par = link.parent();
    par.addClass('active').siblings().removeClass('active');
    player.load();
    player.play();

    // The image change is here
    href = link.attr("href");
    href = href.replace(".mp3",".jpg");   // changes .mp3 for .jpg ADJUST your file naming
    //imghol.src = href;
    imghol.attr("src",href);
  }

}); // ready
</script>

---

EDIT

I tryed your code from the PasteBin.

There is just 4 errors to be fixed. The first was from my suggested code.

1. In the run() function, imghol.src = href; should be imghol.attr("src",href); since imghol is a jQuery object.

The other errors are yours.

2. href = href.replace("audio/02.mp3","audio/02.jpg"); This line is intended to catch the file name from the href but with a changed extension (from .mp3 to .jpg). My suggestion was correct. It has to be href = href.replace(".mp3",".jpg");
3. Change <body onload="PlayerLoaded()"> to <body>. This function does not exist anymore.
4. Remove audio[0].play(); from the init() function. You don't want to play anything yet... There is no file to play!

Now some advises:

Don't use jQuery slim! For the code you actually have, it's ok. But as soon as you will try to add an animation (like a fadeIn()) to the images... It won't work. The slim version is the same as the full version MINUS the animations, Ajax and more usefull stuff. That is only good were performance is important. But without all that jQuery has to offer... Better just use plain JavaScript! If you experiment jQuery, use the full library.

And use the console. All hints to debug your script were there for you to see.