JS not working properly in IE and Edge browsers

I’ve got a small JS-based music player on my homepage in its upper-left corner (just above the logo). And it works fine in all browsers, except IE and Edge. In those it shows NaN where the song’s total time is supposed to be after the page loads. But if you try to load my site in FF or Chrome, then it’s fine!


Just in case, my site’s URL is https://apostasia.ru

You should take this up with the developer. I doubt there is anything we can help with, unless you developed this yourself and have a question about a specific piece of code

IE is belching a 412 while trying to access your MP3 file.
For some reason it’s also trying to load a bg-image.jpg, and 404’ing. Chrome makes no attempt to access that resource.

You’ve got some code in your page somewhere that is specific to IE that you need to deal with.

You also have:
Mixed Content: The page at 'https://apostasia.ru/en/' was loaded over HTTPS, but requested an insecure stylesheet 'css:style.css'. This request has been blocked; the content must be served over HTTPS.

First of all old version IE not supported bootstrap and JQUERY you can update your IE version .

You can check the Mixed content for the CSS and JS may your server run with the HTTPS but you add the CSS and JS link with HTTP.

Thanks! And how to I find that style.css file? I don’t think there’s such a file.

Thanks for your reply!
As per file bg-image.jpg, it’s the file that is an alternative to a full size video bg in template’s settings in a backend of Joomla. I set NO to background video, but I didn’t delete that link “images/bg-image.jpg”. Now I deleted this mention of bg-image.jpg file, so I hope IE is not trying to load it anymore? Could you please check that?

I didn’t understand at all your first sentence about IE and belching. Could you rephrase it in more details?

As per code… Yeah, that’s exactly the difficult part for me, 'cos frankly I don’t know where to find that JS code to begin with! Maybe you could let me know? Like which file or files that music player uses?

IMHO, even if you put off getting to the warnings, it would be a good idea to fix the errors.
https://validator.w3.org/nu/?doc=https%3A%2F%2Fapostasia.ru%2Fen%2F

Note the <audio> error. As the message reads, there is no “type” attribute. Looking at the MDN page supports this, there is no "type "attribute for the <audio>
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

… one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one.

… If you don’t specify the controls attribute, the audio player won’t include the browser’s default controls

<source> does have a “type” attribute
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source

The HTML

<audio src="https://apostasia.ru/1.mp3" 
onError="shortcodeAudioOnerror(event,this)" 
loop  controls="controls" 
type="audio/mp3" preload="auto" 
class="style-5924543b8d299ecd8e5530">
  <a href="https://apostasia.ru/1.mp3" target="_blank"> 
    apostasia.ru 
  </a> 
</audio> 

I’m guessing the NaN is from shortcodeAudioOnerror(), can you find that?

Thanks for your reply! But in player’s code I DON’T have that “type” attribute in a first place.
Here’s the player’s code in Joomla’s Custom HTML module.

[audio src="https://apostasia.ru/1.mp3" loop="on" preload="auto" autoplay="off" showvolume="on"]

And since the only code I know how to edit is this one above, I don’t know where else to check.
It’s probably Joomla somehow translates the code I input into the Joomla module into HTML with unnecessary attributes.

I have no clue where this “type” attribute is from and how it ended up there.

BTW, could you please check if there’s no 404 error anymore about that bg-image.jpg file that m_hutley was mentioning in post #3 of this thread?
UPDATE
I’ve found this solution about “type” attribute. But I have no idea how to implement it in Joomla. I went to “template” folder and added this code to index.php file and it had no effect. Well, it had an effect only when I placed it BEFORE <?php but then I’ve started getting a whole bunch of other errors, since it’s probably not the right way of editing code!

// Set HTML5 Document Output
$doc = JFactory::getDocument();
$doc->setHtml5(true);

https://stackoverflow.com/questions/48038551/w3c-validation-of-joomla-page-the-type-attribute-is-unnecessary-for-javascript/48172451#48172451

Here’s the solution:
Solved that NaN issue in a music player! It was due to a gzip compression on the server. Had to cancel it just for mp3 files by putting this code in root’s .htaccess file

<IfModule mod_headers.c>
<FilesMatch "\.mp3$">
RewriteRule ^(.*)$ $1 [NS,E=no-gzip:1,E=dont-vary:1]
</FilesMatch>
</IfModule> 

This thread can be closed now…
Mixed Content is a totally different non-related issue to JS NaN problem, so it’s best to discuss it in a separate thread.

2 Likes

Thanks for posting the solution @kotkowski. As for closing the thread it will close automatically in 3 months.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.