Javascript 使用MediaElementAudio和远程url时出现问题

因此，我正在制作一个音频可视化网站，我认为如果我能让用户将youtube视频url粘贴到该网站中，该网站将使用该youtube视频的源url作为html5音频标签的源（html5音频支持mp4），那将是一件很酷的事情。但出于某种原因，它只是不想工作

示例源url：

现在，当我尝试这样做时，会出现错误“MediaElementAudioSource由于CORS访问限制而输出零”。所以，因为我以前读过这个问题，我找到了一个解决方案，我可以添加属性：crossOrigin=“anonymous”；我的音频标签，它会开始工作

不，没有。现在我得到了错误“Uncaught（in promise）DOMException:未能加载，因为找不到支持的源。”我完全被难住了

另外，请注意，当用户只需将音频曲目或mp4视频拖动到网站上时，该网站目前运行良好。我使用URL.createObjectURL（）创建拖动文件的URL

任何帮助都将不胜感激，谢谢

编辑1：所以我做了更多的研究，发现了一篇文章，所以我整理了一些代码

var audio = document.getElementById("myAudio");
audio.crossOrigin = "anonymous";
audio.src = songSources[currentIndex];
audio.load();

var playPromise = audio.play();

if (playPromise !== undefined) {
    playPromise.then(function() {
        alert("good");
    }).catch(function(error) {
        alert(error);
    });
}

正如我所料，我从catch块得到了一条错误消息。它的内容是：“NotSupportedError:未能加载，因为找不到支持的源。”我发现这非常令人困惑，因为如果我简单地从音频元素中删除crossOrigin=“anonymous”属性，音频元素将正常播放。有什么想法吗

---

edit2：似乎我也难住了你们，哈哈。

似乎相关。是的，我看了完全相同的线程，奇怪的是，如果我的音频标签没有属性：crossOrigin=“anonymous”，音频将播放，但我得到错误：“MediaElementAudioSource由于CORS访问限制而输出零”。但是，如果我将属性：crossOrigin=“anonymous”添加到我的音频标记中，音频将不会播放，并且我会收到错误“Uncaught（in promise）DOMException:未能加载，因为找不到支持的源”。但我没有收到MediaElementAudio的任何错误。。。idk