HTML5 MP3 <audio> 未正确加载

Question

好的，my new website 刚刚上线，通过 Google Apps 交付。在百灵鸟中，我决定包含一个 javascript / HTML5 Lunar Lander 克隆（Martian Lander），这是我不久前写的一个练习。当我在本地打开游戏时，游戏运行良好，但是当它通过 GAE 交付时，声音似乎并没有在每个系统上加载。在移动 Safari 中，没有加载。在桌面上的 safari 中，它们都可以可靠地加载到我的计算机上，但 不 在其他一些计算机上。在 Chrome（在桌面上）它似乎可以工作，但在 iOS 的 Chrome 中，只加载一个声音。在桌面上，似乎总是无法加载相同的声音 (explode1.mp3)，这是我正在加载的最小声音。如您所见，如果您单击该链接，声音将从服务器下载正常...

起初问题似乎与区分大小写有关，因此我在文件名中切换了大小写，但该修复并没有继续起作用。这是一个问题，因为我的加载栏与加载了多少资源直接相关，所以它只是坐在那里等待没有回复的 GET 请求......有没有人经历过这样的事情，其中​​ GET 没有收到回复特定资源，但直接加载资源可以正常吗？

我应该说我对大多数这些技术都很陌生，所以在我看来我很可能只是犯了一些新手错误。不幸的是，我不确定那些新手会犯什么错误，因为我是新手！

这是我用来加载声音的代码：

function loadSound(soundName) {
    var newElement = document.createElement("audio");
    newElement.addEventListener("canplaythrough", assetLoaded, false);
    document.body.appendChild(newElement);

    var audioType = supportedAudioFormat(newElement);
    if (audioType == "") {
        alert("no audio support");
        return;
    }
    newElement.setAttribute("src", "lander/sounds/" + soundName + "." + audioType);

    console.log("loading sound " + newElement.src + "...");

    return newElement;
}

还有……

function assetLoaded() {
    var assetName = this.src;

    numAssetsLoaded++;

    console.log("loaded asset " + numAssetsLoaded + " (" + assetName + ")");

    if (numAssetsLoaded >= numAssetsToLoad) {
        shipSpriteSheet.removeEventListener("load", assetLoaded, false);
        pointImage.removeEventListener("load", assetLoaded, false);

        thrustAudioElement.removeEventListener("canplaythrough", assetLoaded, false);
        explosionAudioElement.removeEventListener("canplaythrough", assetLoaded, false);
        victoryAudioElement.removeEventListener("canplaythrough", assetLoaded, false);
        musicTrackElement.removeEventListener("canplaythrough", assetLoaded, false);

        gameState = GAME_STATE_INIT;
    }
}

如果您查看控制台输出，您会看到所有声音都开始加载（尤其是explode1.mp3），但不一定完成并调用assetLoaded.. .

更新：
似乎大家的共识是我应该不使用 mp3（顺便说一句，我已经在使用 mp3、AAC 和 ogg，但默认使用 mp3），而且我应该使用网络音频 API。这些都是受欢迎的输入，我将进行必要的更改。但是，我仍然无法回答最初的问题，即“为什么一个特定的声音不能在桌面上可靠地加载，而其他声音却没有问题？”有没有人想试一试？或者答案会是“这些事情是高度不可预测的，除了切换到更可靠的方法，比如 Web Audio API 之外，没有办法解决它”？

日期：
这是我的 app.yaml 文件的摘录，据我所知，它有助于 GAE 设置服务器。

- url: /(.*\.(mp3|ogg|wav))
  static_files: \1
  upload: (.*\.(mp3|ogg|wav))

Answer 1

需要注意的一些事项：

• 你shouldn't use MP3 for HTML5 games。
• 您需要将所有声音同时编码为 AAC (.m4a) 和 Ogg Vorbis (.ogg)，以确保它们可以在任何地方播放，因为没有一种格式可以在任何地方播放。
• 您必须确保您的服务器具有正确的音频文件 MIME 类型。如果服务器说它的 MIME 类型错误，一些浏览器会很乐意播放音频；其他人会默默地失败。对于 AAC 和 Ogg Vorbis，类型分别为 audio/mp4 和 audio/ogg。
• 大多数移动设备一次只能播放一种声音，iOS 通常不允许您播放音频，除非它是在用户发起的输入事件中（例如 touchstart）。
• 您可能希望在受支持的情况下使用 Web Audio API（Chrome 和 iOS 6+），因为即使在 iOS 上播放也更加可靠和多音 - 但请注意 iOS 仍然mutes the Web Audio API until a user input event。

Answer 2

这不是直接回答您为什么不播放声音的问题，而更像是您应该如何处理游戏音效。

对于游戏音效，我建议您使用 HTML5 Web Audio API，它可以更好地控制声音的播放方式（音效的音高、播放延迟更少等）：

http://www.html5rocks.com/en/tutorials/webaudio/intro/

• iOS 6+ 支持网络音频https://developer.apple.com/technologies/ios6/

• FF 尚不支持网络音频，但即将提供支持