Play audio range in html5

Question

I would like to have buttons that can play certain ranges of audio from a larger file. Sort of:

<button onclick="playClip('http://blah/source1.mp3', 2.5, 3.0, 1.0)">Play clip 1</button>
<button onclick="playClip('http://blah/source2.mp3', 10.0, 2.0, 0.5)">Play clip 2 slow</button>

where playClip has this pattern:

function playClip(src, startOffset, length, rate) {
  // What to put here?
}

Or instead of length, the final displacement.

Can someone point me to a code that can do this, or help me write it? The closest I could find is https://gist.github.com/remy/753003/download# , but I need clips of different sizes, possibly from different files and with the specified playback speed. I'm afraid I have limited experience with Javascript.

I am trying to replace a Silverlight application that does this.

Thank.

-John

Answer 1

URI :

var src,
    startOffset,
    endOffset,
    playbackRate,
    audio = new Audio(src + '#t=' + startOffset + ',' + endOffset);

audio.onloadedmetadata = function() {
  audio.playbackRate = playbackRate;
  audio.play();
};

timeupdate :

var audio = new Audio( ... ),
    startOffset,
    endOffset,
    playbackRate;

audio.onloadedmetadata = function() {
  audio.playbackRate = playbackRate;
  audio.currentTime = startOffset;
  audio.play();
};

audio.ontimeupdate = function() {
  if (audio.currentTime >= endOffset) {
    audio.pause();
  }
};

:

• HTML5

Answer 2

( ontimeupdate ). / , , :

var jt_audioControl;
var jt_audioFiles;
var jt_audioFileIndex;
var jt_audioFile;
var jt_audioStartTime;
var jt_audioEndTime;
var jt_audioPlaybackRate;
var jt_audioTimeoutHandle;

function jt_onAudioTimeUpdate() {
    if (jt_audioEndTime > 0.0) {
        if (jt_audioControl.currentTime >= jt_audioEndTime) {
            //alert('stopped: jt_audioControl.currentTime = ' + jt_audioControl.currentTime + ' jt_audioEndTime = ' + jt_audioEndTime);
            jt_audioControl.pause();
            //jt_audioStartTime = jt_audioEndTime = 0.0;
        }
    }
}

function jt_onAudioLoaded() {
    jt_audioControl.pause();
    jt_audioControl.currentTime = jt_audioStartTime;
    jt_audioControl.defaultPlaybackRate = jt_audioPlaybackRate;
    jt_audioControl.playbackRate = jt_audioPlaybackRate;
    jt_audioControl.play();
    var timeout = (jt_audioEndTime - jt_audioStartTime) * 1000;
    //alert('jt_audioEndTime = ' + jt_audioEndTime + ', timeout = ' + timeout);
    if (jt_audioEndTime > 0.0) {
        jt_audioTimeoutHandle = setTimeout(jt_stopAudio, timeout);
        //alert('jt_audioTimeoutHandle = ' + jt_audioTimeoutHandle);
    }
    else if (jt_audioTimeoutHandle != null) {
        clearTimeout(jt_audioTimeoutHandle);
        jt_audioTimeoutHandle = null;
    }
}

function jt_onAudioEnded() {
    //alert('ended called');
    if (jt_audioFiles == null)
        return;
    jt_audioFileIndex = jt_audioFileIndex + 1;
    if (jt_audioFileIndex < jt_audioFiles.length) {
        jt_audioFile = jt_audioFiles[jt_audioFileIndex];
        jt_audioControl.src = jt_audioFile;
    }
    else {
        jt_audioControl.pause();
        jt_audioFiles = null;
        jt_audioFileIndex = 0;
    }
}

function jt_createAudio(url) {
    if (jt_audioControl == null) {
        jt_audioFile = url;
        jt_audioControl = new Audio();
        // The ontimeupdate handler seems to be called unreliably, so we'll use
        // setTimeout instead in the onloadedmetadata handler.
        //jt_audioControl.ontimeupdate = jt_onAudioTimeUpdate;
        jt_audioControl.onloadedmetadata = jt_onAudioLoaded;
        jt_audioControl.onended = jt_onAudioEnded;
        jt_audioControl.src = url;
        // We'll let the onloadedmetadata call play once loaded.
    }
    else if (jt_audioFile != url) {
        jt_audioFile = url;
        jt_audioControl.src = url;
    }
    else {
        jt_onAudioLoaded();
    }
}

function jt_playAudioFile(url) {
    jt_audioFiles = null;
    jt_audioFileIndex = 0;
    jt_audioStartTime = 0.0;
    jt_audioEndTime = 0.0;
    jt_audioPlaybackRate = 1.0;
    jt_createAudio(url);
}

function jt_playSlowAudioFile(url) {
    jt_audioFiles = null;
    jt_audioFileIndex = 0;
    jt_audioStartTime = 0.0;
    jt_audioEndTime = 0.0;
    jt_audioPlaybackRate = 0.5;
    jt_createAudio(url);
}

function jt_playAudioFileList(urls) {
    jt_audioFiles = urls;
    jt_audioFileIndex = 0;
    jt_audioStartTime = 0.0;
    jt_audioEndTime = 0.0;
    jt_audioPlaybackRate = 1.0;
    if ((urls != null) && (urls.length > 0)) {
        jt_createAudio(urls[0]);
    }
}

function jt_playSlowAudioFileList(urls) {
    jt_audioFiles = urls;
    jt_audioFileIndex = 0;
    jt_audioStartTime = 0.0;
    jt_audioEndTime = 0.0;
    jt_audioPlaybackRate = 0.5;
    if ((urls != null) && (urls.length > 0)) {
        jt_createAudio(urls[0]);
    }
}

function jt_playAudioFileSegment(url, startTime, endTime) {
    jt_audioFiles = null;
    jt_audioFileIndex = 0;
    jt_audioStartTime = startTime;
    jt_audioEndTime = endTime;
    jt_audioPlaybackRate = 1.0;
    jt_createAudio(url);
}

function jt_playSlowAudioFileSegment(url, startTime, endTime) {
    jt_audioFiles = null;
    jt_audioFileIndex = 0;
    jt_audioStartTime = startTime;
    jt_audioEndTime = endTime;
    jt_audioPlaybackRate = 0.5;
    jt_createAudio(url);
}

function jt_stopAudio() {
    if (jt_audioControl != null)
        jt_audioControl.pause();
}