将视听器改编成代码笔的尝试失败了……需要建议

Question

我尝试将此音频可视化工具从 https://github.com/wayou/audio-visualizer-with-controls 应用到 codepen.io。这些是我遇到的问题。

1- 可视化工具（条形图类型显示）在 canvas 字段上不起作用。 2 - 即使播放器正在播放也没有声音。

这是我在 codepen 中的文件 link http://codepen.io/cgyc8866/pen/wGRqLw

这是 HTML 文件。 CSS和JS文件可以在上面link.

的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 中工作，或者至少知道它为什么不工作。提前谢谢你。

Answer 1

对于音频可视化，网络音频 API 是必需的，这将反过来要求音频源符合跨域使用要求。

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

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

例如使用 rawgit.com 为它创建一个 CDN link（我不隶属于他们）
rawgit.com 允许跨源使用，但要请求此功能，您需要向音频标签添加 crossOrigin 属性。

所以，总而言之：

Modifed pen here

<audio crossOrigin="anonymous"
src="https://cdn.rawgit.com/wayou/audio-visualizer-with-controls/gh-pages/assets/sample.mp3" 
id="audio" controls>
  audio element not supported
</audio>

（预加载音频可能需要几秒钟）

音频现在可以用作网络音频 API/the 可视化工具的来源。请注意，IE 用户无法使用网络音频 API。

（发布前务必阅读 CDN 使用条款。）

将视听器改编成代码笔的尝试失败了……需要建议

Unsuccessful attempt in adapting audio-visualizer into codepen...need advise

javascript

css

audio

html5-canvas

visualizer