1

We have a lot of problems with our software (which is mostly used in schools) and firewalls: we use mp3s within our resources, and mp3s are blocked in a lot of school firewalls. I'm trying to write some js code to detect when this is happening, so we can alert the user (teachers) to speak to their IT department and get it unblocked.

I went down a road initially of trying to play an short mp3 of silence, and detect whether that had happened. But, you have to jump through so many hoops to play audio automatically, especially on iOS Safari - waiting for user interaction, etc, that the hoop-jumping stuff was just getting in the way of the tests, and making the code think mp3s were being blocked when they were actually just being prevented from being played, by the browser rather than the network.

So, i'm abandoning the idea of playing mp3s. What I want to do instead is to request a small mp3 file over the network, and then analyse the contents of the response, to make sure that it is actually an mp3 file, and not, say, an html page saying "Sorry, that content is blocked", or whatever other things firewalls may return when someone asks for a blocked file.

I can't actually think what the simplest way to do this is, which will work cross browser. I'm using jQuery, and I thought that I might be able to do something in the "success" block of a jQuery ajax call, to analyse the data that I get back, to check that it's an mp3 file.

The first thing I thought was to just pull the data into a div on the page, like so:

var url = "/assets/test_media_files/silence.mp3?t="+Math.random();
$("#content-test-file-data").load(url, function(){
  console.log("loaded data");
});

This is working, and I have a load of binary data gibberish in the #content-test-file-data div. But, how can I tell if this is an mp3 file? Is there a nicer way to do this? Do I need to request the data with a mime type, or something like that? thanks

Max Williams
  • 32,435
  • 31
  • 130
  • 197
  • take a look [to this answer....](https://stackoverflow.com/questions/4260422/javascript-checking-if-file-is-mp3-format) – gaetanoM Nov 19 '18 at 15:11
  • Have you tried just creating and preloading an ` – charlietfl Nov 19 '18 at 15:14
  • @charlietfl yes, that's what's caused all the wasted time really, trying to use an audio tag. I couldn't get it to tell the difference between the browser blocking and the network blocking. – Max Williams Nov 19 '18 at 15:18
  • @gaetanoM that looks interesting thanks. I would worry though that because that test uses a HEAD request, there might be situations where a HEAD request can get through the firewall where a GET would be blocked. If so then a HEAD request isn't a good test. – Max Williams Nov 19 '18 at 15:19
  • you are right, but another possibility is looking for the ....magic flag (file type)..... – gaetanoM Nov 19 '18 at 15:27

1 Answers1

2

You are generating this mp3 yourself? Add an ID3 tag to the test file and read it. As it is located at the end of the file (128bytes) then it would be sure the file is completely arrived. ID3 org

Second approach would be to read/decode frame header (as done here) but compared to first option it's way more complicated.

Sven Liivak
  • 1,323
  • 9
  • 10
  • Thanks - in between asking the question and seeing your answer just now, this (the first thing) is exactly what I did. I made a very small mp3 (only one audio data point) and put a unique string in as the title in the metadata. Then, I ajax-load the file and write its contents into a hidden div on the page. The binary parts of this are gibberish but the metadata values are readable text, so it's just a case of checking that the div contains my unique string. Seems to work perfectly. I'll mark this as correct since it's the approach I ended up using. thanks – Max Williams Nov 21 '18 at 11:45