PHP 录制声音并使用进度条上传 php

Question

我使用链接中的代码来录制音频并上传到服务器。 我找到了一些上传进度条代码，但无法与此代码合并。 音频记录可能是 30-40 mb，上传需要很长时间。 如何在下面添加此代码的上传状态？

https://blog.addpipe.com/using-recorder-js-to-capture-wav-audio-in-your-html5-web-site/

    var upload = document.createElement('a');
    upload.href="#";
    upload.innerHTML = "Upload";
    upload.addEventListener("click", function(event){
          var xhr=new XMLHttpRequest();
          xhr.onload=function(e) {
              if(this.readyState === 4) {
                  console.log("Server returned: ",e.target.responseText);
              }
          };
          
          var fd=new FormData();
          fd.append("audio_data",blob, filename);
          fd.append("filename",blob, 'audiofile');
          xhr.open("POST","upload.php",true);
          xhr.send(fd);
          alert('Uploaded');
    }) ```

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/upload

var xhr = new XMLHttpRequest();

xhr.upload.addEventListener('progress', function(event)
{
    var progress = event.loaded / event.total * 100;
    
    console.log('Progress: ' + progress);
});