gpt4 book ai didi

javascript - 尝试将视听器转换为代码笔未成功……需要劝告

转载 作者:行者123 更新时间:2023-12-02 22:38:29 25 4
gpt4 key购买 nike

我尝试将这种音频可视化器从https://github.com/wayou/audio-visualizer-with-controls引入codepen.io。这些是我遇到的问题。

1-可视器(条形图类型显示)在 Canvas 字段上不起作用。
2-即使正在播放音频播放器,也没有声音。

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

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

<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 Audio API,这反过来又需要音频源来遵守跨域使用要求。

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

提示:由于音频位于GitHub上,因此您可以执行以下操作:

  • 使用rawgit.com例如为其创建CDN链接(我不隶属于它们)
  • 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>


    (预加载音频可能需要花费几秒钟的时间)

    现在可以将音频用作Web Audio API /可视化器的源。请注意,Web音频API对IE用户不可用。

    (发布CDN之前,请务必阅读CDN的使用条款。)

    关于javascript - 尝试将视听器转换为代码笔未成功……需要劝告,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37042843/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com