title: Creating a "fake" media player in javascript?
body: <p>I'll try to describe what I'm doing.</p>
  
  <p>I currently have 2 HTML5 audio elements, let's call them Master and Slave.</p>
  
  <p>They both load the exact same media file but the slave has it's audio muted by default.</p>
  
  <p>Each player can be controlled (paused, played, scrubbed etc) by the other.</p>
  
  <p>Each player has it's own custom styling and receives duration data from a external JSON file (so neither relies on <code>audio.duration</code> to get and calculate duration for other functions in the players like the scrub bar).</p>
  
  <p>Everything works perfectly, but the obvious downside is that the audio file is being loaded twice for each song. (The audio files are being served in small chunks by PHP - there is no direct link to an .mp3 file in the <code>audio.src</code> - instead it's a link to a server side script that requires unique authentication for every initial request, so the audio file isn't being cached - hence the double download).</p>
  
  <p>I actually don't need to use an HTML5 audio element at all on the muted player, other than to get the currentTime of the track, so is there any way I can "fake" an audio element? Maybe by running a setTimeout for the length of the track or something like that? </p>
  
  <p>I just need something that can mimic the <code>audio.currentTime</code> value that the HTML5 audio element spits out to update the progress (scrub) bar, but I don't really know where to start or if it's even possible?</p>
  
  <p>Any suggestions welcome, many thanks in advance.</p>
  
  <p>EDIT - for clarity, how my site works is something similar to the way that <a href="https://www.soundcloud.com" rel="nofollow noreferrer">Soundcloud</a> works. i.e - lots of players (slaves) rendered on screen, all of which can be played individually, all of which can also be controlled by the footer player (master). All content on my site (apart from the element containing the Master player) is dynamically loaded with Ajax.</p>