2023年 – 第10页

5月 4, 2023

乐驾A8-plus行车记录仪如何升级tf卡

作者 5xue 在未定义

我的行车记录仪是乐驾的A8-plus，存储卡的容量是16GB，感觉空间不够用，在京东上下单买了个“金士顿行车记录仪&家庭监控摄像专用 TF（MicroSD）存储卡”，容量是128GB。

拿到新卡后，我把它插入到记录仪的卡槽里，然后开机，手指点击屏幕，出现操作选择界面，点录像按钮，发出“未插入SD卡”的提示音。我的心里满是疑惑，难道是卡的容量太大，记录仪不支持？还是别的什么原因？

我把新卡插到电脑上，看到卡的分区格式是exFAT格式。再看16GB的旧卡，则是FAT32格式。于是我决定把新卡重新格式化成FAT32格式，看看行不行。

但通过操作我发现Windows系统自带的磁盘管理工具根本无法格式化128GB的新卡为FAT32格式，于是百度查“如何格式化大容量fat32”，发现傲梅分区助手可以做这件事，于是下载安装了傲梅分区助手，通过傲梅微信公众号获得“使用码”，最终成功将128GB的新卡格式化为FAT32格式，操作如下：

运行傲梅分区助手，选中卡所在硬盘，鼠标右键点选“格式化”选项

设置文件系统为“FAT32”，点“确定”按钮

点击左上角“提交”按钮，在弹出的提示窗口点击“执行”按钮

在弹出的确认窗口点击“是”按钮

几秒钟后格式化操作完成

将重新格式化的新卡再次插入到行车记录仪的卡槽内，开机点击屏幕选录像按钮，发出“开始录像”的提示音！128GB的新卡可以使用了！

4月 26, 2023

js实现单击英文文本取词

作者 5xue 在 Javascript

源代码：

<!DOCTYPE html>
<html lang="en">
<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>单击英文文本取词</title>
</head>
<body>
<div>If you visit the Great Smoky Mountains National Park, chances are you will remember the roadside or campground bears above all else. Bears are the most popular animals in a number of our national parks. In these mountains where the population of bears runs into the hundreds, opportunities to observe these large wild animals are plentiful during the summer. Since national parks are wildlife sanctuaries where no disturbance of the native animals is allowed, years of protection have served to break down the wild bears' fear of humans. Now, instead of depending on their own resources for a living, many bears patrol park roads and campgrounds.</div>
<script>
var obj = document.querySelector('div');
var s1 = obj.innerHTML;
var s2 = s1.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>');
obj.innerHTML = s2;
var sps = document.querySelectorAll('.word');
sps.forEach((item, index) => {
	item.onclick = function(event) {alert(event.target.innerHTML)};
})
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>单击英文文本取词</title>

</head>

<body>

<div>If you visit the Great Smoky Mountains National Park, chances are you will remember the roadside or campground bears above all else. Bears are the most popular animals in a number of our national parks. In these mountains where the population of bears runs into the hundreds, opportunities to observe these large wild animals are plentiful during the summer. Since national parks are wildlife sanctuaries where no disturbance of the native animals is allowed, years of protection have served to break down the wild bears' fear of humans. Now, instead of depending on their own resources for a living, many bears patrol park roads and campgrounds.</div>

var obj = document.querySelector('div');

var s1 = obj.innerHTML;

var s2 = s1.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>');

obj.innerHTML = s2;

var sps = document.querySelectorAll('.word');

sps.forEach((item, index) => {

item.onclick = function(event) {alert(event.target.innerHTML)};

})

</script>

</body>

</html>

样例：http://5xue.cc/wp-content/uploads/samples/20230426

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

Archive2023