HTML5 jQuery voice recorder and upload

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

Using Recorder.js to capture WAV audio in HTML5 and upload it to your server or download locally

 

git : https://github.com/addpipe/simple-recorderjs-demo

addpipe/simple-recorderjs-demo

사용법 : 위 github로 접속하여 소스 다운로드만 하면 잘 됨
github.com/addpipe/simple-recorderjs-demo/archive/master.zip

js폴더 하위에 app.js만 수정해주면 되는데 기본은 php로 되어있다.
난 classic asp이므로 function createDownloadLink(blob) 이 부분을 수정해주면 된다.
원본은 리스터로 업로드 버튼을 클릭하면 업로드를 진행하게 되어 있는데 자동으로 업로드를 해줘야 했기 때문에
upload.addEventListener("click", function(event) {
})

// 자동업로드시작
  var xhr=new XMLHttpRequest();
  xhr.onload=function(e) {
      if(this.readyState === 4) {
          alert(e.target.responseText);
      }
  };

  var fd=new FormData();     

  fd.append("audio_data", blob, "filename.wav"); // 파일 이름은 원본 소스에 날짜시간 뭐 이런식으로 되어 있는데 알아서 바꿔주면 된다.

  fd.append("userid", "myid");

  xhr.open("POST","/upload/voiceupload.asp",true); //js폴더 기준으로 업로드 파일의 경로를 제대로 지정해줘야 한다.

  xhr.send(fd);

// 자동업로드끝

주의사항 : SSL(https)가 아닌경우 권한 문제 발생되므로 반드시 SSL환경에서 구현할 것
edge, (android, ios, pc)

chrome, safari 등 어지간한 브라우저는 다 지원함.
망할 IE는 안됨. 당연히

src.zip

0.01MB