0

我正在尝试使用 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 = '/recordings/' + playlist[current].recordingSid $audio[0].addEventListener('canplaythrough', playAudio) $audio[0].load() }

playAudio = function () { scope.addSignal(source) $audio[0].play() }

我实际上让它工作了一段时间,但它实际上可能是 chrome 中的一个错误,它允许播放,当 chrome 更新时停止工作。

如果我注释掉 source = context.createMediaElementSource($audio)

音频将播放(只是没有可视化),反之亦然。

我想知道示波器代码中是否有某些东西会由于某种原因使音频流静音,或者我需要做些什么来连接source或连接scope到音频节点。我在文档中看到了一些关于连接流的内容

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

欣赏任何想法或指示。

起初认为这是一个 CORS 问题,但我解决了这个问题,所以我的服务器充当了 twilio 录音的本地代理。

4

3 回答 3

0

您只需在音频标签内添加此属性:crossorigin="anonymous"

于 2020-12-01T09:56:56.620 回答
0

啊,刚需

source.connect(context.destination)

scope.addSignal(source, options.color)

于 2017-06-16T21:14:00.197 回答
0

您需要做的是在音频标签上设置属性 crossorigin="anonymous" 然后标签将如下所示:

<audio crossorigin="anonymous"></audio>
于 2020-12-10T14:51:17.190 回答