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

【问题标题】：mediaDevices.getUserMedia, start microphone recording after audio has finished playing, Safari problemmediaDevices.getUserMedia，音频播放完毕后开始麦克风录音，Safari问题
【发布时间】：2018-09-04 11:39:24
【问题描述】：

有一个我不清楚的情况。

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

问题：在 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 中激活 mic 时，会执行“播放”绑定功能。我试过使用 pause() 并静音但不起作用。还尝试删除音频标签并从音频标签中清除 src。

任何人对 Safari 为何这样做以及可能的解决方案有什么想法？

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

【问题讨论】：

$( 'audio' ).bind( 'ended', on_audio_stop ); var on_audio_stop = function() { start_microphone_recording(); } 你确定是这个顺序吗？当你在bind 中使用它时，on_audio_stop 还没有被声明。
这是从文件中复制/粘贴的错误。它在 Chrome 和 FF 以及 Safari 上都可以正常工作，但 Safari 也会播放音频。
例如，我在html的AUDIO标签中设置了5个MP3音频，我一个一个播放，我运行“init_recording”函数，Safari会播放所有5个MP3音频，而mic有开始录制。

标签： javascript audio safari getusermedia mediadevices

【解决方案1】：

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

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

关于播放功能：

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

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

【讨论】：

【解决方案2】：

在 Safari 上遇到同样的问题，删除和添加 src 标签不是一个很好的解决方案，在我的情况下也不是问题。我的音频标签甚至没有在 dom 中呈现，但 Safari 仍在录制时播放它。

在我的情况下，删除 autoplay 属性并在安装时手动播放音频（我使用 React）就可以了

【讨论】：