HTML5 Audio with AudioJS unstable if remotely loaded

4
votes

I am having extremely frustrating problems with loading audio tags. I have spent close to two weeks working on this and for every problem I fix, I create another.

I have a page that contains an < audio > tag that uses audio.js to control the audio. This page is loaded through an iframe sometimes and this is when the problem starts. I need to keep a play count so I have different ways of doing so.

Method One:

I have a PHP file that serves an MP3 to the player, this keeps play count and streams the MP3. The player works fine in Firefox and Chrome if I have < audio > tags in the page but not Internet Explorer (Must be a problem with my PHP throws a Gateway Error).

If I load a page that has < audio > tags into an iframe or with AJAX, the audio file is loaded up to three times. If the player is set to auto play, the audio is played twice over the top of each other. If I pause the player, the music can still be heard playing until I remove the iframe using developer tools.

Possible Solution: I have tried loading this up with AJAX to no avail. I can't stop it loading three times but I can force it to play only once by setting autoplay to true in the AudioJS API. For some reason Internet Explorer doesn't like my PHP MP3 file.

Method Two:

I load the MP3 file directly which also works in all browsers if I embed the player directly into a page. However when loaded externally, through an iframe or AJAX the player streams fine in Firefox and Internet Explorer but takes a minute or so to load in Google Chrome. Again it still seems to load the file three times and play twice (Which is only noticeable when autoplay is set) but less often. This method uses javascript to add play info into the database.

Possible Solution: I have tried adding a random number to the end of the MP3 like so: ?t=4892393 to force Chrome to reload the MP3 to no avail. I have forced the player to use the Flash Fallback but it's unresponsive and seems to break on some configurations (I have tried in the same Chrome version but on some computers the sound is distorted).

EDIT: I have had a look here: https://github.com/kolber/audiojs/issues/96 on the audiojs github page. I have tried the solution on there to no avail.

What I want to achieve: Audiojs seems to work flawlessly if embedded within a page. The problems only occur when loaded externally. I have looked into my PHP error logs, checked the Dev Console on Chrome, IE and Firefox, I have looked at my access logs and analysed the headers with Fiddler but I just can't seem to work this one out.

I would just like audiojs to work properly when loaded externally.

I'm open to accept that audiojs is old and outdated, I think the last update was 2011, so if no solution is possible then a recommendation of a simple, customisable, audio only player would be fantastic, but nothing seems to come close to audiojs.

Thanks.

EDIT: Just to let you know JWPlayer works perfectly but is way too bulky for my needs and it's hard to customise the look of.

EDIT 2: Here is a jsfiddle of my problem, if you open the dev tools and look at the network it loads three MP3s. In Chrome it takes too long to load the MP3 and it sometimes plays double in Chrome and Firefox.

http://jsfiddle.net/joshkrz/52YEc/7/

However the results are erratic, sometimes it works fine. The only thing consistent is the triple loading.

It's worth pointing out that if the player isn't in an iframe everything works perfectly how it should.

<audio preload="auto" src="/audio/2032c11a6f10a5d21eb91202cf67edd3.mp3" type="audio/mp3" autoplay> </audio>

EDIT 3: Turns out this problem happens only when the audio is set to autoplay within the <audio> tags in Firefox and Chrome. However Chrome also takes forever to load if the audio player is loaded in an iframe.

EDIT 4: After looking carefully at the HTTP headers, it appears that the browsers are requesting a GZIPed MP3 file.

My .htaccess file enabled compression like this:

<IfModule filter_module>
FilterDeclare COMPRESS

FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'text/html'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'text/css'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'text/plain'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'text/xml'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'text/x-component'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'text/javascript'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'application/javascript'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'application/json'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'application/xml'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'application/xhtml+xml'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'application/rss+xml'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'application/atom+xml'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'application/vnd.ms-fontobject'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'image/svg+xml'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'application/x-font-ttf'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'font/opentype'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'image/x-icon'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = '/application/(javascript|json|xml|x-javascript)/'"
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = '/text/(html|css|javascript|plain|x(ml|-component))/'"
FilterChain COMPRESS
FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no
</IfModule>

When requesting the RAW mp3 file the headers are as so:

First MP3 HTTP Request

Request

GET http://tabbidesign.com/audio/2032c11a6f10a5d21eb91202cf67edd3.mp3 HTTP/1.1
Host: tabbidesign.com
Connection: keep-alive
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36
DNT: 1
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en
Cookie: _ga=GA1.2.1838870165.1389379988

Response

HTTP/1.1 200 OK
Date: Thu, 20 Feb 2014 12:47:40 GMT
Server: Apache/2.4.6 (Unix)
Last-Modified: Mon, 03 Feb 2014 21:49:07 GMT
ETag: "499ce6-4f1877e331ac0"
Accept-Ranges: bytes
Content-Length: 4824294
Content-Type: audio/mpeg

Second MP3 HTTP Request

Request

GET http://tabbidesign.com/audio/2032c11a6f10a5d21eb91202cf67edd3.mp3 HTTP/1.1
Host: tabbidesign.com
Connection: keep-alive
Accept-Encoding: identity;q=1, *;q=0
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.107 Safari/537.36
Accept: */*
DNT: 1
Referer: http://tabbidesign.com/audio/2032c11a6f10a5d21eb91202cf67edd3.mp3
Accept-Language: en
Cookie: _ga=GA1.2.1838870165.1389379988
Range: bytes=0-

The response is the same as above

1
javascriptajaxaudioiframe
It's difficult to determine exactly what your problem is. Including some code would help us to help you. – Ben Smith
@Fresh Added a JSfiddle so you can see what I mean. And DanDavis Jplayer isn't suitable for me because I have forums. It appears that Jplayer needs a set of Javascript parameters in the head of the document for each player which isn't possible for me. – joshkrz
tabbidesign.com/audio it still calls mp3 3x times even if not in iframe for me. Or is that site wrapped inside an iframe, too? – zer02
@zer02 So it does! After testing this it turns out it only loads three (and plays twice sometimes) when autoplay is enabled. If it isn't it works fine. – joshkrz

1 Answers

1
votes

If you try to load http://tabbidesign.com/audio/2032c11a6f10a5d21eb91202cf67edd3.mp3 in chrome it tries to load it twice. Few things to check:

Is it being served with the correct mime-type? Try adding the following to your .htaccess file.

AddType audio/mp3 .mp3 .m4a

Also I see you have gzip enabled on your server. So apache is gzipping everything before sending it to speed things up. This makes sense for html/css/js but mp files are already compressed. If you compare the 1st & 2nd request, the 2nd Request header Accept-Encoding doesn't specify gzip. I think this is why the second request works.

So try disabling apache compression in apache.conf or .htaccess or compress only a few types.

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript

Hope this helps, good luck!

More info:

http://voice.firefallpro.com/2012/03/html5-audio-video-mime-types.html

How to disable Apache gzip compression for some media files in .htaccess file?