附加 mediaElementSource 时网络音频静音答案

【问题标题】：web audio gets muted when attaching a mediaElementSource附加 mediaElementSource 时网络音频静音
【发布时间】：2017-11-19 16:28:24
【问题描述】：

我正在尝试使用 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 = 函数 () { $audio[0].src = '/recordings/' + 播放列表[当前].recordingSid $audio[0].addEventListener('canplaythrough', playAudio) $audio[0].load() }

playAudio = 函数 () { scope.addSignal（来源） $audio[0].play() }

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

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

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

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

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

欣赏任何想法或指示。

起初认为这是一个 CORS 问题顺便说一句，但我解决了这个问题，因此我的服务器充当了 twilio 录音的本地代理。

【问题讨论】：

标签： javascript audio html5-audio web-audio-api audiocontext

【解决方案1】：

啊，刚需

source.connect(context.destination)

之后

scope.addSignal(source, options.color)

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

你需要做的是在音频标签上设置属性 crossorigin="anonymous" 然后标签会像：

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

【讨论】：