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.

Answer 1

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.