vendredi 27 février 2015

HTML 5 Audio jumps to another position automatically in Cordova

I developed an music player with Cordova witch play MP3 files with HTML5 Audio from Apache hosted server, when I play songs (in chrome windows or in crosswalk application or iOS Cordova App), it shows buffer size and currentPosiotion in UI and song plays with no problem.


My problem is some testers (Crosswalk or iOS Corodova) report that when some songs are playing, buffer size is ahead of playing time for at least 10 sec, but it stuck for a moment and music jumps to last buffer position without updating currentTime (feels like we are on UDP :D ), It seems a low quality network problem, so I attached this code, to know when music stuck and jumps, but testers says nothing shown and music still jumps



audio.addEventListener('stalled', function(){

alert(audio.currentTime);

})


I don't know where is problem, and I insist using HTML5 Audio (because Cordova Media Plugin is laggy when I change song)


And just a little note about MP3 files, there are 2 servers hosting files, one of them sends total size of file (when I download that file in chrome or Cordova FileTransfer plugin) and the other one doesn't do the same (MP3 file downloads but not shows how much left).


feel free to share any ideas, from using any JS plugins, hacks, Corodva ideas or any other things!


Here is my CoffeeScript media control class:



loadingAnimation = require './Loading'
flashMessage = require './FlashMessage'

module.exports = new class AudioManager

constructor: ->

@audio = new Audio ""
@audio.autobuffer = true
@audio.preload = "auto"

@playing = no
@buffering = no

@audio.addEventListener 'canplaythrough', =>

@buffering = no
do loadingAnimation.hide

if @playing is yes

@audio.play()

@audio.addEventListener 'error', (event) =>

if @playing

@playing = no
@buffering = no

do loadingAnimation.hide

flashMessage.show "Sorry, Cannot load song!"

@src = ""
@audio.src = @src

@playToEndCallback("error") if @playToEndCallback?

@audio.addEventListener 'timeupdate', (event) =>

@timeCallback @audio.currentTime if @timeCallback?

if @audio.duration > 0

@timePercentCallback(@audio.currentTime / @audio.duration) if @timePercentCallback?

@audio.addEventListener 'progress', (event) =>

if @audio.duration > 0

@bufferPercentCallback(@audio.buffered.end(@audio.buffered.length-1) / @audio.duration) if @bufferPercentCallback?

@audio.addEventListener 'ended', (event) =>

@playToEndCallback event if @playToEndCallback?

play: (src) ->

return if src is @src

if src isnt undefined

if @playing is yes

do @pause

@changeSongCallback() if @changeSongCallback?

@src = src

@audio.src = @src

@buffering = yes

do loadingAnimation.show

@audio.load()

else

@audio.play()

@playing = yes

@playStatusCallback(yes) if @playStatusCallback?

pause: ->

@audio.pause()

@playing = no

@playStatusCallback(no) if @playStatusCallback?

switch: ->

if @playing then do @pause else do @play

onPlayStatus: (@playStatusCallback) ->

onPlayToEnd: (@playToEndCallback) ->

onTime: (@timeCallback) ->

onTimePercent: (@timePercentCallback) ->

onBufferPercent: (@bufferPercentCallback) ->

onChangeSong: (@changeSongCallback) ->

Aucun commentaire:

Enregistrer un commentaire