使用Amplitude.js继续下一页的歌曲

Question

I am using Amplitude.js to play songs which are dynamic. Server side script is php. My goal is to check if any song is playing, if yes than before that page is navigated away then save that song's index and current position (in percentage). Then on the next page I have to continue that song from the same position. So far I am successful in playing the same song on the next page, but it is playing from the start.

Here $feat is an array created like :

$featured = array();
        foreach ($all as $key => $value) {
           array_push($featured, array(
                "id" => $value['audio_id'],
                "name" => $value['audio_name'],
                "artist" => $value['audio_artist'],
                "album" => $value['product_name'],
                "url" => l($value['audio_file_path'].$value['audio_file']),
                "cover_art_url" =($value['product_image_path'].$value['product_image']),
           ));
        }

My javascript code to intitialize Amplitude js:

<script>
Amplitude.setDebug( true );
let _songs = JSON.parse('<?=$feat?>');
Amplitude.init({
  "songs":_songs,
});
</script>

On the change of every page, I am saving the song current index and current percentage of the song played. Its working fine. Home/song_stats will save the song info in session

<script>
    $(window).on("beforeunload", function() {
    song_percent =  Amplitude.getSongPlayedPercentage();
    song_index = Amplitude.getActiveIndex();

    $.ajax({
      type: "POST",
      url: "<?=g('base_url')?>Home/song_stats", 
      data:  "song_percent="+song_percent+"&song_index="+song_index,
      dataType: "json"
    });
    return false;    
    });

</script>

This javascript code is playing the song on click and if any session data is available to continue the song, it will continue that song.

<script>
$(window).load(function(){

  function playmysongs(_index){
  $('div[amplitude-song-index="'+_index+'"]').click();
}


  var appender = '';
  for(var i =0;i<_songs.length;i++){
    appender+='<div class="rixinside-list"><a onclick="playmysongs('+i+')"><span class="album_img"><img src="'+_songs[i].cover_art_url+'" class="img-responsive"/></span><span class="album_name">'+_songs[i].album+'<span class="album_artist">'+_songs[i].artist+'</span></span></a></div>';
  }
$('#playlist-container .rixplaylist').append(appender);

  //cont song
     $.ajax({
      type: "POST",
      url: "<?=g('base_url')?>Home/continue_song",
      data:  "",
      dataType: "json",
      success: function(response){
        playmysongs(response.song_index);
        Amplitude.setSongPlayedPercentage(response.song_percent);
      }
    });
    return false;  
    //cont song end
});


$('#playlist-container').click(function(){
  $('.rixplaylist').toggle();
});
$('#wishlist-container i').click(function(){
  $(this).toggleClass('like');
});

The line below doesn't work, although "response.song_percent" is showing correct value. Any help will be appreciated. Amplitude.setSongPlayedPercentage(response.song_percent);

Answer 1

There are a few options using AmplitudeJS 3.3 or above.

First, before navigating, I'd save the current position of the song being played to local storage or to a cookie. If you want to save the location server-side, you could do that as well. The local storage might just be easier if you are doing everything in Javascript.

When loading the page, after you get your song played percentage (or current time) you have one of two options.

1. Use Amplitude.setSongPlayedPercentage( percentage ).

What this does is set the current song being played to the percentage defined. The key being current. Now if the user skips to song 3, goes to the next page, sets the song played percentage of 35, it's going to do the first song in the array which will be the wrong song. Before you do Amplitude.setSongPlayedPercentage, you will have to set the start_song key in the Amplitude.init() method to be the index of the song played by the user. Then you can run the Amplitude.setSongPlayedPercentage( percentage ) and it will work appropriately.

2. Use Amplitude.skipTo( seconds, index );

This method is a little newer, but a little less complex. What you will need to do is save the seconds into the song to either local storage, cookie, or however you are doing it along with the index of the song. When you load the page, after you've initialized AmplitudeJS, you can run, Amplitude.skipTo( seconds, index ). The seconds being how far into the song the user was and the index being the index of the song in the songs array. It will resume from there.

Hope this helps!