0

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

<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);

display超时是必要的 - 没有它，播放器将开始播放，并且用户代理（此应用专用的 Firefox）在播放完成或暂停之前不会重绘对样式的更改。这是播放器在页面上的显示方式：

初始播放器的屏幕截图

在页面的其他地方，有一个选择元素允许用户加载不同的记录，该记录可能具有一个或多个关联的数字文件。新记录通过 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将播放器添加到页面时，进度条总是不正确：

动态添加的音频元素的屏幕截图

随着曲目的播放，曲目持续时间会增加，但进度条会一直卡到最后。根本不显示总音频持续时间。如果您让曲目播放，您可以搜索已经播放的音频部分，但不能向前播放。

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

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

编辑添加了 php 标签，因为我的问题最终与我如何从 php 提供文件有关

4

1 回答 1

1

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

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

header('Accept-Ranges: bytes');

相关阅读

于 2013-08-20T17:28:56.947 回答