HTML5 audio/video tag, duration on Firefox - html5-audio

I'm building a customized audio player, most of if it done and working fine except for the total duration data that I can't seem to be able to fetch in Firefox. I'm using this simple API:
var total = audio.duration
where audio is the player of course.
This works fine on chrome and safari apparently, I'm getting the info correctly, but in Firefox it just returns NaN..
I tried different ways to select the player, pure JS byId, by tagName, or with jQuery, all return the same...
I can still seek into the song correctly and reach the end which doesn't make sense since the total duration is supposed unknown... O_o
If there are some courageous people with some time on their hands, here's my player object:
Player Script
You may try it yourself at fMusic Player
(little triangle on the right to open the player)
thanks in advance, any help will be appreciated^^

Have a look at pretty much the middle of this:
http://www.protofunc.com/jme/documentation/documentation-faq.html
The duration of the audio/video is NaN (not a number) and the timeline slider is disabled in
Firefox / Firefox keeps loading, but does not play the audio/video.
Make sure that your server sets the content-length and content-range
properties in his response-header.
Maybe it helps?

Related

Play two vimeo videos at the same time on ios?

Using froogaloop (the js api provided by vimeo) I was able to play two videos at the same time on desktop and android phone but this isn't working on ipad.
It's a video of someone commenting the first video so I also need the first video to be muted (also ok on desktop and android phone).
On ipad, it seems like the first video shortly enters the playing state and stops when the second starts, as if there were an hard-coded limitation on the player that prevent both videos from playing at the same time.
Ipad is also the only platform where I see the "undock" button, which could explain the hard limitation.
Is there a way to play 2 videos at the same time, one muted, the other at full volume ?
First, vimeo has relased its new api recently and froogalops won't be maintained anymore, yet still working. I' don't know wether this release brings any changes in respect of ios
Second, your question is not super clear to me, as it seem you manage to do what you wanted, except on ipad (what ios version and what about other ios devices), while your title and your bottom line is
Is there a way to play 2 videos at the same time, one muted, the other at full volume ?
and not ? Is there a way to play two vimeo video at the same time on ipad or ios ?
Third, vimeo provides the posibility to add autopause=0 in the url of your embeded video, this prevent the vimeo video curently playing to be paused when another one is started.
It works on desktop and android but haven't tried the behaviour on ipad yet as Ì don't have one in hand at the moment.
Finally, after some seach, it seems that this question may be asked regarding ios at large, and not solely ipad, and in this respect this post might be usefull for you
Not sure if it helps, as your post is 7 month old, but if you provide your code I may give a second try.
Cheers

Internet Explorer 11 HTML5 audio duration = infinity issue

Today I've met an unpleasant issue. There is a website with a custom HTML5 audio player. After the page loads, I try to echo document.getElementById("myAudioId").duration, it is needed in order to make navigation possible. In every other browser it works just fine, the duration is showed, but IE11 works differently - it shows that duration equals Infinity. But as I noticed, when the song is buffered to the end, the duration magically appers and the navigation works. In other browsers everything works from the start. The content-length headers are set up. What could it be?
UPD: Other sites with HTML5 audio let me see the duration from the very start. The duration, I guess, is part of metadata and could be loaded even without preloading the audio file using preload="metadata", but it also doesn't work.
UPD2: I've also tried playing around with jsfiddle and created the same audio tag there with same MP3 audio - there was the same situation. But then I've inserted link to another MP3 there, from another site - and it worked!. More than that, I've uploaded this second song to the first problematic website and after that the song that worked perfectly couldn't also show me its duration and stuff. So now I think it's something on server side. But don't know what it is.
UPD3: Finally, I've been told that files are converted using FFMPEG to MP3 128bit, then they stop being OK. Now I need to find how should I convert MP3s so they are OK.
It works for me locally, but when uploaded to server, it does not.
It seems that player.duration do not work in IE 11:
https://msdn.microsoft.com/en-us/library/dn254962(v=vs.85).aspx

Streaming Live Audio Through the Browser (HTML5??)

I've looked round for a few days now and can't seem to find anything.
What I'm looking to do is to take an audio source, from a single single microphone - ideally this will be done in the browser, I want to reduce the need for any plugins and limit the use of flash if at all possible. I would then look at broadcasting this audio stream to multiple clients (much like internet radio I guess), again all done in the browser. I've looked at things like icecast and shoutcast and they seem to to do what I need for this end.
What I need to know is if it is possible to capture an audio stream completely through a browser?
(Note: This will be sitting in a ASP.Net application)
You can try the WebRTC api that is on progress. The Api does just like what you're doing.
for HTML5 you can simply use the tag, however, as of today, firefox will not support MP3 broadcasting with that, why? because of some copyright stuff, however they are working on it and i heard a couple of days that it will be available natively for firefox.
check this stream, it uses tag, run it on iexplorer or chrome, even safari will work
geekius.net/radio

How can I make Chrome use the range http header for seeking in audio?

It looks like Chrome downloads from the beginning of a file when scrubbing past the buffered/loaded duration, even though the 'seekable' amount claims to be 100%.
I put up a demo page hardcoded to a 59 min audio file stored on s3, but otherwise identical to the jPlayer demo:
http://beta.prx.org/jplayer_demos/demo-01-supplied-mp3-bm.htm
I'm testing on a Mac (10.6.8):
On Safari (5.1.4), if you scrub past the loaded/buffered duration, it initiates another request using the range header, and gets the audio from that point almost instantly.
On Chrome (17.0.963.79), when you scrub beyond the buffered/loaded duration, it sits and spins until it can load the audio from the beginning to the duration scrubbed.
Any idea how to make Chrome behave itself and use the range header when you scrub past the loaded part of the audio file?
I was driving nuts with this. I'm implementing a web player with jPlayer too and they talk on the dev guide about the "Accepts-range" HTTP header and how it mess with Chrome, but thanks to you I realised it's a HTML5 audio tag problem... so much time wasted.
FIX: add the parameter "solution: 'flash, html'" on the jPlayer constructor to change to flash by default.

Problem with duration value of HTML5 audio element in iOs

I'm developing a web app for iOs device, but I have a problem with the html5 audio tag...
I designed a custom audio player, and I control the song with javascript functions.
With safari desktop the app works well, but on safari mobile it doesn't recognize the duration of the audio; the value of the duration property is NaN.
I have to play, stop and replay the audio for retrieve the correct value.
Probably the cause is that the media preload is disabled on safari mobile...
Is there a way to read the correct value at the first shot?
This is a bug in iOS... even inside the function that gets called on the onloadedmetadata event, you MAY STILL get NaN.
In my case, this happens at random when the user selects a new mp3 and the code dynamically sets the src property. The audio plays fine, yet SOMETIMES, the duration returns NaN, screwing up any progress indicator that depends on that value.
The medata is available after this event has fired:
loadedmetadata
More info
https://developer.mozilla.org/en/Introducing_the_Audio_API_Extension