0

I am struggling a bit with this one.

I am uploading music to our server, which works fine. When I play the song, it plays and stops just fine.

But when I upload a new song with the same name, I play the song directly from the server and I can hear that it is the new song, but when I play the song with jQuery, it still plays the old song.

My code for the music is as follows:

HTML

<span id="toggle_<?= $number; ?>_music"  class="badge play_music" style="background-color: green; cursor: pointer;" onclick="sadsc_play_entry_music('<?= $number; ?>')">
    <audio id="entry_<?= $entry['location_entry_id']; ?>_music">
        <source src="comps/sadsc/music/<?= $location; ?>/<?= $number; ?>.<?= $extention; ?>" />
    </audio>
</span>

JS

function sadsc_play_entry_music(entry_id)
{
    file = "#entry_"+entry_id+"_music";

    var player = $(file)[0];

    if (!player.paused)
    {
        player.pause();  
        player.currentTime = 0;
        $('#toggle_'+entry_id+'_music').css('background-color', 'green');
        $('#toggle_'+entry_id+'_music i').removeClass('fa-stop').addClass('fa-play');   
    }
    else
    {
        all_audio = $('audio');

        all_audio.each(function( index ) {
            all_audio[index].pause();  
            all_audio[index].currentTime = 0;
        });

        $('.play_music').css('background-color', 'green');
        $('.play_music i').removeClass('fa-stop').addClass('fa-play');  

        player.play();     
        $('#toggle_'+entry_id+'_music').css('background-color', 'orange');
        $('#toggle_'+entry_id+'_music i').removeClass('fa-play').addClass('fa-stop');    
    }
}

I have tried 

player.load();

to reload the file, but that did nothing.

Thanx in advance

CopperRabbit
  • 646
  • 3
  • 7
  • 24
  • 1
    You need to avoid cache, you can add a random number at the end of the url of the file like `?r=arandomnumber` – Hacketo Aug 28 '15 at 09:56
  • Thanx! it worked, cant believe it was so easy! just add the comment as an answer so i can mark as answered – CopperRabbit Aug 28 '15 at 10:05

1 Answers1

1

The problem is from the browser cache that will not download the file again as the url does not change.

The common way to force the browser to download the new file, is to add a unique random number as a GET parameter to the url

with javascript you can do it like this:

var url = "http://example.com/mymusicfile?r="+(+new Date);
Hacketo
  • 4,978
  • 4
  • 19
  • 34
  • I did something similar to the comment in the question, I generated a random number between 1 and 999 with php, works like a charm, thanx! – CopperRabbit Aug 28 '15 at 14:30
  • 1
    @RickusHarmse In this answer I used `+new Date` because it return the number of milliseconds since 70 so It may have no duplicate number. a Random should be ok, but there might be some time (1 chance / 999) where 2 number generated are the same and the browser would not redownload the file. see http://stackoverflow.com/questions/13939851/php-url-string-to-avoid-browser-caching for php – Hacketo Aug 28 '15 at 14:44
  • Ahhh, thanx, I will implement it like that – CopperRabbit Aug 31 '15 at 07:22