WebAudioAPI AnalyserNode 不适用于带有 MediaElementAudioSourceNode 的移动设备

Question

赏金将在 2 天内到期。 此问题的答案有资格获得+200声望赏金。 Drakalex希望引起对这个问题的更多关注。

我正在尝试使用 Web 音频 API 在 html/javascript 中制作音频可视化工具，我希望它也可以在手机上使用。

我有我的音频作为本地文件。 现在我找到了两种导入它的方法，使用new Audio(src)或异步使用XMLHttpRequest 。 第一种方法为我提供了一个HTMLMediaElement ，它更易于使用且加载速度更快。 由于我希望可视化器由用户控制，因此我需要能够快速更改音频源或当前搜索 position。 第二个提供了一个需要解码的缓冲区，不太适合我想要的。

在桌面上一切正常，但由于某种原因，我无法使用第一种方法使分析仪在移动设备上工作。 它可以在没有分析仪的情况下工作，也可以使用XMLHttpRequest 。

这是我的代码设置（我使用本地服务器来防止 CORS 问题）：

let audioURL = './audio.mp3'
let audioCtx, source, analyser

// Init the audio context after the first valid user interaction
window.addEventListener('click', initAudioContext) // Desktop support
window.addEventListener('touchend', initAudioContext) // Mobile support

function initAudioContext() {
    // Create the audio context
    audioCtx = new (window.AudioContext || window.webkitAudioContext)()
    audioCtx.resume()  // Needed for mobile/iOS support

    // Create an AnalyserNode
    analyser = audioCtx.createAnalyser()

    // Create the source node element (this part has an issue)
    connectSource()

    // Remove the listeners as the audio context must be setup only once
    window.removeEventListener('click', initAudioContext)
    window.removeEventListener('touchend', initAudioContext)
}

现在这里有 3 个connectSource实现，它们给了我各种结果：

第一个实现是使用最基本的方法，完全跳过分析器。 此代码适用于移动设备和桌面设备，并且在第一次单击/触摸后播放音频，但由于没有分析器，我没有得到音频数据。

function connectSourceWithoutAnalyser() {
    // Create an audio HTMLMediaElement and play it
    const audio = new Audio(audioURL)
    audio.play()
}

第二种实现是我的目标，我仍在使用Audio元素，但是我创建了一个源节点以与分析器一起使用。 此实现适用于桌面，但不适用于移动设备（Safari 或 Chrome for iOS 上根本没有音频）。

function connectMediaElementSource() {
    // Create an audio HTMLMediaElement
    const audio = new Audio(audioURL)

    // Use it to create a MediaElementAudioSourceNode
    source = audioCtx.createMediaElementSource(audio)

    // Connect the source to the analyser, then the analyser to the audio context's destination
    source.connect(analyser)
    analyser.connect(audioCtx.destination)

    audio.play() // Play the audio
}

请注意，即使我删除了分析器并通过替换source.connect(analyser); analyser.connect(audioCtx.destination)将这个新源直接连接到目标。 source.connect(analyser); analyser.connect(audioCtx.destination)和source.connect(audioCtx.destination) ，它不适用于移动设备，因此问题可能与createMediaElementSource()相关，而不是与 AnalyserNode 相关。

最后第三个实现是使用XMLHttpRequest 。 这个适用于移动和桌面，但正如我之前所说，我失去了对 HTMLMediaElement 的引用，这根本不是我想要的：

function connectBufferSource() {
    // Setup an XML Request
    const request = new XMLHttpRequest()
    request.open('GET', audioURL, true)
    request.responseType = 'arraybuffer'

    request.onload = function() {
        // Decode the response using the audio context
        audioCtx.decodeAudioData(request.response, function(buffer) {
            // Create an AudioBufferSourceNode
            source = audioCtx.createBufferSource()
            source.buffer = buffer // copy the buffer
            
            // Connect the source to the analyser, then the analyser to the audio context's destination
            source.connect(analyser)
            analyser.connect(audioCtx.destination)

            // Since there's no media element, we can't use play() and must use source.start()
            source.start()
        })
    }

    // Send the XML request
    request.send()
}

有没有办法让使用AnalyserNode和HTMLMediaElement的第二个实现同时适用于移动设备和桌面？

Answer 1

我尚未在移动设备上对此进行测试，但这是另一种使用createMediaStreamSource而不是createMediaElementSource的方法。 它会起作用吗？

 let audioURL = './deskbell (mp3cut.net).wav'; let audioCtx, source, analyser var canvas = document.querySelector(".canvas"); var ctx = canvas.getContext("2d"); // Init the audio context after the first valid user interaction window.addEventListener('click', initAudioContext) // Desktop support window.addEventListener('touchend', initAudioContext) // Mobile support function initAudioContext() { // Create the audio context audioCtx = new(window.AudioContext || window.webkitAudioContext)() audioCtx.resume() // Needed for mobile/iOS support // <---- is it? // Create an AnalyserNode analyser = audioCtx.createAnalyser() // Create the source node element (this part has an issue) connectSource() // Remove the listeners as the audio context must be setup only once window.removeEventListener('click', initAudioContext) window.removeEventListener('touchend', initAudioContext) } function createMediaStreamSource() { const audio = new Audio(audioURL) const stream = audio.captureStream(); audio.play().then(_ => { source = audioCtx.createMediaStreamSource(stream) source.connect(analyser) visualize(analyser) }); } function connectSource() { // connectSourceWithoutAnalyser(); // connectMediaElementSource(); createMediaStreamSource() } function visualize(analyser) { ctx.clearRect(0, 0, canvas.width, canvas.height); var midpointY = canvas.height * 0.5; var pixelSize_y; var pixelSize_x = canvas.width / analyser.frequencyBinCount; pixelSize_y = canvas.height * 0.5; var data = new Float32Array(analyser.frequencyBinCount); var draw = function() { analyser.getFloatTimeDomainData(data); ctx.fillStyle = "white"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.lineWidth = 1; ctx.strokeStyle = "black"; ctx.beginPath(); var _g1 = 0; var _g = data.length; while (_g1 < _g) { var i = _g1++; ctx.lineTo(i * pixelSize_x, data[i] * pixelSize_y + midpointY); } ctx.stroke(); int_id = requestAnimationFrame(draw); }; draw(); };

 <h1> click for sound and visualization </h1> <canvas class="canvas"></canvas>