Question

遇到了我不清楚的情况。

我要的是：播放音频，音频播放完毕后，开始录制麦克风。

问题：在FF和Chrome中，代码工作正常。但是，在Safari上，当音频停止播放并且麦克风录制功能开始时，音频将在同一时间再次播放。

开始和结束挂钩是使用jQuery完成的。这是结束的绑定。

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

start_microphone_recording函数调用一个函数，该函数先更改图标，然后调用init_recording，仅此而已，所以我没有包括该函数。

启动麦克风功能：

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 );
}

在Safari中激活麦克风后，将执行“播放”绑定功能。我试过了pause（）并使其静音了，但是不起作用。还尝试删除音频标签并清除音频标签中的src。

任何人都知道Safari为什么要这样做以及可能的解决方案是什么？

示例：我在html的AUDIO标签中设置了5个MP3音频，我一个接一个地播放，我运行了“ init_recording”功能，而Safari在麦克风开始录制时，Safari将同时播放所有5个MP3音频。

Answer 1

事实证明，使用Safari的解决方案是不设置src属性。

如果有一个或多个audio内联标记，请从src标记中删除audio属性，例如，将数据属性设置为data-src。然后，当点击播放时，使用JS将URL添加到音频标签的src。

播放功能：

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

或通过JS插入整个audio标签。

Answer 2

如果在Safari上遇到相同的问题，那么删除并添加src标签并不是一个很好的解决方案，在我看来，这并不是问题。我的音频标签甚至没有在dom中呈现，但Safari仍在录音时播放它。

在我的情况下，删除autoplay属性并手动播放挂载的音频（我使用React）可以达到目的

mediaDevices.getUserMedia，音频播放完毕后开始麦克风录制，Safari问题

2 个答案: