recorderjs를 이용한 녹음 및 ajax, php를 이용한 업로드

기본은

http://webaudiodemos.appspot.com/AudioRecorder/index.html

여기서 많이 참고를 하였다.

위 예제는 녹음을 하고 wav파일로 다운을 받는 예제이다.

소스보기를 해서 (이렇게 얘기를 해도 될랑가)

recorder.js와 recorderWorker.js를 가져와서 썼다.

소스를 보면 알겠지만 위 예제는 mattdiamond의 recorderjs를 쓰고 있다. 

* github를 보면 mattdiamond와 jwagener의 예제가 있다.

https://github.com/mattdiamond/Recorderjs

https://github.com/jwagener/recorder.js/

미리듣기

나는 "미리듣기" 도 필요했기에 audio 태그를 하나 만들어 두었다.

 <audio controls id='play' class='play' src=''></audio>

그리고 recorder.js에서 Recorder.forceDownload 부분에 추가

link = document.getElementById("play");

link.src = url;

서버에 업로드

미리듣기 및 다운로드는 blob를 이용하기 때문에 얘를 따로 저장할 필요가 있었다.

function doneEncoding( blob ) 부분에

b = blob 추가

그리고 업로드 버튼을 만들고

XMLHttpRequest를 이용해서 업로드를 진행하였다.

var xhr = new XMLHttpRequest();

var wav;

xhr.onload = function(e) {

if(this.readyState === 4) {

console.log(e.target.responseText);

}

};

var fd = new FormData();

fd.append("random.wav",b);

xhr.open("POST", 'audio_upload.php', true);

xhr.send(fd);

audio_upload.php에서는 move_uploaded_file를 이용해 업로드 하였다.

<?php

$file_name = date("YmdHis")."_".time();

$tmp_filename = $_FILES["random_wav"]["tmp_name"];

rename($tmp_filename,"./audio/{$file_name}.wav");

$uploadDir = './audio';

move_uploaded_file($tmp_filename, "$uploadDir/$tmp_filename");

echo $file_name;

?>