使用带有音频标签源的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/