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>

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