使用来自音频标签的源使用 AudioContext

Posted 2023-02-25

【中文标题】使用来自音频标签的源使用 AudioContext

【英文标题】：Working with AudioContext with a source from audio tag

【发布时间】：2012-10-25 23:37:37

【问题描述】：

我正在构建一个音乐播放器，我想根据当前播放的曲目添加一个脉动效果。

这里有一些我想要的例子：

http://www.htmlfivewow.com/demos/hal/index.html

http://www.schillmania.com/projects/soundmanager2/demo/360-player/canvas-visualization.html

我的问题是，在第一个示例中，声音是通过 xhr 加载的，而在第二个示例中，它使用了 flash。

我希望能够从音频标签中获取我想要分析的声音。

恐怕不可能，这会导致很大的安全性缺失，因为我们可以加载网页而不是声音然后分析它。反正有解决办法吗？

【问题讨论】：

问了类似的问题几秒钟然后注意到你的问题:)

【参考方案1】：

您可以在 AudioContext 中使用 createMediaElementSource 方法。

<audio id="audio" src="test.mp3"></audio>
<script type="text/javascript">
    var context = new webkitAudioContext;
    var el = document.getElementById('audio');
    var source = context.createMediaElementSource(el);
    source.connect(context.destination);
    el.play();
</script>

【讨论】：

我真的很喜欢这种方法，因为它不需要提示用户权限或全局输入上下文，只需要音频标签。

【参考方案2】：

看起来这是通过 Web Audio API 实现的一种实现：

https://github.com/richtaur/audia/blob/master/audia.js

和背景：

http://www.lostdecadegames.com/audia-is-a-library-for-simplifying-the-web-audio-api/

【讨论】：

为我工作。它通过 1) 模拟 标记 2) 让您访问 AudioContext 来达到相同的目的。为什么不能用这个？

我只想构建一个个人音乐播放器并发现音频 api，我想要一个“漂亮”的解决方案，使用覆盖不是我想要的。即使audia看起来不错。它还使用 xhr 来加载音频文件。感谢您对我的“问题”感兴趣；）