php开发 – 吾学网

4月 25, 2023

关于audio标签使用动态生成的mp3无法拖拽进度条的问题

作者 5xue 在 php开发

html5 audio video不需要插件即可播放音频和视频，currentTime可以用来设置播放的起始时间，使得可以不从文件开头开始播放。如果 html5 audio video设置currentTime失效，无法设置开始播放的时间点，audio/video不能拖动进度条调整播放进度，很有可能是使用了php asp jsp等服务器后端语言动态输出待播放的媒体文件内容，如果audio/video播放的媒体资源文件不是静态文件，不经过处理直接通过服务器语言动态输出流媒体内容，设置currentTime不会生效。

为什么直接使用静态的.mp3 .mp4 .flac等媒体文件时支持使用 audio | video .currentTime = NUMBERIC; （NUMBERIC是一个数字，可以是整数，也可以是浮点数）来设置播放起始位置呢，而动态输出流媒体文件内容时不行呢？

这其中的核心技术就是服务器端对断点续传的支持，断点续传允许客户端从服务器提取某个文件指定字节范围内的一部分内容，当下载中断以后再次下载时可以只请求下载原先没有下载的部分，避免重复传输现有内容。当客户端（浏览器）检测到服务器支持断点续传以后才会发送相应的区间内容请求给服务器，服务器接到请求以后再返回相应范围内的文件内容，这样才能实现流媒体文件的定点播放。而直接使用静态文件做播放资源时，服务器软件通常会自动处理断点续传请求。

实现动态流媒体文件支持通过HTML5 audio/video.currentTime设置播放起始时间点，可以使用以下两种方法。

方法一：

使用服务器模块X-SendFile输出流媒体文件内容来解决currentTime失效的问题，以Apache服务器为例。

首先下载mod_xsendfile，将模块文件复制到Apache的modules目录，在Apache配置文件中添加
LoadModule xsendfile_module modules/mod_xsendfile.so
XSendFile On
XSendFilePath D:/server
复制代码其中XSendFilePath意思是将指定的文件夹路径添加到白名单中，指定文件夹中的文件可以被Apache直接发送给客户端，除了设置的文件夹本身以外，该文件夹包含的各级子目录也在允许范围内。配置完服务器以后重启Apache服务器以后X-SendFile模块有效。

安装了X-SendFile模块以后，PHP输出媒体文件变得非常简单。其中的Content-Type是要输出文件的MIME类型，可以不必写死而通过服务器语言获取。可以参见方法二有实例代码。

方法二：

使用服务器语言模拟断点续传支持让HTML5 audio/video.currentTime生效，以PHP为例。

如果没有服务器配置权限，可以在动态语言中发送Accept-Ranges: bytes和Content-Range: bytes S-E/FILESIZE两个响应头，告诉客户端它请求的服务器资源支持断点续传，服务器端接收到客户端发送的请求以后，从请求头拿到需要发送的内容区间，然后从文件中读取指定起止位置的数据发送到客户端即可解决HTML5 audio/video使用后端语言动态输出媒体文件内容造成的currentTime失效以及无法手动拖动进度条的问题。其中S和E分别是当次请求的起始位置索引和结束位置索引，FILESIZE为代表文件尺寸的总字节数，源码如下：

<?php
function downloadmp3($file) {
	$fileSize = filesize($file);
	$etag = md5(filemtime($file));
	$fp = fopen($file, 'rb');
	if (!$fp) {
		die('Could not open file');
	}
	$start = 0;
	$end = $fileSize - 1;

	if (isset($_SERVER['HTTP_RANGE']) && !empty($_SERVER['HTTP_RANGE'])) {
		//获取请求头中的Range字段
		$range = explode('-', substr($_SERVER['HTTP_RANGE'], strlen('bytes=')));

		$start = $range[0];
		if ($range[1] > 0) {
			$end = $range[1];
		}

		//构造断点续传响应头
		header('HTTP/1.1 206 Partial Content');
		header('Status: 206');
		header('Accept-Ranges: bytes');
		header('Content-Range: bytes ' . $start. '-' . $end . '/' . $fileSize);
		header('Content-Length: ' . ($end - $start + 1));
	} else {
		header('Content-Length: ' . $fileSize);
	}

	header('Content-Type: audio/mpeg');
	header('Last-Modified: ' . date('D, d M Y H:i:s \G\M\T', filemtime($file)));
	header('ETag: "' . $etag . '"');
	header('Expires: 0');

	if ($start > 0) {
		fseek($fp, $start); //移动文件指针
	}

	$bytesPosition = $start;
	while (!feof($fp) && $bytesPosition <= $end) {
		$chunk = 1024 * 1024 * 50; //每次读取50k
		if ($bytesPosition + $chunk > $end + 1) {
			$chunk = $end - $bytesPosition + 1;
		}

		$chunk = fread($fp, $chunk);
		if (!$chunk) {
			die('Could not read file');
		}

		print($chunk);
		flush();

		$bytesPosition += $chunk;
	}
	fclose($fp);
}
?>

<?php

function downloadmp3($file) {

$fileSize = filesize($file);

$etag = md5(filemtime($file));

$fp = fopen($file, 'rb');

if (!$fp) {

die('Could not open file');

}

$start = 0;

$end = $fileSize - 1;

if (isset($_SERVER['HTTP_RANGE']) && !empty($_SERVER['HTTP_RANGE'])) {

//获取请求头中的Range字段

$range = explode('-', substr($_SERVER['HTTP_RANGE'], strlen('bytes=')));

$start = $range[0];

if ($range[1] > 0) {

$end = $range[1];

}

//构造断点续传响应头

header('HTTP/1.1 206 Partial Content');

header('Status: 206');

header('Accept-Ranges: bytes');

header('Content-Range: bytes ' . $start. '-' . $end . '/' . $fileSize);

header('Content-Length: ' . ($end - $start + 1));

} else {

header('Content-Length: ' . $fileSize);

}

header('Content-Type: audio/mpeg');

header('Last-Modified: ' . date('D, d M Y H:i:s \G\M\T', filemtime($file)));

header('ETag: "' . $etag . '"');

header('Expires: 0');

if ($start > 0) {

fseek($fp, $start); //移动文件指针

}

$bytesPosition = $start;

while (!feof($fp) && $bytesPosition <= $end) {

$chunk = 1024 * 1024 * 50; //每次读取50k

if ($bytesPosition + $chunk > $end + 1) {

$chunk = $end - $bytesPosition + 1;

}

$chunk = fread($fp, $chunk);

if (!$chunk) {

die('Could not read file');

}

print($chunk);

flush();

$bytesPosition += $chunk;

}

fclose($fp);

}

3月 1, 2023

PHP使用签名URL对阿里云对象存储进行临时授权

作者 5xue 在 php开发

PHP使用签名URL对阿里云对象存储进行临时授权，代码如下：

<?php
require_once __DIR__ . '/aliyun/oss/autoload.php';

use OSS\OssClient;
use OSS\Core\OssException;

$accessKeyId = "yourAccessKeyId";
$accessKeySecret = "yourAccessKeySecret";
$endpoint = "oss-cn-beijing.aliyuncs.com";
$bucket= "examplebucket";
$object = "exampledir/Rihanna - Rude Boy.mp3"; //填写不包含Bucket名称在内的Object完整路径
$timeout = 600; //设置签名URL的有效时长为600秒。
try {
	$ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
	$options = array(
		//填写Object的versionId（这里会报错，可能sdk版本问题）
		//$ossClient::OSS_VERSION_ID=>"CAEQEhiBgIDmgPf8mxgiIDA1YjZlNDIxY2ZmMzQ1MmU5MTM1Y2M4Yzk4NjIx****"
	);
	//生成签名URL。
	$signedUrl = $ossClient->signUrl($bucket, $object, $timeout, "GET", $options);
	printf("%s", $signedUrl);
} catch(OssException $e) {
	printf("%s", $e->getMessage());
}
?>

<?php

require_once __DIR__ . '/aliyun/oss/autoload.php';

use OSS\OssClient;

use OSS\Core\OssException;

$accessKeyId = "yourAccessKeyId";

$accessKeySecret = "yourAccessKeySecret";

$endpoint = "oss-cn-beijing.aliyuncs.com";

$bucket= "examplebucket";

$object = "exampledir/Rihanna - Rude Boy.mp3"; //填写不包含Bucket名称在内的Object完整路径

$timeout = 600; //设置签名URL的有效时长为600秒。

try {

$ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);

$options = array(

//填写Object的versionId（这里会报错，可能sdk版本问题）

//$ossClient::OSS_VERSION_ID=>"CAEQEhiBgIDmgPf8mxgiIDA1YjZlNDIxY2ZmMzQ1MmU5MTM1Y2M4Yzk4NjIx****"

);

//生成签名URL。

$signedUrl = $ossClient->signUrl($bucket, $object, $timeout, "GET", $options);

printf("%s", $signedUrl);

} catch(OssException $e) {

printf("%s", $e->getMessage());

}

阿里帮助中心：
首页>对象存储 OSS>SDK示例>PHP>PHP授权访问
https://help.aliyun.com/document_detail/32106.html

2月 17, 2023

PHP代码在线测试运行工具

作者 5xue 在 php开发

本例包含2个文件：提供PHP代码编写的前端页面index.html、接受PHP代码解析处理运行的do.php文件。

do.php提供了2种方法来处理PHP代码，一种方法是将处理过的PHP代码通过file_put_contents函数写入到另一个php文件，我们这里命名为了code.php，然后通过header函数跳转到code.php，code.php再将执行结果反馈给index.html。

第二种方法是通过eval函数执行PHP代码，然后将执行结果反馈给index.html。

文件代码如下：

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>PHP代码在线测试运行工具</title>
	<style type="text/css">
		* {
			margin: 0; padding: 0;
		}
		body {
			background-color: #FBF1D3
		}
		.header {
			width:100%; height:60px; text-align:center; font-size:24px; font-weight: bold
		}
		.header span {
			 line-height:60px; padding: 0 50px 6px 50px; border-bottom: 1px solid #666
		}
		.top {
			width:100%; height: 40px; color: red;
		}
		.top .left {
			width: calc(50% - 15px); margin-left:10px; padding-top:10px; text-align:left; float:left
		}
		.top .left  button{
			margin-left:20px; padding: 2px 10px
		}
		.top .right {
			width: calc(50% - 5px); padding-top:10px; text-align:left; float: right
		}
		.main {
			position: absolute; 	top: 100px; right: 0; bottom:0; left:0; padding: 0 10px
		}
		.main .left {
			width: calc(50% - 5px); height: 100%; box-sizing: border-box; border:1px solid #666; background: #fff; float: left; overflow: hidden
		}
		.main .left textarea {
			width: 100%; height: 100%; border: 0px solid #333; resize: none
		}
		.main .middle {
			width: 10px; height: 100%; float: left
		}
		.main .right {
			width: calc(50% - 5px); height: 100%; box-sizing: border-box; border:1px solid #666; background: #fff; float: left
		}
	</style>
</head>
<body>
	<div class="header"><span>PHP代码在线测试运行工具</span></div>
	<div class="top">
		<div class="left">PHP代码<button onclick=btnClick(1)>运行代码（方法1）</button><button onclick=btnClick(2)>运行代码（方法2）</button></div>
		<div class="right">运行结果</div>
	</div>
	<div class="main">
		<div class="left"><textarea>$a = 0;
$b= 12;
$c = $a * 2 + $b *4;
if ($a > 0 && $b > 0) echo $c;
else echo "a和b必须大于0";</textarea></div>
		<div class="middle"></div>
		<div class="right"></div>
	</div>
	<script type="text/javascript">
		function btnClick(tp) {
			var data = "type=" + tp + "&code=" + encodeURIComponent(document.querySelector("textarea").value); //
			var xhr = null;
			if (window.XMLHttpRequest) {
				xhr = new XMLHttpRequest();
			} else if (window.ActiveXObject) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					console.log(xhr.response)
					document.querySelector('.main .right').innerHTML = xhr.response;
				}
			}
			xhr.open("POST", "do.php", true);
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
			xhr.send(data);
		}
	</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>PHP代码在线测试运行工具</title>

* {

margin: 0; padding: 0;

}

body {

background-color: #FBF1D3

}

.header {

width:100%; height:60px; text-align:center; font-size:24px; font-weight: bold

}

.header span {

line-height:60px; padding: 0 50px 6px 50px; border-bottom: 1px solid #666

}

.top {

width:100%; height: 40px; color: red;

}

.top .left {

width: calc(50% - 15px); margin-left:10px; padding-top:10px; text-align:left; float:left

}

.top .left button{

margin-left:20px; padding: 2px 10px

}

.top .right {

width: calc(50% - 5px); padding-top:10px; text-align:left; float: right

}

.main {

position: absolute; top: 100px; right: 0; bottom:0; left:0; padding: 0 10px

}

.main .left {

width: calc(50% - 5px); height: 100%; box-sizing: border-box; border:1px solid #666; background: #fff; float: left; overflow: hidden

}

.main .left textarea {

width: 100%; height: 100%; border: 0px solid #333; resize: none

}

.main .middle {

width: 10px; height: 100%; float: left

}

.main .right {

width: calc(50% - 5px); height: 100%; box-sizing: border-box; border:1px solid #666; background: #fff; float: left

}

</style>

</head>

<body>

<div class="header"><span>PHP代码在线测试运行工具</span></div>

<div class="left">PHP代码<button onclick=btnClick(1)>运行代码（方法1）</button><button onclick=btnClick(2)>运行代码（方法2）</button></div>

</div>

<div class="left"><textarea>$a = 0;

$b= 12;

$c = $a * 2 + $b *4;

if ($a > 0 && $b > 0) echo $c;

else echo "a和b必须大于0";</textarea></div>

</div>

function btnClick(tp) {

var data = "type=" + tp + "&code=" + encodeURIComponent(document.querySelector("textarea").value); //

var xhr = null;

if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

} else if (window.ActiveXObject) {

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

console.log(xhr.response)

document.querySelector('.main .right').innerHTML = xhr.response;

}

xhr.open("POST", "do.php", true);

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

xhr.send(data);

}

</script>

</body>

</html>

do.php

<?php
if (isset($_POST["type"])) {
	$tp = ($_POST["type"] == 1) ? 1: 2;
} else {
	exit("type参数未设置！");
}
if(!empty($_POST["code"])) {
	$code = '<?php' . PHP_EOL . trim($_POST['code'], '<?php' . PHP_EOL);
} else {
	exit("你好像没有输入代码！");
}

if ($tp == 1) {
	file_put_contents('code.php', $code); //要有写入权限
	header('Location: code.php');
} else {
	function handle_error($error_level, $error_message, $error_file, $error_line, $error_context) {
		ob_end_clean();
		echo "[第" . $error_line . "行] " . "发生错误：" . $error_message;
		die();
	}

	function handle_exception($exception) {
		ob_end_clean();
		echo "[第" . $exception -> getLine() . "行] " . "发生错误：" . $exception -> getMessage();
		die();
	}

	function shutdown_function() {
		$error = error_get_last();
		if(!empty($error)) {
			ob_end_clean();
			echo "[第" . $error['line'] . "行] " . "发生错误：" . $error['message'];
			die();
		}
	}

	ini_set('xdebug.overload_var_dump', '1');
	error_reporting(E_ALL);
	set_error_handler('handle_error');
	set_exception_handler('handle_exception');
	register_shutdown_function('shutdown_function');

	$code = trim($code, '<?php');
	$code = trim($code, PHP_EOL);
	ob_start();
	eval($code);
	$output = ob_get_contents();
	ob_end_clean();
	echo $output;
}

<?php

if (isset($_POST["type"])) {

$tp = ($_POST["type"] == 1) ? 1: 2;

} else {

exit("type参数未设置！");

}

if(!empty($_POST["code"])) {

$code = '<?php' . PHP_EOL . trim($_POST['code'], '<?php' . PHP_EOL);

} else {

exit("你好像没有输入代码！");

}

if ($tp == 1) {

file_put_contents('code.php', $code); //要有写入权限

header('Location: code.php');

} else {

function handle_error($error_level, $error_message, $error_file, $error_line, $error_context) {

ob_end_clean();

echo "[第" . $error_line . "行] " . "发生错误：" . $error_message;

die();

}

function handle_exception($exception) {

ob_end_clean();

echo "[第" . $exception -> getLine() . "行] " . "发生错误：" . $exception -> getMessage();

die();

}

function shutdown_function() {

$error = error_get_last();

if(!empty($error)) {

ob_end_clean();

echo "[第" . $error['line'] . "行] " . "发生错误：" . $error['message'];

die();

}

ini_set('xdebug.overload_var_dump', '1');

error_reporting(E_ALL);

set_error_handler('handle_error');

set_exception_handler('handle_exception');

register_shutdown_function('shutdown_function');

$code = trim($code, '<?php');

$code = trim($code, PHP_EOL);

ob_start();

eval($code);

$output = ob_get_contents();

ob_end_clean();

echo $output;

}

2月 15, 2023

php上传文件到阿里云对象存储

作者 5xue 在 php开发

本例含2个文件的代码，一个是选择上传文件的表单页面文件（upload.html），一个是负责上传的sendOss.php文件。

upload.html代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>php上传文件到阿里云对象存储</title>
</head>
<body>
<form method="post" action="sendOss.php" enctype="multipart/form-data" target="_blank"><input type="file" name="file" /><br /><input type="submit" value=" 上传 " /></form>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>php上传文件到阿里云对象存储</title>

</head>

<body>

</body>

</html>

sendOss.php代码

<?php
if ($_FILES["file"]["error"] > 0) {
	exit("Error: " . $_FILES["file"]["error"]);
}

require_once __DIR__ . '/aliyun/oss/autoload.php';

use OSS\OssClient;
use OSS\Core\OssException;

//阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户
$accessKeyId = "yourAccessKeyId";
$accessKeySecret = "yourAccessKeySecret";

//yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1（杭州）为例，Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com
$endpoint = "yourEndpoint";

//填写Bucket名称，例如examplebucket
$bucket= "examplebucket";

//Object完整路径，不含Bucket名称。exampledir是你阿里云对象存储Bucket下的目录名称，对象名称这里保留了原文件名称，你也可以改成别的名称
$object = "exampledir/" . $_FILES["file"]["name"];

//要上传的本地文件
$filePath = $_FILES["file"]["tmp_name"]; 

try{
	$ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);
	$ossClient->uploadFile($bucket, $object, $filePath);
} catch(OssException $e) {
	printf("%s", __FUNCTION__ . ": FAILED\n");
	printf("%s", $e->getMessage());
    return;
}
printf("%s", __FUNCTION__ . "OK");
?>

<?php

if ($_FILES["file"]["error"] > 0) {

exit("Error: " . $_FILES["file"]["error"]);

}

require_once __DIR__ . '/aliyun/oss/autoload.php';

use OSS\OssClient;

use OSS\Core\OssException;

//阿里云账号AccessKey拥有所有API的访问权限，风险很高。强烈建议您创建并使用RAM用户进行API访问或日常运维，请登录RAM控制台创建RAM用户

$accessKeyId = "yourAccessKeyId";

$accessKeySecret = "yourAccessKeySecret";

//yourEndpoint填写Bucket所在地域对应的Endpoint。以华东1（杭州）为例，Endpoint填写为https://oss-cn-hangzhou.aliyuncs.com

$endpoint = "yourEndpoint";

//填写Bucket名称，例如examplebucket

$bucket= "examplebucket";

//Object完整路径，不含Bucket名称。exampledir是你阿里云对象存储Bucket下的目录名称，对象名称这里保留了原文件名称，你也可以改成别的名称

$object = "exampledir/" . $_FILES["file"]["name"];

//要上传的本地文件

$filePath = $_FILES["file"]["tmp_name"];

try{

$ossClient = new OssClient($accessKeyId, $accessKeySecret, $endpoint);

$ossClient->uploadFile($bucket, $object, $filePath);

} catch(OssException $e) {

printf("%s", __FUNCTION__ . ": FAILED\n");

printf("%s", $e->getMessage());

return;

}

printf("%s", __FUNCTION__ . "OK");

说明：
本例中阿里云OSS的php版sdk放在了/aliyun/oss/目录下。

参考资料：阿里帮助中心 – 首页>对象存储 OSS>SDK示例>PHP>PHP上传文件>PHP简单上传
https://help.aliyun.com/document_detail/88473.html?spm=a2c4g.11186623.0.0.7e404a9cu3c2kT

分类目录php开发