Web 音频在某些设备上不起作用（Panner 音频）

Question

我正在尝试将所有页面声音添加到网络音频声像器中，以便声音从左向右移动。为此，我创建了这个功能来将它们全部添加到 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。

Answer 1

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

现在您需要使用 polyfill。 standardized-audio-context for example has an implementation of the StereoPannerNode which works in Safari. There is also the 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>

Web 音频在某些设备上不起作用（Panner 音频）

Web Audio does not work on some devices (Panner Audio)

audio

web-audio-api