No sound in safari using Web Audio API webkitAudioContext()

Question

I am trying to use the Web Audio API to play sound in my React application.

It's currently playing sound in all browsers except Safari v12.1.

I am aware Safari has restrictions on autoplay and requires user interaction to play sound, so I have a play button which calls the _play() function:

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

It's calling the _getData() function which looks like this:

_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 is created in the component constructor using:

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

The console.log(this.audioContext) inside the request.onload outputs this before pressing play:

consolelog

...and this after pressing play:

consolelog2

But no sound is playing (in Safari).

What am I doing wrong?

score 0 · Answer 1 · answered Apr 28 '19 at 19:20

I think the problem that you ran into is that Safari does not allow you to modify the buffer anymore once you called start().

The following page does for example play a second of noise in Safari when you press the play button.

<!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>

But it doesn't work anymore if you modify it slightly. When starting the audioBufferSourceNode before assigning the buffer there will be no output anymore.

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

audioBufferSourceNode.buffer = audioBuffer;

I guess you can get your code working by waiting for the HTTP response and the audio decoding before you start the source. Make sure to execute this.source.buffer = buffer before you execute this.source.start(index).

I hope this helps.

No sound in safari using Web Audio API webkitAudioContext()

1 Answers1