之前我在开发一款支持WAV格式音频录制的Web应用时，遇到了extendable-media-recorder包的安装与导入问题，经过一系列调整后终于完成了功能实现。下面是最终的完整JavaScript代码，同时特别感谢Chris Guttandin提供的extendable-media-recorder和extendable-media-recorder-wav-encoder库以及技术支持！

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!');
    }
})();

这段代码的核心逻辑包括：

• 连接并注册WAV编码器，确保录制的音频能以WAV格式编码
• 获取用户设备的音频媒体流，开启录音权限
• 绑定录制/停止按钮的交互事件，同步更新按钮状态与录制状态
• 收集录制过程中的音频数据块，停止录制后生成WAV格式的Blob文件
• 动态创建音频播放控件、标签和删除按钮，方便用户管理录制的音频片段

内容的提问来源于stack exchange，提问作者Matteoo