使用 PHP 提供的源启用音频搜索 HTML5 音频和 MediaElement.js 播放器答案

【问题标题】：Enable audio seeking HTML5 audio and MediaElement.js players with PHP served source使用 PHP 提供的源启用音频搜索 HTML5 音频和 MediaElement.js 播放器
【发布时间】：2013-08-22 00:19:39
【问题描述】：

我用 MediaElement.js 设置了一个 MP3 音频播放器，它不允许我搜索，而 mediaelementjs.com 上的演示确实允许搜索。我没有看到任何有关在网站上启用搜索的选项或说明。为什么不寻找？

我使用的是 2.13.1 版本。下面是代码（除了包含的js和css文件）：

<audio controls="control" preload="auto" src="sound.mp3" type="audio/mp3"></audio>
<script>
$('audio').mediaelementplayer();
</script>

编辑：我发现问题在于我如何通过 PHP 提供音频文件。我之前没有提到这一点，但我已将问题标题更改为包含此内容。 MP3 文件通过 PHP readfile() 提供，以防止非会员下载。

【问题讨论】：

您使用的是哪个浏览器，您能在浏览器控制台中看到任何错误吗？
我使用的是 Chrome，控制台没有错误。
嗯，Chrome 应该可以用 mp3... 你能把你的代码粘贴到 jsfiddle.net 吗？
精确搜索是什么意思？在你的母鸡上，我提前点击时间栏说，13:00，它工作正常。
这就是我所说的寻找的意思——点击时间栏上的前面可以转到音频中的另一个时间。我的“母鸡”是什么？

标签： mediaelement.js

【解决方案1】：

如果您通过 PHP 为 HTML5 音频元素和其他播放器（如 MediaElement.js）提供音频文件，则需要包含以下标头以寻求工作：

<?php header('Accept-Ranges: bytes'); ?>

这是我提供文件的 php：

if(file_exists($file)) {
    header('Content-Description: File Transfer');
    header('Content-Type: application/octet-stream');
    header('Content-Disposition: attachment; filename='.$filename);
    header('Content-Transfer-Encoding: binary');
    header('Expires: 0');
    header('Cache-Control: must-revalidate');
    header('Pragma: public');
    header('Content-Length: ' . filesize($file));
    header('Accept-Ranges: bytes');
    flush();
    readfile($file);
    exit();
}

当然，你需要设置$file（文件路径）和$filename（只是文件名）。

【讨论】：

readfile 会自动搜索到 mediaelement.js 想要的位置吗？
不，不会。这只是提供文件的一些 php，而不是硬链接到实际文件。
我仍在努力让 MediaElement 工作。我更新了你的代码 $filename = basename($file); header("内容配置：附件；文件名=\"$文件名\"");设置下载的文件名。它必须有引号，或者如果文件名中有空格，则只会出现第一个单词。