HTML5 音频元素" src = get.php 不能跳过位置答案

【问题标题】：HTML5 Audio Element " src = get.php cannot skip positionHTML5 音频元素" src = get.php 不能跳过位置
【发布时间】：2012-11-07 12:40:33
【问题描述】：

我正在使用 HTML5 AudioElement 播放我的 .mp3 文件，但我注意到无法跳过该位置。我正在通过 PHP 从 www 根目录之外获取文件。

我正在使用 HTML 代码：

<audio src="" controls id="appAudio" style="width:1000px;margin-top:10px"></audio>

JavaScript 代码：

document.getElementById('appAudio').src= 'http://localhost/index.php/player/get_audio_via_php/1';

PHP 代码：

    $file = "/myfolder/1.mp3";
    header('Content-Type: audio/mpeg');
    header('Content-Length: ' . filesize($file));

    return file_get_contents($file);

就像我说的那样，它会播放音频文件，但不能跳过位置。这个问题有方法解决吗？

谢谢

【问题讨论】：

标签： php javascript html audio html5-audio

【解决方案1】：

如果浏览器没有缓存中的文件，“跳过”会导致浏览器发送一个新请求，带有"range" header。您的 PHP 文件需要处理此标头。

这意味着：

【讨论】：

谢谢。我会进一步研究这个。但是有没有一种简单的方法来获取 www 根目录之外的音频文件？
根据您的网络服务器配置，您可以创建符号链接。 superuser.com/questions/244245/…
你有一个如何实现范围标题的工作示例吗？我不能一个工作的例子......
我找到了这个但不能工作stackoverflow.com/questions/11340276/make-mp3-seekable-php
您是否指定了正确的内容类型（函数的第二个参数）？ serve_file_resumable($file, 'audio/mpeg');

【解决方案2】：

看看这个帖子，与serving mp3 files via php相关。

答案建议更改内容类型以包含几种类型：

header("Content-Transfer-Encoding: binary"); 
header("Content-Type: audio/mpeg, audio/x-mpeg, audio/x-mpeg-3, audio/mpeg3");

【讨论】：

【解决方案3】：

老问题...我用过这个，似乎在 Chrome 上工作。

    header("Content-Transfer-Encoding: binary"); 
    header("Content-Type: audio/mpeg, audio/x-mpeg, audio/x-mpeg-3, audio/mpeg3");
    header('Content-Disposition:: inline; filename="'.$audio->filename.'"');
    header('Content-length: '.$fileSize);
    header('Cache-Control: no-cache');
    header('Accept-Ranges: bytes');
    readfile($filepath);

【讨论】：