mediaDevices.getUserMedia, start microphone recording after audio has finished playing, Safari problem

Question

Got a situation that is unclear to me.

What I want is this: Play an audio and after audio has finished playing, start the microphone recording.

The problem: In FF and Chrome the code works just fine. On Safari however, when the audio has stopped playing and the microphone recording function starts, the audio is at the same time played again.

Start and end hooks are done with jQuery. Here is the ended bind.

var on_audio_stop = function() {
    start_microphone_recording();
}
$( 'audio' ).bind( 'ended', on_audio_stop );

start_microphone_recording function calls a function where the icon is changed and then the init_recording is called, nothing more so I've not included that one.

Start mic function:

function init_recording() {
    AudioContext = window.AudioContext || window.webkitAudioContext;

    context = new AudioContext();

    processor = context.createScriptProcessor( buffer_size, 1, 1 );

    processor.connect( context.destination );

    var handle_success = function ( stream ) {
        global_stream = stream;

        input = context.createMediaStreamSource( stream );

        input.connect( processor );

        processor.onaudioprocess = function ( e ) {
            microphone_process( e );
        };
    };

    navigator.mediaDevices.getUserMedia( constraints ).then( handle_success );
}

When mic is activated in Safari, the "play" bind function is executed. I've tried with pause() and muted but doesn't work. Also tried removing the audio tag and clearing src from the audio tag.

Anyone has any ideas as to why Safari is doing this and what the solution might be?

Example: I set up 5 MP3 audios in the AUDIO tag in html, I play one by one, the I run the "init_recording" functions and Safari will play all the 5 MP3 audios at the same time, over each other while mic has started to record.

`$( 'audio' ).bind( 'ended', on_audio_stop ); var on_audio_stop = function() { start_microphone_recording(); }` are you sure it is in this order? At the time you use it in `bind`, `on_audio_stop` has still not been declared. — Kaiido, Sep 05 '18 at 09:09
That is just wrong copy/paste from the files.. It works just fine on Chrome and FF and also Safari but Safari also plays the audio. — user3537395, Sep 05 '18 at 09:58
For example, I set up 5 MP3 audios in the AUDIO tag in html, I play one by one, the I run the "init_recording" functions and Safari will play all the 5 MP3 audios while mic has started to record. — user3537395, Sep 05 '18 at 10:00

score 0 · Accepted Answer · answered Sep 06 '18 at 08:27

As it turns out the solution with Safari is to not set the src attribute.

If you have one or more audio tags inline, remove src attribute from the audio tag and for example set the data attribute like data-src. Then with JS when the play is clicked, add the URL to the src of the audio tag.

On play function:

audio.pause();
audio.load(); // Load the audio URL that was added to the src tag.
audio.play();

Or insert the whole audio tag via JS.

score 0 · Answer 2 · answered Jan 09 '20 at 10:19

Was experiencing same issue on Safari, removing and adding src tag is not a great solution and it was not the problem in my case. my audio tag wasn't even rendered in dom but Safari was still playing it on recording.

In my case removing autoplay attribute and manually playing the audio on mount (I use React) did the trick

mediaDevices.getUserMedia, start microphone recording after audio has finished playing, Safari problem

2 Answers2