HTML 5 audio player with forward/backward

Asked

Viewed 1,401 times

2

I’m working on an HTML 5 player and had a sad surprise when I tried to use the forward/backward feature when I put the cursor in a given minute of the song (as we do on youtube, for example).

<audio id="AudioApresentacao" controls="controls" preload="none">

        <source id="urlAudio" type="audio/mpeg" src="ARQUIVO DE AUDIO" /></audio>

It turns out that when you put in a few minutes of audio, like a song, it works normally. But the audio I’m loading has about 80 minutes! And this feature does not work. Someone knows a solution for this?

Tested in Chrome and IE11.

html5 html5-audio
  • 3

    Hello James! Welcome to Soept. Could you be clearer when saying "it doesn’t work", and specify which browsers you found the problem with? It would also be nice to post the code part of your player that you believe is in trouble.

  • Hello! Thank you for the welcome! @Fabríciomatté tested on Chrome and IE. What I meant by "it doesn’t work" is that by placing the cursor at a given minute of the song (as we do on youtube, for example) it doesn’t work/back to the point I want.

  • Always prefer to make your question clearer through editing. http://meta.pt.stackoverflow.com/questions/700/como-comecar-aqui-no-stackoverflow-em-portugues

  • @edited mustache! Thanks for the tip!

  • 2

    Just a guess: It might have something to do with the file size and the browser still downloading it. Did you try it locally? (maybe he streams even if he’s local)

  • One solution is to divide the file into several smaller ones, and put them to play in sequence, making a custom seekbar with total audio time, being calculating the position that is which of the files should be used. So your browser can stop downloading part of the music and starts loading the other part needed for the position you want.

  • 1

    @Gabrielgartz I think this has already been implemented by most browsers: Partial Content. The problem is: does the server support this? If "AUDIO FILE === download.php" or something like that, here’s the problem.

  • I also read online that several Apis that manipulate audio files are having problems with memory limits, but in this case I think it’s because they convert the MP3 file into a blob to be able to manipulate local and then consume memory, already on large files the last report was Chrome 13 that was crashing, otherwise I agree with you @Gustavorodrigues, if the server does not support partial download has to make an alternative solution, or wait for the full download of the file.

  • 1

    I only saw this when the file needed to be manipulated (Webaudio) or when the API was a codec made in javascript (http://audiocogs.org/codecs/mp3/). In most cases I have already touched them they only use <audio> and/or flash tags: the most technical part is in charge of the browser (or flash).

Show 4 more comments

3 answers

2

The shortest way is to use a streaming server for the user to skip to some part of the audio that was not downloaded and start downloading to the point that he wants.

To avoid investing in software/streaming server try using Http Live Streaming (for live and recorded) or search for software like WOWZA, FMS or RED5.

Flowplayer has the option to Pseudistreaming, a little more complex.

Using flowplayer you can call the Seek() method to skip to a particular part of the video.

$f().seek(valorEmSegundos);

0

0

Try something similar to the following code:

<audio src=”mus.oga” controls=”true” autoplay=”true”>
  <source src=”mus.oga”>
  <source src=”mus.mp3”>
  <source src=”mus.wma”>
</audio>

Browser other questions tagged html5 html5-audio

You are not signed in. Login or sign up in order to post.