How to play next/previous audio file using bezel in Gear s2?

Question

developing Web app for gear s2, I am trying to play next/previous audio file when bezel is rotated clockwise/counterclockwise.

just like the "Music Player" on the watch.

what I tried so far is as follows, but only the second song plays when I rotate the bezel clockwise and when I rotate CCW, only the first song plays. I don't know how to write it so that EACH time that I rotate the bezel, it goes to the next song.

var audio = new Audio();
var source = ["songs/coldplay.mp3", "songs/abba.mp3", "songs/goodbye.mp3", "songs/sleep.mp3"];
var i = 0;
var current = null;

rotaryDetentHandler = function(e) {

direction = e.detail.direction;

if (direction === "CW") {
   if(i <source.length)
       i++;
    else i=source.length;
    }

if (direction === "CCW") {

  if(i>0)
      i-- ;
  else i = 0;
}
if(current !=null)
   {stop();}
audio.src = source [i];
audio.load();
audio.play();
current = audio;
} 

function stop()
  {
      current.pause();
  }

Hopefully someone can find out what the problem is or if there is another way to do it. Thank you.

Answer 1

for anyone having this problem, I finally found out what the problem is. You have to add an EventListener to the page, like below:

page.addEventListener("pagebeforeshow", function() {

// do something

});