title: Problem I am encountering making a website Music Library to sell my songs online
body: <p>Hi all website development experts,</p>
  <p>I am a newbie to website design.</p>
  <p>I am 13 years old but my passion is to record my own music from the different instruments I play and I love singing as well.</p>
  <p>I am trying to make my own online Music Library so that people can listen to some of my songs in full for free or listen to a preview of my songs and buy them online.</p>
  <p>I have created an Album Web Page which displays all the songs I have uploaded to my ISP's Web Server.</p>
  <p>I have either a Free Play or Preview Button listed for each song in the Album.</p>
  <p>If the users click on this Image Button, I want it to change onclick to a Pause Button.</p>
  <p>If the users then click on the Pause Image Button I want it to change back to the Free Play or Preview Button.</p>
  <p>I also want the Song to continue to play from where the user clicked on the Pause Button until either the end of the song or the end of the preview length of 15 seconds for the song, if it is available as a Preview Song.</p>
  <p>What is the easiest way to achieve this.</p>
  <p>I have the following code so far:</p>
  <p>Javascript:</p>
  <pre><code>&lt;script&gt;
  function play(id){
     var audio = document.getElementById('audio'+id);
     audio.play();
  }
  
  function pause(id){
     var audio = document.getElementById('audio'+id);
     audio.pause();
  }
  
  function changSRC() {
      document.getElementById(&quot;imageid&quot;).src=&quot;/images/Song_Pause.png&quot;;
  }
  &lt;/script&gt;
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  
  &lt;audio id=&quot;audio1&quot;&gt;
     &lt;source src=&quot;/songs/Hall-of-the-Mountain-King.mp3&quot; type=&quot;audio/mpeg&quot;&gt;
     &lt;source src=&quot;/songs/Hall-of-the-Mountain-King.ogg&quot; type=&quot;audio/ogg&quot;&gt;
  &lt;/audio&gt;
  
  &lt;a href=&quot;javascript:play('1');&quot;&gt;&lt;img src=&quot;/images/Free_Play.png&quot; align=&quot;center&quot; width=&quot;100%&quot; alt=&quot;Free Play&quot; onclick=&quot;changSRC()&quot; /&gt;&lt;/a&gt;
  
  &lt;audio id=&quot;audio2&quot;&gt;
     &lt;source src=&quot;/songs/Rimsky-Korsakov-The-Flight-of-the-Bumble-Bee.mp3#t=0,15&quot; type=&quot;audio/mpeg&quot;&gt;
     &lt;source src=&quot;/songs/Rimsky-Korsakov-The-Flight-of-the-Bumble-Bee.ogg#t=0,15&quot; type=&quot;audio/ogg&quot;&gt;
  &lt;/audio&gt;
  
  &lt;a href=&quot;javascript:play('2');&quot;&gt;&lt;img src=&quot;/images/Preview.png&quot; align=&quot;center&quot; width=&quot;100%&quot; alt=&quot;Song Preview&quot; onclick=&quot;changSRC()&quot; /&gt;&lt;/a&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>Now I am stuck.</p>
  <p>How do I continue on from here to get the Songs to play again from when the user clicked on the Pause Button from the point they clicked on the Pause Button until the end of the 15 second preview or until the end of the song for the Free Play songs.</p>
  <p>I will really appreciate any help. Thank you so much in advance!</p>
  <p>Kind Regards,</p>
  <p>Nancy</p>