安装和导入 npm 包时出现问题 'extendable-media-recorder'

Question

正如我在下面的评论中所说，我尝试使用包 'extendable-media-recorder' 和 'extendable-media-recorder-wav-encoder' 编写一个 Web 应用程序，以便能够对以 wav 格式录制的声音进行编码。

下面是应用程序 Javascript 代码的最终版本，经过一些修改。非常感谢 Chris Guttandin 提供的图书馆和帮助！

import { MediaRecorder, register } from 'extendable-media-recorder';
import { connect } from 'extendable-media-recorder-wav-encoder';

const record = document.getElementById('record');
const stop = document.getElementById('stop');  
const soundClips = document.querySelector('.sound-clips');

(async () => {
    const port = await connect();
    await register(port);

 if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    console.log('getUserMedia supported.');
     
    navigator.mediaDevices.getUserMedia({ audio: true })

    // Success callback
    .then(function(stream) {
    const mediaRecorder = new MediaRecorder(stream, {
        mimeType: 'audio/wav'
    });

    record.onclick = function() {      
        var AudioContext = window.AudioContext || window.webkitAudioContext;
        const audioContext = new AudioContext();
  
        mediaRecorder.start();
          console.log(mediaRecorder.state);
          console.log("recorder started");
          record.style.background = "red";
          record.style.color = "black";
        }

      let chunks = [];

    mediaRecorder.ondataavailable = function(e) {
      chunks.push(e.data);
    }
    
      stop.onclick = function() {
        mediaRecorder.stop();
        console.log(mediaRecorder.state);
        console.log("recorder stopped");
        record.style.background = "#5bc0de";
        record.style.color = "white";
      }
    
      mediaRecorder.onstop = function(e) {
        console.log("recorder stopped");
      
        const clipName = prompt('Enter a name for your sound clip');
        const clipContainer = document.createElement('article');
        const clipLabel = document.createElement('p');
        const audio = document.createElement('audio');
        const deleteButton = document.createElement('button');
      
        clipContainer.classList.add('clip');
      
        audio.setAttribute('controls', '');
        deleteButton.innerHTML = "Delete";
        clipLabel.innerHTML = clipName;
      
        clipContainer.appendChild(audio);
        clipContainer.appendChild(clipLabel);
        clipContainer.appendChild(deleteButton);
        soundClips.appendChild(clipContainer);
      
        const blob = new Blob(chunks, { type: chunks[0].type });
        chunks = [];
        const audioURL = window.URL.createObjectURL(blob);
        audio.src = audioURL;
      
        deleteButton.onclick = function(e) {
        let evtTgt = e.target;
        evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
        }
      }
    }) 

    // Error callback
    .catch(function(err) {
    console.log('The following getUserMedia error occurred: ' + err);
    }
    );

    } else {
    console.log('getUserMedia not supported on your browser!');
    } 
})();

Answer 1

您可以使用像 webpack 这样的捆绑器，它会在您的 JavaScript 代码被浏览器加载之前捆绑它。打包器的工作是找到您磁盘上的所有外部包（在 node_modules 目录中查找它们），将它们打包成一个文件（有时是多个文件），然后浏览器可以加载该文件。

或者您可以使用像 JSPM 这样的服务，它允许您直接从网络加载外部包。

import { MediaRecorder, register } from 'https://jspm.dev/extendable-media-recorder';
import { connect } from 'https://jspm.dev/extendable-media-recorder-wav-encoder';

虽然 JSPM 非常适合构建快速原型，但我建议在长期运行.

中使用类似 webpack 的东西

安装和导入 npm 包时出现问题 'extendable-media-recorder'

Problems installing and importing npm package 'extendable-media-recorder'

javascript

npm-install

wav

web-audio-api

npm-scripts