[feature] increment playcount with percentage of played

[haivala]

I want to increment the audio play count when certain percentage of the one audio clip has been played not just jumped to that position.

What I'm doing now:

    this.ws.on("ready", () => {
      let time = this.ws.getDuration();
      this.time = parseInt(time * 0.3); // 30% of the audio has been played

and on Play

      if (this.time > 0) {
        this.timer = setInterval(() => {
          this.time -= 1;
        }, 1000);
      }

and on Pause

clearTimeout(this.timer);

and when the audio is playing executing the function to save the increment of play count if time is up.

    this.ws.on("audioprocess", () => {
      if (this.time < 0) {
        clearTimeout(this.timer);
        this.incrementPlayCount();
        this.time = 0;
      }
    });

But the problem is that the setInterval() or audioprocess event are those functions/events that browser will not run if the tab is not active so this code does not work in all situations. Like when user starts playing and then changes the tab, plays over that percentage and then closes the browser after that.
Is there a way to make sure this works or should there be an event in the player for this or should this be a plugin?

[entonbiba]

@haivala you can do wavesurfer.backend.getPlayedPercents()

[haivala]

Sure I can do that but that shows percentage where the cursor is now. it does not take in account actual time listened. Am I right?

[haivala]

Why was this closed?

[haivala]

@entonbiba ?

[entonbiba]

@haivala you also have the option to use wavesurfer.backend.getPlayedTime()

[haivala]

I know that I have that option but that does not take into account actual time user has really played the track.

[entonbiba]

@haivala wavesurfer.backend.getPlayedTime() does return the played time, what do you mean actual time user has played? Are you looking to see how much of the actual track the user has played as in play/pause type of idea?

[haivala]

What I'm looking is to make sure the user has played for example 30% of the audio and then increment the play count. This includes situations where user starts to play and then skips to lets say to 50% and plays the track to 80%. This means that I need to keep track on how many seconds user has listened current audio compared the total length of the track and when the time is up fire an event. Example is in the first post.

[haivala]

Isn't this something Spotify and others do. They don't you let you spam play count and pay the artists for it.

[entonbiba]

@haivala this count should be happening on backend type websocket stream to avoid spamming but if you want to do it on frontend then you should be able to do something like this:

https://www.entonbiba.com/lab/wavesurfer/2623.html

    var totalPlays = 0;
    var totalTime = 0;
    var playInterval;


    wavesurfer.on("play", function() {
      
        playInterval = setInterval(() => {
        
            totalTime = totalTime + 100
            $('#totalTime').html(totalTime);
            
            if(totalTime>=30000){
                totalPlays = 1;
                $('#totalPlays').html(totalPlays);
                totalTime = 0;
            }
    
        }, 100);
    
    });

    wavesurfer.on("pause", function() {
        clearInterval(playInterval);
    });

    wavesurfer.on("stop", function() {
        clearInterval(playInterval);
    });

    wavesurfer.on("finish", function() {
        clearInterval(playInterval);
    });

[DanielJosephEgan]

Thanks

[haivala]

Again from the first comment:

But the problem is that the setInterval() or audioprocess event are those functions/events that browser will not run if the tab is not active so this code does not work in all situations. Like when user starts playing and then changes the tab, plays over that percentage and then closes the browser after that.
Is there a way to make sure this works or should there be an event in the player for this or should this be a plugin?

[katspaugh]

@haivala if you find a way to track audio progress when the tab is not in focus, feel free to propose a new wavesurfer event.
Perhaps there’s another DOM event, or some clever way to listen to media events from a service worker.

[haivala]

Can we open this issue as it is not solved?

[katspaugh]

I don't think it's an actionable issue that we should track. My perspective is, the GH issues are our task manager.

From the feedback that you've already received here, unfortunately nobody seems know what other event we could add, so there's no concrete idea to implement. If you'd like more feedback, we can move the discussion to the forum for visibility.

Ultimately, we're open to adding a new wavesurfer.js event. If you do some research and find a way this can work, please feel free to make a pull request.

[haivala]

I admit this is tricky one.

[katspaugh]

If we're talking about the MediaElement API, perhaps timeupdate would be worth trying.
I've briefly tested this in Chrome, and it seems to fire this event even when you're in another tab:

wavesurfer.backend.media.addEventListener('timeupdate', (e) => {
  console.log(e.timeStamp)
})

Can you test it in your app? If it works, we can expose this event in the wavesurfer API.

[haivala]

This sounds good! I'll test it when I have time!

[haivala]

This seems to be exactly what could be used.

Only thing that comes to my mind how to change the data in between is that I think the API point could output full seconds. What do you think?

[katspaugh]

It does, wavesurfer.backend.media.currentTime.

[haivala]

This is not the answer to this problem.

Your suggestion tells only the exact time where the play cursor is. It does not tell me how many seconds has the current clip been playing with skips.

[haivala]

Now that v7 is out is there better way to do this?

[katspaugh]

Yes, timeupdate is now a proper event:

wavesurfer.on('timeupdate', (time) => { … })

[haivala]

Hmm.. Apparently I did not test this properly last time as I did not implement the usage of that backend event.

Your suggestion tells only the exact time where the play cursor is. It does not tell me how many seconds has the current clip been playing with skips.