Question

我正在尝试使用html5网络音频分析器来显示来自twilio API的通话录音，但每当我连接我的分析器（可视化器）时，它都会使我的音频静音。

这是相关代码：

initScope = function () {
        context = new window.AudioContext()
        canvas = document.querySelector('.visualizer')
        scope = new Oscilloscope(canvas, options)
        source = context.createMediaElementSource($oscilloscope[0]) //MH TODO: sound gets cut here
    }

是设置分析仪的地方，[Oscilloscope] [1]是我正在使用的分析仪库。

这就是我加载和播放音频的地方：

loadAudio = function（）{ $ audio [0] .src =＆＃39; /录音/＆＃39; +播放列表[当前] .recordingSid $ audio [0] .addEventListener（＆＃39; canplaythrough＆＃39;，playAudio） $音频[0] .load（） }

playAudio = function（）{ scope.addSignal（源） $音频[0] .play（） }

我实际上让它工作了一段时间，但实际上它可能是Chrome中的一个错误，允许玩的东西，当chrome更新时停止工作。

如果我发表评论 source = context.createMediaElementSource($audio)

音频将播放（只是没有可视化），反之亦然。

我想知道示波器代码中是否存在由于某种原因导致音频流静音的问题，或者我需要做些什么才能将source或scope连接到音频节点。我在documentation

中看到了关于连接流的信息

我通过克隆音频节点暂时解决了这个问题，因此我有一个节点用于实际音频，一个节点用于示波器，但它感觉很草率。

欣赏任何想法或指示。

首先想到这是一个CORS问题BTW，但我解决了这个问题，所以我的服务器充当twilio录音的本地代理。

Answer 1

啊，只是需要

source.connect(context.destination)

后

scope.addSignal(source, options.color)

Answer 2

您只需将此属性添加到音频标签内：crossorigin =“ anonymous”

Answer 3

您要做的是在音频标签上设置属性crossorigin =“ anonymous”，然后标签将类似于：

<audio crossorigin="anonymous"></audio>

附加mediaElementSource时，Web音频会变为静音

3 个答案: