在javascript中创建“假”媒体播放器？

Question

I'll try to describe what I'm doing.

I currently have 2 HTML5 audio elements, let's call them Master and Slave.

They both load the exact same media file but the slave has it's audio muted by default.

Each player can be controlled (paused, played, scrubbed etc) by the other.

Each player has it's own custom styling and receives duration data from a external JSON file (so neither relies on audio.duration to get and calculate duration for other functions in the players like the scrub bar).

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 audio.src - 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).

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?

I just need something that can mimic the audio.currentTime 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?

Any suggestions welcome, many thanks in advance.

EDIT - for clarity, how my site works is something similar to the way that Soundcloud works. ie - 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.

Answer 1

You should be able to 'fake' the slave audio player as follows:

• Build the element in HTML & CSS and position it anything other than static, to enable using javascript animations. Your progress bar on the faked player will initially have the following css :

   #progress-bar{ left: 0px; } 

  You may animate the fake player's progress bar as follows, using setInterval:

   function moveRight() { var progressBar = document.getElementById('progressBar'); var pos = 0; //position on X Axis let move = setInterval(frame,5); //start moving, once every 5 miliseconds function frame() { if (pos == 400) { clearInterval(move); } else { pos++; progressBar.style.left = 5 + pos/10 + '%'; } } } 

You will have to adjust the numbers in this example to fit your player's length. You will also have to account for the actual audio file's length, on this line: if (pos == 400) When you click on your master player, call this moveRight() function, which will in turn move the fake slider. Play with the numerical values until the movement resembles a real audio player slider.