【问题标题】:WebRTC Play Audio Input as MicrophoneWebRTC 将音频输入作为麦克风播放
【发布时间】:2014-10-21 08:03:48
【问题描述】:

我想将我的音频文件作为麦克风输入(不发送我的现场声音,但我的音频文件)播放给连接到 WebRTC 的用户。谁能告诉我怎么做?

我在 JS 代码中做了以下尝试,比如:

1. base64 音频

<script>
var base64string = "T2dnUwACAAAAAAA..";
var snd = new Audio("data:audio/wav;base64," + base64string);
snd.play();
var Sound = (function () {
var df = document.createDocumentFragment();
return function Sound(src) {
    var snd = new Audio(src);
    df.appendChild(snd); 
    snd.addEventListener('ended', function () {df.removeChild(snd);});
    snd.play();
    return snd;
}
}());

var snd = Sound("data:audio/wav;base64," + base64string);
</script>

2. 音频缓冲区

window.AudioContext = window.AudioContext || window.webkitAudioContext;

var audioContext = new AudioContext();
var isPlaying = false;
var sourceNode = null;
var theBuffer = null;

window.onload = function() {
var request = new XMLHttpRequest();
request.open("GET", "sounds/DEMO_positive_resp.wav", true);
request.responseType = "arraybuffer";
request.onload = function() {
  audioContext.decodeAudioData( request.response, function(buffer) { 
        theBuffer = buffer;
    } );
}
request.send();
}

function togglePlayback() {
        var now = audioContext.currentTime;

        if (isPlaying) {
            //stop playing and return
            sourceNode.stop( now );
            sourceNode = null;
            analyser = null;
            isPlaying = false;
            if (!window.cancelAnimationFrame)
                window.cancelAnimationFrame = window.webkitCancelAnimationFrame;
            //window.cancelAnimationFrame( rafID );
            return "start";
        }

        sourceNode = audioContext.createBufferSource();
        sourceNode.buffer = theBuffer;
        sourceNode.loop = true;

        analyser = audioContext.createAnalyser();
        analyser.fftSize = 2048;
        sourceNode.connect( analyser );
        analyser.connect( audioContext.destination );
        sourceNode.start( now );
        isPlaying = true;
        isLiveInput = true;
        return "stop";
    }

请在这种情况下帮助我。这将是非常可观的。

【问题讨论】:

    标签: input audio-streaming webrtc microphone


    【解决方案1】:

    这是一个可以帮助您使用 chrome 流式传输 mp3 或 wav 的演示:

    这是,它是如何写的:

    以及演示的源代码:

    在第 3 方 WebRTC 应用程序中使用

    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    
    var context = new AudioContext();
    var gainNode = context.createGain();
    gainNode.connect(context.destination);
    
    // don't play for self
    gainNode.gain.value = 0;
    
    document.querySelector('input[type=file]').onchange = function() {
        this.disabled = true;
    
        var reader = new FileReader();
        reader.onload = (function(e) {
            // Import callback function that provides PCM audio data decoded as an audio buffer
            context.decodeAudioData(e.target.result, function(buffer) {
                // Create the sound source
                var soundSource = context.createBufferSource();
    
                soundSource.buffer = buffer;
                soundSource.start(0, 0 / 1000);
                soundSource.connect(gainNode);
    
                var destination = context.createMediaStreamDestination();
                soundSource.connect(destination);
    
                createPeerConnection(destination.stream);
            });
        });
    
        reader.readAsArrayBuffer(this.files[0]);
    };
    
    function createPeerConnection(mp3Stream) {
        // you need to place 3rd party WebRTC code here
    }
    

    更新时间:2014 年 8 月 28 日星期四下午 5:55

    这是从服务器获取 mp3 的方法:

    function HTTP_GET(url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'arraybuffer';
        xhr.send();
    
        xhr.onload = function(e) {
            if (xhr.status != 200) {
                alert("Unexpected status code " + xhr.status + " for " + url);
                return false;
            }
    
            callback(xhr.response); // return array-buffer
        };
    }
    
    // invoke above "HTTP_GET" method
    // to load mp3 as array-buffer
    
    HTTP_GET('http://domain.com/file.mp3', function(array_buffer) {
    
        // Import callback function that provides PCM audio data decoded as an audio buffer
        context.decodeAudioData(array_buffer, function(buffer) {
            // Create the sound source
            var soundSource = context.createBufferSource();
    
            soundSource.buffer = buffer;
            soundSource.start(0, 0 / 1000);
            soundSource.connect(gainNode);
    
            var destination = context.createMediaStreamDestination();
            soundSource.connect(destination);
    
            createPeerConnection(destination.stream);
        });
    });
    

    【讨论】:

    • 亲爱的 Muaz,我已经用RTCMultiConnection 测试了我的音频文件,它工作得非常酷,但只能通过应该从我的计算机中选择的文件传递输入。我想传递我的服务器文件。为此,我尝试在&lt;input type=file&gt; 中选择一些预定义的文件,但它似乎不可能发生。除了 FileReader 对象还有什么方法可以读取缓冲区吗?
    • 感谢百万兄弟 :) 万岁
    • 好的,这里是另一个使用 Twilio (3rd Party) API 的问题。我正在输入您发送给我的相同代码不起作用。我想我错过了一些东西。我需要同时连接 RTCMultiConnection 和 Twilio.Device 吗?请指导我。谢谢!
    • RTCMultiConnection 是一个简单的包装器,因此您不需要使用它。我不知道 Twilio API 的样子,但是上面的 sn-ps 应该可以在任何允许您在创建对等连接之前传递“自定义流”的应用程序/API 中工作。
    • 不用担心,我已将 RTCMultiConnection 与 Twilio 集成。但还有另一个问题,即声音质量非常糟糕。没有 Twilio,音质很好。我不知道为什么会这样。声音文件是否有任何功能或一些必要条件,比如比特率大于 256 KBPS?谢谢!
    猜你喜欢
    • 2014-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-01-10
    • 2018-06-18
    • 2018-02-14
    • 2011-04-29
    • 2019-09-25
    • 2022-01-05
    相关资源
    最近更新 更多