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

Question

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

这里是我想要的一些例子:

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

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

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

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

恐怕不可能，因为我们可以加载网页而不是声音，然后对其进行分析，这将导致严重的安全性缺失。有没有解决办法呢？

Answer 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>