时间戳

首页 > 解决方案 > 安装和导入 npm 包 'extendable-media-recorder' 时出现问题

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

问题描述

正如我在下面的评论中所说，我尝试使用包'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!');
    } 
})();

标签： javascriptnpm-installwavweb-audio-apinpm-scripts

解决方案

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

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

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

虽然 JSPM 非常适合构建快速原型，但从长远来看，我建议使用 webpack 之类的东西。

推荐阅读