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

Question

As I said in the comment below, I tried to write a web application using the packages 'extendable-media-recorder' and 'extendable-media-recorder-wav-encoder', to be able to encode the sound recorded in the wav format.

Here follows the final version of the Javascript code of the application, after some modifications. Thanks a lot to Chris Guttandin for the libraries and for the help!

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

You can either use a bundler like webpack which would bundle your JavaScript code before it gets loaded by the browser. A bundler's job is to locate all the external packages on your disk (looking them up in the node_modules directory) to bundle them into one file (or sometimes more files) which can then be loaded by the browser.

Or you could use a service like JSPM which allows you to load external packages directly from the web.

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

While JSPM is nice for building quick prototypes I would recommend using something like webpack in the long run.