custom start and end points for html audio element

Question

I have a html audio element playing my track. It's a pretty simple setup:

<audio controls loop="loop">
    <source type="audio/wav" src="song.wav">
</audio>

I thought it would be just as simple to make custom start and end points. I.e. if my track is 10 seconds long, I want to trim a little so only the middle of the song is played.

From the W3 audio tag doc it doesn't seem like there's any options for specifying a start and end time.

I'm not asking for anyone to write code for me; I'm looking for a conceptual guide for how to approach this. I need it to work with the loop, i.e. it should start and end at my specified values every loop. I'm looking for an approach that is totally client side and that works in Chrome

you're better off looking at mdn for reference. w3schools is incomplete and often, incorrect. check out: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio — Robert Parham, Sep 06 '16 at 20:42
@RobertParham duly noted but I still don't see any 'start' or 'end' directives listed. — max pleaner, Sep 06 '16 at 20:44
maybe this will help.. http://stackoverflow.com/questions/12029509/html-5-audio-play-file-at-certain-time-point — Robert Parham, Sep 06 '16 at 20:48
@RobertParham that answer covers starting at a specific time, not ending. — max pleaner, Sep 06 '16 at 20:52
well you said you weren't looking for someone to write the code for you so i figured you could extrapolate from there...... — Robert Parham, Sep 06 '16 at 20:56

score 1 · Accepted Answer · edited May 23 '17 at 12:22

I did figure out something that works.

The canplaythrough event won't suffice because the audio will be looping; this event is only fired once

As an alternative, I'm using the timeupdate event: (this in coffeescript)

   window.playbackStart = 2
   window.playbackEnd = 4

   $("audio").off("timeupdate").on "timeupdate", (e) ->
      audio = e.currentTarget
      if audio.currentTime > playbackEnd
        audio.currentTime = playbackStart

this seems simple enough, but I had to do a little debugging because calling currentTime = was not working (it was just setting the time to zero, no matter what). It turns out the issue was actually server-side (see https://stackoverflow.com/a/32667819/2981429).

I needed to:

Configure my server to use HTTP 1.1
- with Nginx, I added
```
proxy_http_version 1.1;
proxy_set_header Connection "";
```
  to my location { } block
In my application, set the header Accept-Ranges: bytes with the response.

score 0 · Answer 2 · answered Sep 06 '16 at 21:02

0

This is slightly altered code from the answer i linked to in the comments... see commments for info

http://jsfiddle.net/mNPCP/313/

// set start and end times 
    var startTime = 12;
    var endTime = 15;
    myAudio=document.getElementById('audio2');
    myAudio.addEventListener('canplaythrough', function() {

      // start it at the start time
      this.currentTime = startTime;
      this.play();
      // let it play to the end time and then reset the play time
      setTimeout(function(){
        this.currentTime = startTime;
      }, (endTime-startTime)*1000)
    });

answered Sep 06 '16 at 21:02

Robert Parham

704
3
10

unfortunately i don't think it will be this simple. Chrome has issues with setting currentTime and `canplaythough` won't suffice when the audio is looping. Though I appreciate your attempt. I'll let you know what I figure out – max pleaner Sep 06 '16 at 21:23
after a little more research, it seems my problem may actually be server side (see http://stackoverflow.com/a/32667819/2981429) – max pleaner Sep 06 '16 at 21:33

score -2 · Answer 3 · answered Sep 06 '16 at 20:36

-2

I would trim the .wav file itself

answered Sep 06 '16 at 20:36

becker33

1
1

1

i'm really looking for a client-side only solution here. – max pleaner Sep 06 '16 at 20:46

custom start and end points for html audio element

3 Answers3