gpt4 book ai didi

javascript - HTML5 音频可视化工具的问题

转载 作者:行者123 更新时间:2023-12-03 09:59:48 25 4
gpt4 key购买 nike

我正在尝试在网站上找到的代码。其来源在这里:

http://themaninblue.com/experiment/webAudioAPI/Source.zip

现在的情况是:使用本地文件可以正常工作,但是当我尝试连接到互联网上的文件时(基本上更改音频的 src 属性),它可以播放,但我不能听到任何声音。此外,可视化工具没有做任何事情。

编辑:我在 HTML 代码中唯一更改的是:

<audio id="music" src="http://www.mfiles.co.uk/mp3-downloads/edvard-grieg-peer-gynt1-morning-mood.mp3" autoplay controls preload="auto" ></audio>

我还使用过<body onload="init()">而不是事件监听器。我没有改变任何其他内容

如何才能使可视化工具能够处理在线文件(甚至流)?

最佳答案

任何允许您读取和分析位和字节的内容,例如字节数组 (XMLHttpRequest)、音频数据 (Web Audio api) 或图像数据(通过 Canvas 2d 上下文)都受到 cross-origin resource sharing 的限制。 ,或简称 CORS。

这与安全有关,如果源服务器不允许使用 CORS,并且源服务器(来源)与页面本身不同,则所有浏览器都会阻止 CORS 使用。

解决这个问题的唯一方法是:

  1. 将文件复制到加载页面的同一服务器(或源)
  2. 配置远程服务器以允许使用 CORS - 如果您无权这样做,则这不是一个选项
  3. 在您自己的服务器上设置一个代理页面(与播放音频的页面相同),该页面在服务器端加载音频文件并通过服务器将其传递到页面。

如果服务器允许使用 CORS,您可以尝试在标签中添加 crossOrigin 属性:

<audio id="music" 
crossOrigin = "anonymous"
src="http://www.mfiles.co.uk/mp3-downloads/edvard-grieg-peer-gynt1-morning-mood.mp3"
autoplay
controls
preload="auto" >
</audio>

参见this link了解更多详情。

关于javascript - HTML5 音频可视化工具的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30634060/

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