最近,在项目中尝试使用html5中的audio标签做web版的播放器,因为涉及到付费的音频,所以需要对用户权限做一些判断,然后动态输出mp3。但是,动态生成的mp3在chrome中无法正常拖动。
我们来看一下代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<audio src="http://localhost/demo/mp3.php" controls="controls"></audio>
</body>
</html>
header("Content-type:audio/mpeg");
header('Content-Length: ' . filesize("1.mp3"));
echo file_get_contents("1.mp3");
进度条不能拖动
将audio中的src修改成mp3源文件路径:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<audio src="http://localhost/demo/1.mp3" controls="controls"></audio>
</body>
</html>
在chrome中拖动正常
猜想,莫非audio播放mp3后缀的音频文件才能拖动进度条?
尝试配置apache解析后缀为mp3的php文件,将mp3.php改成mp3.mp3,问题依然存在。