code for Louys

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
<![endif]-->
<title>Winning Women Bible Study - Worship Corner</title>
<link href="music.css" rel="stylesheet" type="text/css" media="screen">
<script src="jquery-3.2.1.slim.min.js"></script>
</head>

<body onload="PlayerLoaded()">
    <div id="container"><!--begin container div -->

<div class="navigation"><!--begin navigation div -->
 		  <li><a href="index.html" target="_self">Home</a></li>
          <li><a href="calendar.html" target="_self">Calendar</a></li>
          <li><a href="studyrecap.html" target="_self">Study Recap</a></li>
          <li><a href="music.html" target="_self">Worship Corner</a></li>
</div><!--end navigation-->

<div class="headbanner"><!--begin the banner-->
<div id="bimagehold"><img src="limage.jpg" width="256" height="200" alt="leftbannerimage"></div><!--end leftimage-->
<div id="centername"><h1>Winning Women</h1><p>Bible Study Group</p></div><!--end centername-->
<div id="righttag"><h2>She is more precious than jewels, and nothing you desire can compare with her. Long life is in her right hand; in her left hand are riches and honor. Her ways are ways of pleasantness, and all her paths are peace. She is a tree of life to those who lay hold of her; those who hold her fast are called blessed.</h2><p>Proverbs 3: 15-18</p></div><!--end righttag-->
</div><!--end headbanner-->

<div class="main"><!--begin main content-->

<div class="section"><!--begin section-->
  <!--BEGIN THE PLAYER SECTION AND CONTROLS-->
  <audio id="audio" preload="auto" tabindex="0" controls="" ></audio>
 <ul id="playlist">
         <li class="active">
            <a href="audio/01.mp3" >
                10,000 Reasons - Matt Redman
            </a>
        </li>

        <li>
            <a href="audio/02.mp3" >
                Above All - Michael W. Smith
            </a>
        </li>

        <li>
            <a href="audio/03.mp3" >
                His Eye Is On The Sparrow - B J Tomas
            </a>
        </li>

        <li>
            <a href="audio/04.mp3">
                Breathe - Michael W. Smith
            </a>
        </li>

         <li>
            <a href="audio/05.mp3">
                You Are My King - Chris Tomlin
            </a>
        </li>

        <li>
            <a href="audio/06.mp3" >
                God Will Make A Way - Don Moen
            </a>
        </li>

         <li>
            <a href="audio/07.mp3" >
                Mighty To Save - Hillsong
            </a>
        </li>

        <li>
            <a href="audio/08.mp3" >
                Strong Enough - Matthew West
            </a>
        </li>

         <li>
            <a href="audio/09.mp3" >
                I Can Only Imagine - MercyMe
            </a>
        </li>

        <li>
            <a href="audio/10.mp3"  >
                Let It Rain - Michael W. Smith
            </a>
        </li>

        <li>
            <a href="audio/11.mp3"  >
                The Warrior Is A Child - Twila Paris
            </a>
        </li>

        <li>
            <a href="audio/12.mp3">
                Through My Fathers Eyes - Holly Starr
            </a>
        </li>

        <li>
            <a href="audio/13.mp3" >
                What A Friend We Have In Jesus
            </a>
        </li>


        <li>
            <a href="audio/14.mp3" >
                While Im Waiting - John Waller/Fireproof
            </a>
        </li>

        <li>
            <a href="audio/15.mp3">
                Open The Eyes Of My Heart - Michael W. Smith
            </a>
        </li>

        <li>
            <a href="audio/16.mp3" >
                Shout To The Lord - Darlene Zschech
            </a>
        </li>

        <li>
            <a href="audio/17.mp3"  >
                You Won't Relent - Jesus Culture
            </a>
        </li>

        <li>
            <a href="audio/18.mp3" >
                In His Time - Maranatha Singers
            </a>
        </li>

         <li>
            <a href="audio/19.mp3"  >
                My Eyes Are Fixed On You - Bobby Fitts
            </a>
        </li>

    </ul><!--end the player and controls-->
</div><!--end the section div-->

<div class="imageholder"><img id="imageHolder" /></div>

</div><!--end main-->

<div class="footer"><!--begin footer section-->
<p>The information provided within wwbiblestudygroup.com is Copyright ©;2016-2020 of wwbiblestudygroup.com. All rights reserved. This website and its contents may not be copied in whole or in part without express written permission from its author.</p>
<h2>Site designed and maintained by <a href="http://www.multyteck.com" target="_blank">Multyteck Inc.</a></h2>
</div><!--end footer section-->


<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("audio/02.mp3","audio/02.jpg");   // changes .mp3 for .jpg ADJUST your file naming
    imghol.src = href;
  }

}); // ready
</script>
</div><!--end the container div-->
</body>
</html>