Javascript 尝试将音频可视化工具改编为代码笔时失败…需要建议_Javascript_Css_Audio_Html5 Canvas_Visualizer

Javascript 尝试将音频可视化工具改编为代码笔时失败…需要建议

javascript css audio html5-canvas

Javascript 尝试将音频可视化工具改编为代码笔时失败…需要建议,javascript,css,audio,html5-canvas,visualizer,Javascript,Css,Audio,Html5 Canvas,Visualizer,我试着从codepen.io上采用这个音频可视化工具。这些就是我遇到的问题 1-可视化工具（条形图类型显示）未在画布字段上工作。 2-即使音频播放器正在播放，也没有声音这是我的代码笔文件的链接这是HTML文件。CSS和JS文件可以在上述链接的codepen中查看 <html> <head> <title>audio visualizer with audio element</title> <link rel="style

我试着从codepen.io上采用这个音频可视化工具。这些就是我遇到的问题

1-可视化工具（条形图类型显示）未在画布字段上工作。 2-即使音频播放器正在播放，也没有声音

这是我的代码笔文件的链接

这是HTML文件。CSS和JS文件可以在上述链接的codepen中查看

<html>
<head>
    <title>audio visualizer with audio element</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h3>audio visualizer with controls</h3>
<p>star me on <a href="https://github.com/wayou/audio-visualizer-with-controls">github</a> </p>
    <canvas id='canvas' width="800" height="350"></canvas>
    <br>
    <br>
    <audio src="http://wayou.github.io/audio-visualizer-with-controls/assets/sample.mp3" id="audio" controls>audio element not supported</audio>
    <script src="main.js"></script>
</body>


带音频元素的音频可视化工具
带控件的音频可视化工具
给我点颜色看看




不支持音频元素

我希望有人能看看。我喜欢让这个程序在codepen中工作，或者至少知道它为什么不工作。提前感谢。

对于音频可视化，需要Web音频API，这将要求音频源符合跨来源使用要求

这意味着您需要将音频上传到与使用它的页面相同的服务器和位置（源站），或者使用允许跨源站使用的外部服务，如CDN

提示：由于音频位于GitHub上，您可以执行以下操作：

例如，用于为it创建CDN链接（我与他们没有关联）
rawgit.com允许跨源使用，但要请求跨源使用，需要在音频标记中添加跨源属性

因此，总而言之：


不支持音频元素

我将上述代码片段实现到codepen，可视化工具工作得非常好。谢谢你。