如何使用javascript在浏览器（safari）中询问音频自动播放权限答案

【问题标题】：How to ask Audio Autoplay permission in the browser(safari) with javascript如何使用javascript在浏览器（safari）中询问音频自动播放权限
【发布时间】：2020-02-27 06:46:26
【问题描述】：

我在 Safari(MAC) 中收到此错误，

我正在实施一项功能，当买家向卖家发送请求时触发音频警报。我可以播放静音音频，但在播放静音时显示错误。我想问一下，我们有什么方法可以要求用户允许音频播放许可，就像我们使用 JavaScript 要求地理定位或摄像头/麦克风访问许可一样。任何帮助，将不胜感激。

这是我的代码：

window.MutedAudioPlayed = false;
        window.MyAudio = new Audio("https://XXXX.com/input_sound.mp3");
        window.MyAudio.preload = 'auto';
        window.MyAudio.muted = true;
        window.MyAudio.play().then(function (event) {
            window.MutedAudioPlayed = true;
            console.log('Audio MutedAudioPlayed: ', window.MutedAudioPlayed);
        }).catch(function (error) {
            window.MutedAudioPlayed = false;
            console.log('Audio Play Error: ', error.message);
        });

        window.MyAudio.muted = false; 
        window.MyAudio.play().then(function (event) {
            console.log("Audio Play: ", event);
        }).catch(function (error) {
            console.log('Audio Play Error: ', error.message);
        });

【问题讨论】：

标签： javascript jquery audio safari autoplay

【解决方案1】：

根据我们目前的推测，您可以执行以下操作：

向用户请求audio 的权限（通常代表麦克风，但也适用于声音）
加载您的声音文件并使用AudioBuffer 播放它，请参见下面的示例。

const audioContext = new (window.AudioContext || window.webkitAudioContext)();

navigator.mediaDevices
    .getUserMedia({ audio: true })
    .then(() => {
        const source = audioContext.createBufferSource();
        source.addEventListener('ended', () => {
            source.stop();
            audioContext.close();
        });

        const request = new XMLHttpRequest();

        request.open('GET', '/path-to-sound.mp3', true);
        request.responseType = 'arraybuffer';
        request.onload = () => {
            audioContext.decodeAudioData(
                request.response,
                (buffer) => {
                    source.buffer = buffer;
                    source.connect(audioContext.destination);
                    source.start();
                },
                (e) => {
                    console.log('Error with decoding audio data' + e.message);
                });
        }

        request.send();
    })
    .catch(reason => console.error(`Audio permissions denied: ${reason}`));

不过，这种方法有几个缺点：

您无法在后台播放声音
如果您这样做，声音将在 Safari 中排队并在选项卡/窗口再次处于活动状态时播放

【讨论】：