Нет звука в сафари с использованием Web Audio API webkitAudioContext () - PullRequest
Новая
       90

Нет звука в сафари с использованием Web Audio API webkitAudioContext ()

0 голосов
/ 28 апреля 2019

Я пытаюсь использовать Web Audio API для воспроизведения звука в моем приложении React.

В настоящее время он воспроизводит звук во всех браузерах, кроме Safari v12.1.

Я знаю, что Safari имеет ограничения на автозапуск и требует взаимодействия с пользователем для воспроизведения звука, поэтому у меня есть кнопка воспроизведения, которая вызывает_play() функция: 

_play = (url, index) => {
    this._getData(url);
    this.source.start(index)
}

Вызывает функцию _getData(), которая выглядит следующим образом: 

_getData(url) {
    this.source = this.audioContext.createBufferSource();
    var request = new XMLHttpRequest();

    request.open('GET', url, true);

    request.responseType = 'arraybuffer';


    request.onload = () => {
        var audioData = request.response;
        console.log(this.audioContext)
        this.audioContext.decodeAudioData(audioData, buffer => {
        this.source.buffer = buffer;
        this.source.connect(this.audioContext.destination);
    },

        function(e){ console.log("Error with decoding audio data" + e.err); });

    }

    request.send();
}

this.audioContext создается в компоненте constructor с использованием: 

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

console.log(this.audioContext) внутри request.onload выводит это до нажатия play:

consolelog

... и это после нажатия play:

consolelog2

Но звук не воспроизводится (в Safari).

Что я делаю не так?

1 Ответ

0 голосов
/ 28 апреля 2019

Я думаю, что проблема, с которой вы столкнулись, заключается в том, что Safari больше не позволяет вам изменять буфер после вызова start ().

На следующей странице, например, воспроизводится секунда шума в Safari при нажатии кнопки воспроизведения. 

<!DOCTYPE html>
<html>
    <body>
        <button id="play-button">play</button>
        <script>

document
    .getElementById('play-button')
    .addEventListener('click', () => {
        const audioContext = new AudioContext();
        const audioBufferSourceNode = audioContext.createBufferSource();
        const sampleRate = audioContext.sampleRate;
        const audioBuffer = audioContext.createBuffer(1, sampleRate, sampleRate);
        const channelData = audioBuffer.getChannelData(0);

        for (let i = 0; i < sampleRate; i += 1) {
            channelData[i] = (Math.random() * 2) - 1;
        }

        audioBufferSourceNode.buffer = audioBuffer;

        audioBufferSourceNode.connect(audioContext.destination);
        audioBufferSourceNode.start(audioContext.currentTime);
    });

        </script>
    </body>
</html>

Но это больше не работает, если вы немного измените его. При запуске audioBufferSourceNode перед назначением буфера выходных данных больше не будет. 

audioBufferSourceNode.connect(audioContext.destination); 
audioBufferSourceNode.start(audioContext.currentTime);

audioBufferSourceNode.buffer = audioBuffer;

Полагаю, вы можете заставить свой код работать, ожидая ответа HTTP и декодирования звука, прежде чем запускать исходный код. Обязательно выполните this.source.buffer = buffer перед выполнением this.source.start(index).

Надеюсь, это поможет.

...