I have been encountering frustrating issues with loading audio tags for a while now. Despite spending nearly two weeks trying to solve the problems, every fix seems to create another one.
My webpage includes an < audio > tag that utilizes audio.js to manage the audio playback. The trouble begins when this page is loaded through an iframe. To keep track of play counts, I have experimented with different methods.
Method One:
To serve an MP3 file to the player and maintain the play count, I use a PHP file. While this setup works flawlessly in Firefox and Chrome (with < audio > tags on the page), it encounters issues in Internet Explorer, possibly due to a PHP-related Gateway Error.
When loading a page containing < audio > tags into an iframe or via AJAX, the audio file loads up to three times. If the player is set to autoplay, the music plays twice simultaneously. Even after pausing the player, the music persists until the iframe is removed using developer tools.
Possible Solution: Although my attempts to load the audio files via AJAX have not been successful, I managed to address the multiple-playback issue by setting autoplay to true in the AudioJS API. However, Internet Explorer still struggles with my PHP-served MP3 file.
Method Two:
An alternative approach involves directly loading the MP3 file, which works across all browsers if embedding the player within a page. Yet, when the player is loaded externally (through an iframe or AJAX), it streams smoothly on Firefox and Internet Explorer but takes longer to load on Google Chrome. It also tends to load the file thrice and play twice, especially noticeable when autoplay is enabled. This method uses JavaScript to update play information in the database.
Possible Solution: I attempted appending a random number to the MP3 URL (?t=4892393) to prompt Chrome to reload the MP3, but the issue persisted. Trying the Flash Fallback option, I found it unresponsive and prone to malfunctions in certain configurations, leading to distorted sound in some cases.
EDIT: Referring to https://github.com/kolber/audiojs/issues/96 on the audiojs GitHub page, I tested the suggested solution without success.
Goal: While Audiojs functions seamlessly when directly embedded in a page, complications arise when loading it externally. Despite examining PHP error logs, checking Dev Console on various browsers, analyzing access logs, and inspecting headers through Fiddler, I remain unable to resolve this issue.
If no resolution is viable due to the outdated nature of audiojs (last updated in 2011), I welcome recommendations for a simple, customizable audio-only player. Thus far, nothing has matched the functionality of audiojs.
Thank you.
Here is a jsFiddle link showcasing the problem, where opening the dev tools reveals triple-loading behavior. While the outcomes are inconsistent, the repetitive loading remains a constant observation.
It's worth noting that everything functions correctly if the player isn't contained within an iframe.
<audio preload="auto" src="/audio/2032c11a6f10a5d21eb91202cf67edd3.mp3" type="audio/mp3" autoplay> </audio>
UPDATE: After further investigation, it appears that the issue occurs only when audio autoplays within the <audio> tags on Firefox and Chrome. Additionally, Chrome experiences extended loading times when the audio player is nested in an iframe.
UPDATE 2: Upon scrutinizing the HTTP headers, it was observed that browsers request a GZIPed MP3 file.
The .htaccess file contains the following compression configuration:
(filter_module)
FilterDeclare COMPRESS
FilterProvider COMPRESS DEFLATE "%{CONTENT_TYPE} = 'text/html'"
...
</IfModule>
During the RAW MP3 file request, the headers show:
First MP3 HTTP Request
Request
GET http://tabbidesign.com/audio/2032c11a6f10a5d21eb91202cf67edd3.mp3 HTTP/1.1
...
Response
HTTP/1.1 200 OK
...
Second MP3 HTTP Request
Request
GET http://tabbidesign.com/audio/2032c11a6f10a5d21eb91202cf67edd3.mp3 HTTP/1.1
...
The response mirrors that of the first request.