웹 음성녹음 솔루션 : 키위 보이스 레코더

2024. 9. 21. 15:17

웹 음성녹음 솔루션 : 키위 보이스 레코더

PC 또는 Mobile기기에 연결 되어 있는 마이크로 음성을 녹음하여 녹음 파일을 재생, 다운로드 또는 웹 서버에 업로드 할 수 있는 HTML5 웹 기반의 녹음 솔루션입니다.

웹사이트에 맞춤형으로 웹 음성녹음 서비스를 구축 할 수 있습니다.

HTML5,JavaScript 기반으로 웹 서버 OS 및 웹 사이트 제작 언어에 상관 없이 음성 녹음 서비스를 구축하여 운영 할 수 있습니다.

음성 녹음은 mp3파일로 녹음되며 녹음 시간 길이는 원하는 최대 시간(초 단위)을 설정 할 수 있습니다.

3일 동안 무료로 테스트를 진행해보세요.

서비스 신청 후 3일 동안 무료로 웹서버에 설치하여 테스트할 수 있습니다.

테스트를 위한 임시 라이선스가 발급되며 신청 후 이메일로 안내해드립니다.

테스트 완료 후 구매 결제를 진행합니다.

무료 테스트 기간은 구매 신청 당일을 포함하여 제공됩니다.

주말 및 공휴일은 무료 테스트 기간에 포함되지 않습니다.

키위 보이스 레코더 라이선스 구매 고객사

2024년 9월 21일 현재 키위 보이스 레코더 라이선스를 구매한 고객사는 113곳 입니다.

웹 음성녹음 체험하기

웹 음성 녹음 체험 URL에 접속한 PC에 마이크가 연결되어 있어야 합니다. 모바일 기기에서는 바로 사용 할 수 있습니다.

웹 음성녹음 체험 URL에 접속 후 마이크 사용 권한 요청 메시지창이 뜨면 반드시 허용해주세요.

사용자 PC 또는 모바일 기기에서 웹브라우저 오류가 발생하거나 일부 기기 또는 구 버전의 웹브라우저에서 녹음이 정상적으로 되지 않을 수 있습니다.

사용자 PC 또는 모바일 기기에서 웹브라우저 최신 버전 및 마이크 연결 상태 등을 반드시 확인해 주세요.

웹페이지 HTML 적용방식

HTML과 Javascript로 웹페이지에 적용합니다. 설치파일에 Javascript파일 등이 모두 포함되어 함께 제공됩니다. 디자인은 자유롭게 변경 할 수 있습니다.

100

101

102

103

104

105

106

<!DOCTYPE html>

<html>

<head>

<title>키위 보이스 레코더 - Kiwi Voice Recorder</title>

<style>

.BUTTON { margin: 0 10px 10px 0; }

.visualizer_canvas { width: 100%; height: 200px; background-color: #000000; }

#id_timer1 { float:left; }

#id_timer2 { float:left; }

#max_recording_time { float:left; }

.wrap::after { content: ""; display: block; clear: both; }

</style>

</head>

<body>

<legend id="legend_black">키위 보이스 레코더 (Kiwi Voice Recorder)</legend>

<div id="fieldset_div">• 서비스 신청 및 안내 : <a href="https://www.kiwisoft.kr" target="_blank">https://www.kiwisoft.kr</a></div>

</fieldset>

<h3>Control1 : 녹음 컨트롤 1</h3>

<h4>- 비주얼라이저 (Visualizer) Type: V1 (V1,V2 중에 선택 가능)</h4>

<button type="button" id="pauseButton1" onclick="pauseRecording('audio_log1')">녹음일시정지(Pause)</button>

<button type="button" id="resumeButton1" onclick="resumeRecording('audio_log1')">녹음다시시작(Resume)</button>

<h4>- Player : 녹음 종료 후 재생 플레이어가 보여집니다.</h4>

<h4>- Play,Download,Upload : 녹음 종료 후 녹음파일 재생,mp3 다운로드,mp3 업로드 버튼을 생성합니다.</h4>

<h4>- Timer : 녹음 시간 진행 표시</h4>

<div id="max_recording_time">/<script>document.write(recordTimeText());</script></div>

</div>

<h4>- Log : 녹음 진행 로그를 표시합니다.</h4>

<h3>Control2 : 녹음 컨트롤 2 (한 화면에 녹음 기능을 2개 이상 추가하는 경우 아래와 같이 추가 가능)</h3>

<h4>- 비주얼라이저 (Visualizer) Type: V2 (V1,V2 중에 선택 가능)</h4>

<button type="button" id="pauseButton2" onclick="pauseRecording('audio_log2')">녹음일시정지(Pause)</button>

<button type="button" id="resumeButton2" onclick="resumeRecording('audio_log2')">녹음다시시작(Resume)</button>

<h4>- Player : 녹음 종료 후 재생 플레이어가 보여집니다.</h4>

<h4>- Play,Download,Upload : 녹음 종료 후 녹음파일 재생,mp3 다운로드,mp3 업로드 버튼을 생성합니다.</h4>

<h4>- Timer : 녹음 시간 진행 표시</h4>

<div id="max_recording_time">/<script>document.write(recordTimeText());</script></div>

</div>

<h4>- Log : 녹음 진행 로그를 표시합니다.</h4>

</body>

</html>

JAVASCRIPT 주요 기능 설정

자바스크립트 설정 파일(setup.js)에서 주요 기능 설정을 간편하게 할 수 있습니다.

녹음 컨트롤과 관련된 자바스크립트 주요 함수를 직접 커스트마이징 할 수 있도록 별도의 자바스크립트 파일을 함께 제공합니다.

- setup.js 주요 설정

////////////////////////////////////////////////////

// KiwiVoiceRecorder //

// https://www.kiwisoft.kr //

////////////////////////////////////////////////////

// Kiwi Recorder 서비스 버전

var Kiwi_Recorder_Version = 17;

// 라이선스 키 (정식 라이선스키로 수정 등록하세요.)

var KVR_LICENSE_KEY = "lJchkbbwGCt66C_";

// 녹음되는 오디오 파일 인코딩 타입 선택 (mp3만 가능합니다.)

var encodingTypeSelect = "mp3";

// 최대 녹음 시간(초) - 녹음 시간이 설정 값을 초과하면 자동으로 녹음이 종료됩니다.

var recordTimeLimit = 300;

// 녹음 전 버튼 클릭 오류 메시지

var recordingCheckErrorMsg = "녹음을 먼저 진행하세요.";

var preRecordingCheckErrorMsg = "이전 녹음을 먼저 완료해주세요."; // 한 화면에 녹음 기능을 2개 이상 포함시킨 경우 -> 이전 녹음 완료 전 다음 녹음 버튼을 클릭하였을 경우

// 녹음 로그 메시지

var readyMessage = "> 녹음을 시작합니다.";

var startMessage = "> 녹음이 시작되었습니다.";

var pauseMessage = "> 녹음을 일시 정지합니다.";

var resumeMessage = "> 녹음을 계속 진행합니다.";

var stopMessage = "> 녹음이 종료되었습니다.";

var endMessage = "> 인코딩이 완료되었습니다.";

var uploadSuccessMessage = "업로드가 완료되었습니다."; // MP3 서버 업로드 성공 알림

var uploadFailMessage = "업로드 도중 오류가 발생하였습니다."; // MP3 서버 업로드 실패 알림

var playMessage = "> 녹음 파일을 재생합니다.";

var playPauseMessage = "> 녹음 파일 재생을 일시 정지합니다.";

var playResumeMessage = "> 녹음 파일을 계속 재생합니다.";

// 웹 브라우저 지원 여부 메시지

var chkbrowsermsg = "현재 웹브라우저에서는 녹음 기능을 지원하지 않습니다. 최신 버전의 구글 크롬(Chrome), 마이크로스프트 엣지(Edge) 또는 애플 사파리(Safari) 웹브라우저에서 접속해주세요.";

// 녹음 파일 서버 업로드 처리 URL 지정

var uploadUrl = "/Kiwi_Recorder/upload.php";

// mp3lib 경로를 지정합니다.(절대경로)

var mp3libUrl = "/Kiwi_Recorder/lib/mp3lib.min.js";

// 비주얼라이저(visualizer) v1 설정 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

var visualizerV1BackColor = "#E2E2E2"; // 배경색상 코드

var visualizerV1LineColor = "#5357FF"; // 라인색상 코드

var visualizerV1lineWidth = 2; // 라인두께 (1,2,3 ...)

// 비주얼라이저(visualizer) v2 설정 /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

var visualizerV2BackgroundColor = "#E2E2E2"; // 배경색상 코드

비주얼라이저(visualizer) 바(bar) 색상을 선택하거나 직접 색상코드를 설정합니다.

비주얼라이저(visualizer) 바(bar) 색상은 기본으로 제공하는 a,b,c,d 4가지 중에서 한 가지를 선택하여 설정 할 수 있습니다.

기본 제공 색상을 선택하지 않고 색상을 직접 설정 할 경우 색상코드를 입력합니다. ( 예: var visualizerV2BarColor = "#FF0000"; )

var visualizerV2BarColor = "a";

// 비주얼라이저(visualizer) 바(bar) 민감도 설정 (비주얼라이저 바의 움직임 정도를 설정합니다. 1 이상의 숫자로 지정하세요. 소수 가능, 기본값: 3)

var visualizerV2Sensor = 3;

주의사항 : 비주얼라이저는 녹음시에 동작하며 V1, V2 중에서 한 가지만 선택하여 사용할 수 있습니다. V1, V2 모두 true로 적용하여 사용하면 오류가 발생합니다.

// 아래 코드는 수정하지 마세요. ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

var recordTimeText = function() {

var recordTimeM = Math.floor(recordTimeLimit / 60);

var recordTimeS = recordTimeLimit % 60;

if(recordTimeS<10) {

recordTimeS = "00";

}

if(!recordTimeM || recordTimeM < 1) {

recordTimeM = "0";

}

var resultTime = recordTimeM + ":" + recordTimeS;

return resultTime;

};

녹음 및 이벤트

녹음을 완료하고 필요한 이벤트를 실행합니다. Ajax를 사용하여 녹음 파일을 웹서버에 업로드 할 수 있습니다.
필요한 기능이 있는 경우 코드를 추가하여 사용하세요.
녹음 파일의 업로드 경로(URL)을 직접 지정하여 서버단에서 파일업로드 처리 및 DB 저장 등의 처리를 할 수 있습니다.
서버단에서 파일업로드 처리와 관련하여 php 예제 소스 파일(upload.php)을 함께 제공합니다. asp 또는 jsp를 사용하시는 경우 직접 제작해주셔야 합니다.

- appRecorder.js 예제

////////////////////////////////////////////////////

// 키위 보이스 레코더 - Kiwi Voice Recorder //

// https://www.kiwisoft.kr //

////////////////////////////////////////////////////

// 녹음 시작(start)

function startRecording(visualizer_canvas_id,visualizer_canvas_ver,timer_id,audio_player,audio_button,audio_log) {

_startRecording(visualizer_canvas_id,visualizer_canvas_ver,timer_id,audio_player,audio_button,audio_log);

}

// 녹음 일시 정지(pause)

function pauseRecording(audio_log) {

_pauseRecording(audio_log);

}

// 녹음 다시 시작(resume)

function resumeRecording(audio_log) {

_resumeRecording(audio_log);

}

// 녹음 종료(stop)

function stopRecording(audio_log) {

_stopRecording(audio_log);

}

// 녹음 진행 과정 로그 표시

- audio_log : example.html 소스 코드에서 로그 표시 div id -> "audio_log1"

- viewLog 함수명 및 매개변수 변경 금지

function viewLog(str, url = null, audio_log) {

if($("#"+audio_log).length > 0) {

const newDiv = document.createElement("div");

newDiv.appendChild(document.createTextNode(str));

document.getElementById(audio_log).prepend(newDiv);

}

// 녹음 종료 후 재생 플레이어 실행 및 녹음파일재생,녹음파일 계속 재생,녹음파일 재생 일시정지,MP3 다운로드,MP3 업로드 버튼 표시 설정

- audio_player : example.html 소스 코드에서 플레이어 표시 div id -> "audio_player1"

- audio_button : example.html 소스 코드에서 다운로드 및 업로드 버튼 표시 div id -> "audio_button1"

- viewRecording 함수명 및 매개변수 변경 금지

- 각 상황에 맞게 플레이어,버튼 등의 표시 여부를 직접 수정할 수 있습니다.

function viewRecording(url,blobvalue,audio_player,audio_button) {

if($("#"+audio_button).length > 0) {

$("#"+audio_button).empty();

}

if($("#"+audio_player).length > 0) {

$("#"+audio_player).empty();

}

// 오디오 태그 생성

var newAudio = document.createElement("audio");

newAudio.src = url;

newAudio.controls = true;

newAudio.id = "player" + Date.now();

// 녹음 파일 재생 오디오 플레이어를 화면에 표시합니다.

if($("#"+audio_player).length > 0) {

document.getElementById(audio_player).prepend(newAudio);

}

// mp3 파일 다운로드 하이퍼링크 생성 (사용 시 아래 주석을 제거합니다.)

if($("#"+audio_button).length > 0) {

// 하이퍼링크 태그 생성

const downLink = document.createElement("a");

downLink.href = url;

downLink.download = "record_" + Date.now() + ".mp3"; // mp3 파일명 지정

downLink.appendChild(document.createTextNode("mp3 다운로드"));

// mp3 파일 다운로드 하이퍼링크를 화면에 표시합니다.

document.getElementById(audio_button).prepend(downLink);

}

// mp3 파일 다운로드 버튼 생성

if($("#"+audio_button).length > 0) {

var dbuttonID = "downloadButton" + Date.now();

var dbutton = document.createElement("button");

dbutton.type = 'button';

dbutton.id = dbuttonID;

dbutton.innerHTML = 'mp3 다운로드';

dbutton.className = 'BUTTON';

dbutton.onclick = function() {

const downLink = document.createElement("a");

downLink.href = url;

downLink.download = "record_" + Date.now() + ".mp3"; // mp3 파일명 지정

downLink.click();

};

/* mp3 파일 다운로드 버튼을 화면에 표시합니다. */

document.getElementById(audio_button).prepend(dbutton);

}

// mp3 서버 업로드 버튼 생성

if($("#"+audio_button).length > 0) {

var ubuttonID = "uploadButton" + Date.now();

var ubutton = document.createElement("button");

ubutton.type = 'button';

ubutton.id = ubuttonID;

ubutton.innerHTML = 'mp3 업로드';

ubutton.className = 'BUTTON';

/* onClick 이벤트로 uploadRecording(blobvalue) 서버 업로드 함수 호출 */

ubutton.onclick = function() {

uploadRecording(blobvalue);

};

/* mp3 파일 업로드 버튼을 화면에 표시합니다. */

document.getElementById(audio_button).prepend(ubutton);

}

// 녹음 종료 후 녹음파일 재생(Play) 버튼 생성

if($("#"+audio_button).length > 0) {

var pbuttonID = "playButton" + Date.now();

var pbutton = document.createElement("button");

pbutton.type = 'button';

pbutton.id = pbuttonID;

pbutton.innerHTML = '녹음파일재생';

pbutton.className = 'BUTTON';

/* onClick 이벤트로 _startPlay(newAudio) 재생(Play) 함수 호출 */

pbutton.onclick = function() {

_startPlay(newAudio);

};

/* 녹음파일 재생(Play) 버튼을 화면에 표시합니다. */

document.getElementById(audio_button).prepend(pbutton);

}

// 녹음파일 재생 일시정지(Pause) 버튼 생성

if($("#"+audio_button).length > 0) {

var pabuttonID = "pauseButton" + Date.now();

var pabutton = document.createElement("button");

pabutton.type = 'button';

pabutton.id = pabuttonID;

pabutton.innerHTML = '녹음파일 재생 일시정지';

pabutton.className = 'BUTTON';

/* onClick 이벤트로 _pausePlay(newAudio.id) 일시정지(Pause) 함수 호출 */

pabutton.onclick = function() {

_pausePlay(newAudio.id);

};

/* 녹음파일 재생 일시정지(Pause) 버튼을 화면에 표시합니다. */

document.getElementById(audio_button).prepend(pabutton);

}

// 녹음파일 계속 재생(Resume) 버튼 생성

if($("#"+audio_button).length > 0) {

var rebuttonID = "resumeButton" + Date.now();

var rebutton = document.createElement("button");

rebutton.type = 'button';

rebutton.id = rebuttonID;

rebutton.innerHTML = '녹음파일 계속 재생';

rebutton.className = 'BUTTON';

/* onClick 이벤트로 _resumePlay(newAudio.id) 재생(Resume) 함수 호출 */

rebutton.onclick = function() {

_resumePlay(newAudio.id);

};

/* 녹음파일 계속 재생(Resume) 버튼을 화면에 표시합니다. */

document.getElementById(audio_button).prepend(rebutton);

}

// 녹음 종료 버튼 클릭 후 mp3 서버 업로드 자동 실행 (사용 시 아래 주석을 제거합니다.)

// uploadRecording(blobvalue);

}

// 녹음 파일 웹서버 업로드

function uploadRecording(blobData) {

음성 녹음 업로드 파일명을 지정합니다.

upload.php 파일 -> $_FILES['voice_record'] 파일 변수명과 일치해야 합니다.

업로드 파일명 변경 및 파일 확장자는 upload.php에서 직접 지정할 수 있습니다.

var upload_file_name = "voice_record";

if(!blobData) {

alert(recordingCheckErrorMsg);

} else if(blobData) {

console.log("Upload Recording");

var formData = new FormData();

formData.append(upload_file_name,blobData);

$.ajax({

url : uploadUrl,

async:true,

type: "POST",

enctype: 'multipart/form-data',

data : formData,

processData: false,

contentType: false,

success: function(data, textStatus, jqXHR)

{

console.log(data);

/* 녹음 파일 업로드 처리 서버 스크립트 페이지에서 리턴 받은 값을 확인하여 결과를 처리합니다.

리턴 값은 추가 또는 변경 할 수 있습니다.

예제 upload.php 파일에서 결과 리턴 처리 방법을 확인하세요. */

if($.trim(data) == 'upload_success') {

/* 리턴 값이 upload_success인 경우 : 업로드에 성공 했을 경우 결과를 처리합니다.

원하는 처리 코드를 여기에 추가하세요. */

alert(uploadSuccessMessage);

} else if($.trim(data) == 'upload_fail') {

/* 리턴 값이 upload_fail인 경우 : 업로드에 실패 했을 경우 결과를 처리합니다.

원하는 처리 코드를 여기에 추가하세요. */

alert(uploadFailMessage);

} else {

alert(uploadFailMessage);

}

error: function (jqXHR, textStatus, errorThrown)

{

console.log(jqXHR);

}

});

}

// 녹음 종료(stop) 후 자동 호출되는 이벤트 함수 (함수명 및 매개변수 변경 금지)

- timer_id : example.html 소스 코드에서 타이머 표시 div id -> "id_timer1"

- audio_player : example.html 소스 코드에서 플레이어 표시 div id -> "audio_player1"

- audio_button : example.html 소스 코드에서 다운로드 및 업로드 버튼 표시 div id -> "audio_button1"

- audio_log : example.html 소스 코드에서 녹음 진행 로그 표시 div id -> "audio_log1"

function eventStopRecording(timer_id,audio_player,audio_button,audio_log) {

console.log('Stop Recording Event');

// 녹음 종료(stop) 후 실행해야 할 코드가 있을 경우 여기에 추가하세요.

console.log(timer_id);

console.log(audio_player);

console.log(audio_button);

console.log(audio_log);

}

// 녹음 시작 시 마이크(미디어 디바이스) 사용 권한 획득 관련 등의 오류로 녹음에 실패하는 경우 자동 호출되는 이벤트 함수 (함수명 변경 금지)

function _startRecording_error() {

alert('녹음 시작 도중 오류가 발생하였습니다.');

}

녹음파일 웹서버 업로드 및 결과 리턴

- upload.php 예제 (파일 업로드 및 Database 저장 등의 처리는 고객사의 서버 환경에 따라 PHP,ASP,JSP 등의 언어로 직접 제작해주셔야 하는 부분입니다.)

<?php

$size = $_FILES['voice_record']['size']; // upload 파일 용량

$input = $_FILES['voice_record']['tmp_name']; // upload 임시 파일명

// 업로드 될 실제 파일명 설정 (서버 업로드 폴더 경로 지정 포함, 파일 확장자는 mp3)

$destination = "./upload/voice_record_" . time() . ".mp3";

// 녹음 파일 서버 업로드

if(move_uploaded_file($input, $destination)) {

/* 업로드에 성공 했을 경우 upload_success 값을 리턴합니다. 리턴 값은 원하는 다른 값으로 변경 할 수 있습니다.

appRecorder.js -> uploadRecording 함수에서 넘겨받은 리턴 값으로 결과를 처리합니다.

여기에 필요한 경우 함께 POST로 넘겨받은 elements 및 녹음 파일명의 Database 저장 등의 처리를 함께 진행합니다.

리턴 값 출력 외에 다른 출력 코드는 사용하지 마세요. */

echo 'upload_success';

} else {

/* 업로드에 실패 했을 경우 upload_fail 값을 리턴합니다. 리턴 값은 원하는 다른 값으로 변경 할 수 있습니다.

appRecorder.js -> uploadRecording 함수에서 넘겨받은 리턴 값으로 결과를 처리합니다.

리턴 값 출력 외에 다른 출력 코드는 사용하지 마세요. */

echo 'upload_fail';

}

라이선스 구매 신청 또는 문의하기

키위 보이스 레코더는 직접 운영 하시는 웹사이트에 음성녹음 기능을 서비스 할 수 있는 솔루션입니다.
보안서버인증서(SSL)가 적용되어 있는 도메인 URL로 접속(https://)해야 녹음 기능을 정상적으로 사용 할 수 있습니다.
구매 문의는 키위소프트 홈페이지 > 고객센터 > 고객문의에서 등록해주시면 문의에 대한 답변을 이메일로 보내드립니다.

https://www.kiwisoft.kr/

www.kiwisoft.kr

저작자표시 비영리 변경금지

'비즈니스 > 키위소프트' 카테고리의 다른 글

맞춤형 솔루션 제작 견적 할인 이벤트 안내 (0)	2024.10.31
100% 맞춤형 기업 솔루션 제작 서비스 (0)	2024.10.17
맞춤형 솔루션 및 홈페이지 제작 서비스 안내 (0)	2024.09.18
웹음성녹음 솔루션 '키위 보이스 레코더' 소개 및 특징 (0)	2024.09.15
웹 QR코드 스캔 + 웹 GPS를 사용한 출퇴근(출결)관리 웹솔루션 (0)	2024.09.11

키위노트