我正在尝试通过 Ajax 请求检索音频数据并将其加载到音频元素中，但由于某种原因我无法让播放器工作。播放按钮保持禁用状态，似乎没有加载任何内容。这是我的代码的简化版本，它演示了该问题。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
<audio id="audio" src="" controls></audio>
<script>
$.ajax({
url: 'test.mp3',
method: 'GET',
success: function (data) {
var blob = new Blob([data], { type: "audio/mpeg" });
var blobUrl = URL.createObjectURL(blob);
$('#audio').attr('src', blobUrl);
},
error: function (error) {
console.error('Error fetching audio:', error);
}
});
</script>
</body>
</html>
默认情况下，jQuery 的
$.ajax()既然您无论如何都在发出 GET 请求，那么您甚至不应该使用 AJAX。只需将 URL 设置为
srcdocument.querySelector('#audio').src = 'test.mp3';