HTML无法加载响应数据NoDataFoundForResourceWithGivenIdentifier
现在有一个HTML文件，相关代码如下<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LRC文件加载器</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
</head>
<body>
<h2>LRC文件加载器</h2>
<div id="lrcContent">
<!-- 这里将显示LRC文件的内容 -->
</div>
<script>
let lrcLines = []; // 用于存储解析后的LRC歌词数据
let currentIndex = 0; // 当前歌词行索引
// 获取URL中的LRC文件地址
const urlParams = new URLSearchParams(window.location.search);
const lrcFileUrl = urlParams.get('URL');
// 加载并解析LRC文件内容
if (lrcFileUrl) {
fetch(lrcFileUrl)
.then(response => response.text())
.then(data => {
parseLrc(data); // 解析LRC文件内容
setInterval(displayCurrentLine, 500); // 每隔500ms更新显示当前时间的歌词
})
.catch(error => {
console.error('Error fetching LRC file:', error);
document.getElementById('lrcContent').innerText = 'Failed to load LRC file.';
});
} else {
document.getElementById('lrcContent').innerText = 'No LRC file specified.';
}
// 解析LRC文件内容
function parseLrc(data) {
lrcLines = []; // 清空之前的歌词数据
const lines = data.split('\n');
lines.forEach(line => {
const match = line.match(/\[(\d{2}):(\d{2})\.(\d{2,3})\](.*)/);
if (match) {
const minutes = parseInt(match);
const seconds = parseInt(match);
const milliseconds = parseInt(match);
const time = minutes * 60 + seconds + milliseconds / 1000;
const text = match.trim();
lrcLines.push({ time, text });
}
});
}
// 显示当前时间点的歌词内容
function displayCurrentLine() {
const audioElement = document.getElementById('audio'); // 如果有音频，可以获取当前播放时间
let currentTime = audioElement ? audioElement.currentTime : 0; // 获取当前时间
// 查找当前时间点对应的歌词行
for (let i = 0; i < lrcLines.length - 1; i++) {
if (currentTime >= lrcLines.time && currentTime < lrcLines.time) {
currentIndex = i;
break;
}
}
// 更新显示的歌词内容
const lrcDiv = document.getElementById('lrcContent');
lrcDiv.innerHTML = '<pre>' + escapeHtml(lrcLines.text) + '</pre>';
}
// 函数用于转义HTML特殊字符，避免XSS攻击
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
</script>
</body>
</html>
在使用时出现无法加载响应数据的情况
这种情况应该如何解决
niu666888 发表于 2024-8-4 17:50
给你问GPT
从你的描述和截图来看，问题可能出在LRC文件的URL或者文件本身。以下是一些可能的解决方法：
...
禁止使用ChatGPT或其他AI生成的答案解答问题
注意版规 把后端代码也发过来啊，就给个前端怎么知道什么问题 要看终端或 HTTP 请求头（标头）的提示。盲猜一个可能是请求被 CORS 规则阻挡了（域名不同等情况）。如果 lrc 文件的服务器不属于你，你需要起个后端转发资源请求。
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS 看着请求错误了吧 mmffddyy 发表于 2024-8-4 20:47
把后端代码也发过来啊，就给个前端怎么知道什么问题
后端没什么代码，这个东西就是从?URL=后面获取歌词文件的地址
而那个地址是用的HTTP File Server - v2.3m (Build #300), © 2002-2010 rejetto作为服务端
本来想看终端或 HTTP 请求头结果这个程序直接不去请求文件了。。。。。。。。。。。。。
页:
[1]