How to seek with AudioContext

Question

I would like to create buttons that will play next/prev song on click, but they should seek the music on long press.

I did manage to change songs, but I couldn't find the seek methods. Also how to make it play from beginning?

And is there a way to determine how much have passed since the beginning of the song? I found that buffer have duration, but no sing of actual play time.

At init:

context = new (window.AudioContext || window.webkitAudioContext)()

To play song:

var buffer = song.buffer
var source = context.createBufferSource()
source.buffer = song.buffer
source.connect(analysers.main)
source.start(0, offset || 0)

score 4 · Accepted Answer · answered Dec 29 '15 at 14:53

4

Guess, you should use AudioBufferNode (it has ability to do seek) - https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/start

Also, this wrapper might be usefull - https://github.com/eipark/buffaudio

answered Dec 29 '15 at 14:53

Dmitry Volokh

1,630
16
28

Could you please answer the second part of question too? The one about how far in song we are? In percents or something... – Akxe Dec 31 '15 at 08:49
Guess, `AudiBufferNode` has `duration` property. You can try to use it. Also, this could be useful a bit http://stackoverflow.com/questions/11203773/how-can-i-get-the-html5-audios-duration-time – Dmitry Volokh Dec 31 '15 at 09:02
8

This is incorrect, `AudioBufferSourceNode` cannot seek (you can't call `start` more than once). – ffxsam May 28 '17 at 02:48
2

This is incorrect. There is no way to seek or restart an AudioBufferNode. All it can do is suspend/resume and loop. You would need to create a new buffer node to seek. – Zach Saucier Oct 21 '21 at 18:32

score 1 · Answer 2 · answered Dec 28 '15 at 14:54

Use taphold API to acheive the long press Event.

$(function(){
  $( "your element" ).bind( "taphold", tapholdHandler );

  function tapholdHandler( event ){
   /*write your code here for seek forward */

  }
});

Use JQuery Timer

var mousedowntime;
    var presstime;
    $("button[id$='" + buttonID + "']").mousedown(function() {
        var d = new Date();
        mousedowntime = d.getTime();
    });
    $("button[id$='" + buttonID + "']").mouseup(function() {
        var d = new Date();
        presstime = d.getTime() - mousedowntime;
        if (presstime > 999/*You can decide the time*/) {
            //Do_Action_Long_Press_Event();
        }
        else {
            //Do_Action_Click_Event();
        }
    });

To Play from Beginning

function beginAudio(){
            audio.trigger('pause');
            audio.prop("currentTime",audio.prop("currentTime")-audio.prop("currentTime"));
            audio.trigger('play');
        }

or set current time to zero and then play.

For Forward and Backward use this

audio.prop("currentTime",audio.prop("currentTime")-5);// 5 secs backward
audio.prop("currentTime",audio.prop("currentTime")+5);// 5 secs forward

I dont have audio variable, I have context variable (typeof AudioContext). And no jQuery. And the hold to seek ain't the problem the seeking is, and the fact, that audiocontext start counting currentTime since it is created and don't stop on when the sound does — Akxe, Dec 29 '15 at 04:52
can you show your original code for audio context and also for `play next/prev song on click song` .. — Dharani Dharan, Dec 29 '15 at 06:43

How to seek with AudioContext

2 Answers2