input - WebRTC 作为麦克风播放音频输入

标签 input audio-streaming webrtc microphone

我想将我的音频文件作为麦克风输入播放(不发送我的实时语音,而是我的音频文件)给 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";
    }

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

最佳答案

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

  • https://www.webrtc-experiment.com/RTCMultiConnection/stream-mp3-live.html

  • 这是它的写法:
  • http://www.rtcmulticonnection.org/docs/getting-started/#stream-mp3-live

  • 和演示的源代码:
  • https://github.com/muaz-khan/RTCMultiConnection/blob/master/demos/stream-mp3-live.html
  • https://github.com/muaz-khan/WebRTC-Experiment/issues/222

  • 在第 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
    }
    

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

    以下是从服务器获取 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);
        });
    });
    

    关于input - WebRTC 作为麦克风播放音频输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25532200/

    相关文章:

    android - Vitamio Bug播放本地音频

    android - 更改 android ListView 中最近单击的列表项中存在的 imageview

    javascript - webrtc,是否可以将图像转换为媒体流?

    c - 检测输入中的空白

    javascript - 如何更改jsp <form :input/> via JavaScript with a barcode reader?的焦点

    JavaScript/jQuery – 在输入字段的末尾添加一个字符

    webrtc - 了解 WebRTC 中的 SFU、TURN 服务器

    c++ - 如何检查字符串是否在字符串列表中?

    java - 充当 UPnP MediaServer 并通过 UPnP MediaRender 播放流音频(麦克风)

    javascript - 如何将视频通话添加到 nativescript 应用程序