网络音频在某些设备上不起作用（Panner 音频）答案

【问题标题】：Web Audio does not work on some devices (Panner Audio)网络音频在某些设备上不起作用（Panner 音频）
【发布时间】：2021-01-19 02:21:12
【问题描述】：

我正在尝试将我的所有页面声音添加到网络音频平移器，以便声音从左向右移动。为此，我创建了此功能以将它们全部添加到 pannner，但它似乎仅适用于某些设备，而在其他设备上，即使它在选项卡中显示扬声器图标（正在播放音频），也没有声音来自音频。

let panNode;    var source=new Array(60);
const myAudio = document.querySelectorAll('audio');
const panControl = document.querySelector('.panning-control');
 var AudioContext = window.AudioContext || window.webkitAudioContext;   
const audioCtx = new AudioContext();
  panNode = audioCtx.createStereoPanner();


for(let i = 0; i<myAudio.length; i++){
  source[i] = audioCtx.createMediaElementSource(myAudio[i]);
   
  source[i].connect(panNode);
  panNode.connect(audioCtx.destination);
}

忽略我如何设法移动音频，因为我创建了一个单独的函数来每秒自动增加或减少 pannode 值。我需要帮助将所有声音添加到与所有设备兼容的 pannode。

【问题讨论】：

标签： audio web-audio-api

【解决方案1】：

很遗憾，createStereoPanner() 在 Safari 中不可用。不过，它可能会成为下一个版本的一部分。如果您打开“现代 WebAudio API”，它已经可用。

现在您需要使用 polyfill。 standardized-audio-context 例如有一个在 Safari 中工作的 StereoPannerNode 的实现。还有 stereo-panner-node 包，它是一个独立的 polyfill。但这不再维护了。

这是一个使用标准化音频上下文的小例子：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        <audio crossOrigin="anonymous" src="https://mp3l.jamendo.com/?trackid=1630628&format=mp31&from=app-devsite"></audio>
        <button id="play">play</button>
        <button disabled id="stop">stop</button>
        <input id="left" type="radio" name="panning" value="left"><label for="left">left</label>
        <input id="center" type="radio" name="panning" value="center" checked><label for="center">center</label>
        <input id="right" type="radio" name="panning" value="right"><label for="right">right</label>
        <script type="module">
            import { AudioContext } from 'https://jspm.dev/standardized-audio-context';

            const audioContext = new AudioContext();
            const stereoPanner = audioContext.createStereoPanner();

            const audioElement = document.querySelector('audio');
            const playButton = document.getElementById('play');
            const stopButton = document.getElementById('stop');
            const leftInput = document.getElementById('left');
            const centerInput = document.getElementById('center');
            const rightInput = document.getElementById('right');

            const mediaElementAudioSourceNode = audioContext.createMediaElementSource(audioElement);

            mediaElementAudioSourceNode
                .connect(stereoPanner)
                .connect(audioContext.destination);

            playButton.addEventListener('click', () => {
                stereoPanner.pan.value = leftInput.checked
                    ? -1
                    : centerInput.checked
                        ? 0
                        : 1;

                audioContext.resume();
                audioElement.play();

                playButton.disabled = true;
                stopButton.disabled = false;

                leftInput.disabled = true;
                centerInput.disabled = true;
                rightInput.disabled = true;
            });

            stopButton.addEventListener('click', () => {
                audioElement.pause();
                audioElement.currentTime = 0;

                playButton.disabled = false;
                stopButton.disabled = true;

                leftInput.disabled = false;
                centerInput.disabled = false;
                rightInput.disabled = false;
            });
        </script>
    </body>
</html>

【讨论】：

我知道立体声声像在 safari 上不可用，但它也不适用于移动 chrome 浏览器。顺便说一句，我通过在函数中将声音添加到 panner 的整个代码解决了这个错误，并在网页完全加载时调用该函数。虽然我不能直接做同样的事情，但这有点奇怪。任何猜测为什么会这样？？？？另外，您认为 createstereopanner 何时可以在 safari 上使用，因为仅为 safari 创建一个完整的其他功能很麻烦。开发商通知了吗？？
如果您所指的移动 Chrome 浏览器在 iOS 上运行，那么它就不是“真正的”Chrome 浏览器。至少它不使用 Chromium。 Apple 强制任何浏览器使用 Webkit，这意味着在 iOS 上，任何浏览器或多或少都是具有不同皮肤的 Safari，并且不会有 StereoPannerNode。我不知道下一个版本的 Safari 什么时候发布，以及它是否会有 StereoPannerNode。苹果没有对此发表任何公开评论。
不，我说的是 android 上的 chrome 浏览器。此外，如果您可以解释或提供一些代码演示，说明如何将我上面的 panner 音频功能转换为使用您所说的 standardized-audio-context 在苹果上工作。我对此一无所知，从您提供的链接中我无法理解太多。
这很奇怪，Android 上的 Chrome 没有 StereoPanner。这可能是另一个错误吗？我添加了一个使用标准化音频上下文的示例。我希望这会有所帮助。
它应该适用于所有标准音频上下文支持的浏览器。目前是 Chrome v81+、Edge v81+、Firefox v70+、Opera v68+ 和 Safari v12.1+。很难知道这是否真的是您的代码无法在 Android 上运行的原因，但也许它运行得太快了，document.querySelector 没有返回任何结果，因为尚未构建 DOM。在这种情况下，它现在在运行代码以响应页面加载时可以正常工作。