Status 503 when trying to play notification sound

Question

I've created a little PHP/Ajax WebChat for our company. Whenever a new message is received, it should play a notification sound by using the method in this ones first answer.

How to play a notification sound on websites?

The problem now is that when accessing it from any normal computer it works fine, but from the (quite restricted) company network it give me a "HTTP Status 503 Service Unavailable" in Console. Since it is working on any other Internet Access, this is quite odd. One additional point, I got the notification sound from: https://notificationsounds.com/

If entered from company network, some sounds are played and some are not. After a refresh, the sounds that work are different than before the refresh. It's like it randomly plays the sound. NOTE: The Chatserver is located at my home.

What could be the problem, and is there any kind of work around that doesn't have to use the method from the other post?

This is the code that I use to load and play the notification sound:

chat.playSound("the-calling");  

playSound : function (filename) {
    document.getElementById("sound").innerHTML=
       '<audio autoplay="autoplay">
            <source src="https://notificationsounds.com/soundfiles/a516a87cfcaef229b342c437fe2b95f7/file-sounds-1068-the-calling.wav" />
            <source src="https://notificationsounds.com/soundfiles/a516a87cfcaef229b342c437fe2b95f7/file-sounds-1068-the-calling.ogg" type="audio/ogg" />
            <embed hidden="true" autostart="true" loop="false" src="/sounds/' + filename  +'.mp3" />
        </audio>';
}

Answer 1

The website http://notificationsounds.com isn't actually intended to host the sounds; they provide a "Download" link on each sound so that you can host yourself. Their site may actually not be able to scale to meet the demand that you're placing on it, or they may be throttling by IP address. As you're hitting their site each time that you want to play a sound, and that may be multiplied by the number of concurrent users that you have on your chat application, either situation would lead to random failures.

If the site admins notice that your company's public IP address is causing this type of issue, they may opt to block your company's IP address, leaving you without the ability to have sounds at all. Something similar happened to me a few years ago, and because of that, I finally got the chance to meet my organization's VP and spend 'quality time' in his office.

So, I'd recommend 2 things:

1) download the sound(s) that you want from their site and host them on yours

2) cache the loading of audio, so that you don't have to reload it if you've already done so.

I created a demo of caching the audio (from http://notificationsounds.com):

var notification_sounds = {
    "breaking-glass" : "8f121ce07d74717e0b1f21d122e04521/file-4f_glass-beaking-2",
    "the-calling" : "a516a87cfcaef229b342c437fe2b95f7/file-sounds-1068-the-calling",
    "ringo" : "5737c6ec2e0716f3d8a7a5c4e0de0d9a/file-47_oringz-pack-nine-01"
};

function findOrCreateAudioPlayer(filename) {
    var sound = notification_sounds[filename] || notification_sounds['breaking-glass'];
    var player = $("#audio-" + filename);

    if (player.length == 0) {
  player = $("<audio />").attr("id", "audio-" + filename);
        $("<source />").attr("src", "https://notificationsounds.com/soundfiles/" + sound + ".mp3").appendTo(player);
        player.appendTo($("body"));
        $("<p />").text(filename).appendTo($("body"));
    }
    
    return player;
}

function playSound(filename) {
    findOrCreateAudioPlayer(filename);
    player = $("#audio-" + filename)[0];
    player.load();
    player.play();
}

var sounds = ["nothing", "the-calling", "ringo", "breaking-glass"];
var sound = sounds[Math.floor(Math.random()*sounds.length)]

playSound(sound);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

You can also try the complete jsFiddle demo.

Once you have this in place, you can play any sound that you choose (from the list of sounds) by calling playSound(soundName). The demo picks one of the registered sounds (and a non-registered sound) and plays that sound when you click the 'Run code snippet' button below the code.

Note that this doesn't depend on any specific HTML content, but will create it's own <audio> elements on demand, and cache the content therein. In this code, you'll see that once the sound is cached, it doesn't get loaded from the origin site again until you reload the page.

From your original example, you could change your playSound callback to this:

playSound : function (filename) {
    playSound(filename);
}

It might be wise to change the names a bit, just so that there's no confusion.