在 wavesurfer.js 中使用新录制的旧音频运行

问题描述

标题可能没有澄清我的问题，情况是我在 laravel 项目中使用 wavesurfer 库以波形显示录制的音频。我点击麦克风然后开始录音，然后在波形中显示捕获的音频

//// 这是我的前端

<div class="outputContainer col-md-9 mx-auto p-2" id="outputContainer">
          <div class="audioContainer" id="recordingsList">
            <!-- Create a div where the audio waves will be shown --> 
          </div>
          

          <!-- Create action buttons -->
          <div class="controlContainer">
            <button  id="btn-play" disabled="disabled"></button>
            <button  id="btn-pause" disabled="disabled"></button>
            <button  id="btn-stop" disabled="disabled"></button>
          </div>
        </div>

          
          <!-- Create response buttons -->
          <div id="buttonContainer">
            <button id="reRecordButton" onclick="reRecord()">Record again</button>
            <button id="recordSubmitButton" onclick="submitRecord()">Submit</button>
          </div>
</div>

///// 我成功录制了音频文件并从中获取了 blob，然后我使用了波形函数。 这是我的主要 js 组件

function getRecordedAudio(blob) {

    var url = URL.createObjectURL(blob);
    /////calling waveform function
    waveform(dataId,url);
}


function waveform(url) {
    // Store the 3 buttons in some object
    var buttons = {
        play: document.getElementById(`btn-play`),pause: document.getElementById(`btn-pause`),stop: document.getElementById(`btn-stop`)
    };
    // getting container for waveform
    recordingsList = document.getElementById(`recordingsList`);

    // Create an instance of wave surfer with its configuration
    var Spectrum = WaveSurfer.create({
        container: recordingsList,progressColor: "#4a74a5 ",waveColor: "#00bcd4",cursorColor: "#36E8C5",responsive: true,mediaControls: true,});

    // Handle Play button
    buttons.play.addEventListener(
        "click",function() {
            Spectrum.play();

            // Enable/disable respectively buttons
            buttons.stop.disabled = false;
            buttons.pause.disabled = false;
            buttons.play.disabled = true;
        },false
    );

    // Handle Pause button
    buttons.pause.addEventListener(
        "click",function() {
            Spectrum.pause();

            // Enable/disable respectively buttons
            buttons.pause.disabled = true;
            buttons.play.disabled = false;
        },false
    );

    // Handle Stop button
    buttons.stop.addEventListener(
        "click",function() {
            Spectrum.stop();

            // Enable/disable respectively buttons
            buttons.pause.disabled = true;
            buttons.play.disabled = false;
            buttons.stop.disabled = true;
        },false
    );

    // Add a listener to enable the play button once it's ready
    Spectrum.on("ready",function() {
        buttons.play.disabled = false;
    });

    // If you want a responsive mode (so when the user resizes the window)
    // the spectrum will be still playable
    window.addEventListener(
        "resize",function() {
            // Get the current progress according to the cursor position
            var currentProgress =
                Spectrum.getCurrentTime() / Spectrum.getDuration();

            // Reset graph
            Spectrum.empty();
            Spectrum.drawBuffer();
            // Set original position
            Spectrum.seekTo(currentProgress);

            // Enable/disable respectively buttons
            buttons.pause.disabled = true;
            buttons.play.disabled = false;
            buttons.stop.disabled = false;
        },false
    );

    // Load the audio file
    Spectrum.load(url);
}

/////function for record again
function reRecord() {

    recordingsList = document.getElementById(`recordingsList`);
    $(recordingsList).empty();

}

问题是当我单击再次录制按钮（调用函数 reRecord）并录制一个新文件然后播放录制的音频时，我应该删除的旧音频也在播放新音频。是的，我使用了 Sprectrum.destroy() 方法，但是单击播放按钮会出现错误，因为它也在搜索旧音频，当我使用简单的音频标签时不会发生这种情况。

请帮助我并提前致谢

解决方法

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

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

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