Question

我有一个页面会加载一个或多个最初隐藏的音频元素。这是我正在使用的标记的一个例子：

<audio style="display:none;" data-id="<?=($file['id'])?>" class="digitalMessageAudio" id="primaryPlayer<?=($file['id'])?>" preload="auto" src="mp3.php?f=<?=($file['path'])?>" controls></audio>

src属性指的是mp3.php，它只是从网络位置读取媒体文件并将其传递（这是有效的，并且是必要的）。

加载时，我在这些音频元素上调用load方法;我希望他们能够立即做好准备，尽可能少地延迟：

$('.digitalMessageAudio').each(function (idx, ele) {
    ele.load();
});

当用户点击“播放”按钮时，该按钮只是位于页面上的button元素，会显示音频播放器并开始播放：

$(player).css('display', 'block');
setTimeout(function () {
    player.play();
}, 500);

超时是必要的 - 没有它，播放器将开始播放，用户代理（此应用程序专用的Firefox）不会将更改重绘为display样式，直到播放完成或暂停。这就是玩家在页面上的显示方式：

screencap of initial player

在页面的其他位置，有一个select元素允许用户加载不同的记录，该记录可能包含一个或多个相关的数字文件。新记录通过ajax加载，并替换上一条记录的HTML：

$.ajax({
    'url':'announcement?type=psa&id='+message_id+'&render=1',
    'success':function (response) {
        $('.renderedMessage').html(response);
        setTimeout(function () {
            $('.digitalMessageAudio').each(function (idx, ele) {
                ele.load();
            });
        }, 500);
    }
});

这一切都正常。当用户此时点击相关的播放按钮时，出现问题，显示播放器并开始播放。除非通过ajax将播放器添加到页面时，进度条始终不正确：

screencap of dynamically added audio element

当曲目播放时，曲目持续时间会上升，但进度条会保持卡住状态。简单地不显示总音频持续时间。如果您让音轨播放，您可以搜索已播放但未转发的音频部分。

如果我在Firebug的Net面板中观看，我会看到加载的音频文件（在点击任何播放之前）。等到这些完成加载不会影响问题。

问题摘要：动态添加的audio元素（通过AJAX）不显示音频持续时间，并且进度/搜索栏不正确。

编辑添加了php标记，因为我的问题特定于我如何从php提供文件

Answer 1

继续研究后，我发现其他人也有类似的问题。他们的解决方案通过一些试验和错误引导我找到了我自己的解决方案。

将以下行添加到mp3.php（正在读取文件并通过它们）解决了Firefox中的问题：

header('Accept-Ranges: bytes');

相关阅读

Browser audio-playback fails when Accept-Ranges not set in http headers; WHY?
https://groups.google.com/forum/#!topic/gs-discussion/kAHcHXKORL4 - 与视频相关，但似乎是一个类似的问题
https://bugzilla.mozilla.org/show_bug.cgi?id=560806 - 另一个与视频相关但呈现相同症状的人

<audio>显示错误的曲目进度，没有持续时间</audio>

1 个答案: