尝试播放通知声音时的状态 503

Question

我为我们公司创建了一个小的 PHP/Ajax WebChat。每当收到新消息时，它应该使用第一个答案中的方法播放通知声音。

How to play a notification sound on websites?

现在的问题是，当从任何普通计算机访问它时它工作正常，但从（相当受限的）公司网络它在控制台中给我一个“HTTP 状态 503 服务不可用”。由于它适用于任何其他 Internet 访问，这很奇怪。另外一点，我收到的通知声音来自：https://notificationsounds.com/

如果从公司网络输入，有些声音会播放，有些则不会。刷新后，工作的声音与刷新前不同。就像它随机播放声音一样。注意：聊天服务器位于我家。

可能是什么问题，是否有任何解决方法不必使用其他帖子中的方法？

这是我用来加载和播放通知声音的代码：

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

http://notificationsounds.com 网站实际上并不打算托管这些声音；他们在每个声音上都提供了一个“下载”链接，以便您可以自己托管。他们的网站实际上可能无法扩展以满足您对其提出的需求，或者他们可能会受到 IP 地址的限制。 当您每次想要播放声音时都在访问他们的网站，并且可能会乘以您在聊天应用程序上拥有的并发用户数，因此任何一种情况都会导致随机失败。

如果站点管理员注意到您公司的公共 IP 地址导致了此类问题，他们可能会选择阻止您公司的 IP 地址，从而使您完全无法发出声音。几年前我也遇到过类似的事情，正因为如此，我终于有机会见到了我所在组织的副总裁，并在他的办公室度过了“美好时光”。

所以，我推荐两件事：

1) 从他们的网站下载您想要的声音并将其托管在您的网站上

2) 缓存音频的加载，这样如果你已经这样做了就不必重新加载了。

我创建了一个缓存音频的演示（来自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>

你也可以试试complete jsFiddle demo。

设置好之后，您可以通过调用playSound(soundName) 播放您选择的任何声音（从声音列表中）。该演示选择其中一个已注册的声音（和一个未注册的声音）并在您单击代码下方的“运行代码 sn-p”按钮时播放该声音。

请注意，这不依赖于任何特定的 HTML 内容，而是会根据需要创建它自己的 <audio> 元素，并将内容缓存在其中。在这段代码中，您会看到声音被缓存后，它不会再次从源站加载，直到您重新加载页面。

从您的原始示例中，您可以将您的 playSound 回调更改为：

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

稍微更改名称可能是明智之举，以免造成混淆。