如何让我的峰值表从“myRecorder”而不是音频元素获取麦克风音量上下文？

问题描述

我正在尝试让我的峰值表从麦克风音量中获取上下文。已经在使用“yt-recorder.js”中的 getusermedia。我需要我的峰值计使用来自用户麦克风的相同 getusermedia。如果这是不可能的，如果你们告诉我，我会很高兴。谢谢大家！

这是 myrecorder 脚本：

jQuery(document).ready(function () {
            var $ = jQuery;
            var myRecorder = {
                objects: {
                    context: null,stream: null,recorder: null
                },init: function () {
                    if (null === myRecorder.objects.context) {
                        myRecorder.objects.context = new (
                                window.AudioContext || window.webkitaudiocontext
                                );
                    }
                },start: function () {
                    var options = {audio: true,video: false};
                    navigator.mediaDevices.getUserMedia(options).then(function (stream) {
                        myRecorder.objects.stream = stream;
                        myRecorder.objects.recorder = new Recorder(
                                myRecorder.objects.context.createmediastreamsource(stream),{numChannels: 1}
                        );
                        myRecorder.objects.recorder.record();
                    }).catch(function (err) {});
                },stop: function (listObject) {
                    if (null !== myRecorder.objects.stream) {
                        myRecorder.objects.stream.getAudioTracks()[0].stop();
                    }
                    if (null !== myRecorder.objects.recorder) {
                        myRecorder.objects.recorder.stop();
                        
                        // Validate object
                        if (null !== listObject
                                && 'object' === typeof listObject
                                && listObject.length > 0) {
                            // Export the WAV file
                            myRecorder.objects.recorder.exportWAV(function (blob) {
                                var url = (window.URL || window.webkitURL)
                                        .createObjectURL(blob);

                                // Prepare the playback
                                var audioObject = $('<audio controls></audio>')
                                        .attr('src',url);

                                // Prepare the download link
                                var downloadobject = $('<a>&#9660;</a>')
                                        .attr('href',url)
                                        .attr('download',new Date().toUTCString() + '.wav');
                                        

                                // Wrap everything in a row
                                var holderObject = $('<div class="row"></div>')
                                        .append(audioObject)
                                        .append(downloadobject);

                                // Append to the list
                                listObject.append(holderObject);
                            });
                        }
                    }
                }
            };

            // Prepare the recordings list
            var listObject = $('[data-role="recordings"]');

            // Prepare the record button
            $('[data-role="controls"] > button').click(function () {
                // Initialize the recorder
                myRecorder.init();

                // Get the button state 
                var buttonState = !!$(this).attr('data-recording');

                // Toggle
                if (!buttonState) {
                    $(this).attr('data-recording','true');
                    myRecorder.start();
                } else {
                    $(this).attr('data-recording','');
                    myRecorder.stop(listObject);
                }
            });
        });

$(document).ready(function () {
 $("#reloadrecorder").on("click",function () {
    location.reload();
 });
});

这是我的记录按钮 (#controls) 和峰值表 (#demo2-peak-meter)

的 html

<head>
    <link rel="stylesheet" href="https://roughstudio.co.il/wp-content/plugins/matt-diamond-recorder/roughrecorder.css">
</head>
<body>
        <div class="holder">
            <div data-role="controls">
                <button>recorder</button>
            </div>
                <div id="demo2-peak-meter" style="z-index:10;position:fixed;bottom:0;direction:ltr;width:100%; height: 5em;"></div>
        </div>
            <audio style="width:100%;" id="demo2-audio" preload="Metadata" controls="controls">
              <source src="https://roughstudio.co.il/wp-content/uploads/2020/06/שיר-עסקי-ברזילי-מרכז-רפואי-אקרדיטציה.mp3" type="audio/mpeg" />
            </audio>
</body>

这是我的峰值仪表脚本：

            function initDemo(meterId,audioId,options,ctx) {
              var meterElement = document.getElementById(meterId);
              var audioElement = document.getElementById(audioId);
              var sourceNode = ctx.createMediaElementSource(audioElement);
              sourceNode.connect(ctx.destination);
              var meterNode = webAudioPeakMeter.createMeterNode(sourceNode,ctx);
              webAudioPeakMeter.createMeter(meterElement,meterNode,options);
              audioElement.addEventListener('play',function () {
                ctx.resume();
              });
            }
            var audioCtx = new (window.AudioContext || window.webkitaudiocontext)();
            initDemo('demo2-peak-meter','demo2-audio',{ backgroundColor: '#000' },audioCtx);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

getusermedia javascript web-audio-api web-mediarecorder