반응형

블로그 : 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

This is the 1st post in our new recording audio in HTML5 series. Next, we’ll cover using WebAudioRecorder, vmsg, the opus-recorder and MediaRecording API. Matt Diamond‘s Recorder.js is a popular JavaScript library for recording audio in the browser as

blog.addpipe.com

 

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

 

addpipe/simple-recorderjs-demo

A simple HTML5/JS demo that uses Recorder.js to record audio as uncompressed pcm (wav) and POST it to a server side script. - addpipe/simple-recorderjs-demo

github.com

사용법 : 위 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

 

 

반응형
Posted by Hippalus
,