Uncaught TypeError: Failed to execute 'createMediaElementSource' on 'AudioContext': parameter 1 is not of type 'HTMLMediaElement'

Question

我目前正在尝试在 JavaScript 中创建音频可视化工具，但此错误不断出现：

Uncaught TypeError: Failed to execute 'createMediaElementSource' on 'AudioContext': parameter 1 is not of type 'HTMLMediaElement'.

我不太确定如何解决这个错误，我一直在网上寻找答案，但似乎没有任何帮助。

当您点击播放时音乐会播放，但我需要我的可视化工具接受来自音频元素的数据，这样我才能拥有一个可以正常工作的可视化工具。

This is a link to my code, you can access it by right-clicking and hitting inspect.

Answer 1

这是您的部分代码：

let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
let audio = document.querySelector('song1');
let analyser = audioCtx.createAnalyser();
let source = audioCtx.createMediaElementSource(audio);

您尝试获取元素 song1，但它不存在于您的 HTML 中。这可能就是您收到此错误的原因。此外，如果您尝试通过 id 检索元素，您应该这样做

let audio = document.querySelector('#song1');

然后在你的 html

<audio id="song1" controls="">

然后我检查了您是否会遇到其他错误，但这回答了您的问题。