웹 음성녹음 솔루션 : 키위 보이스 레코더
 
웹브라우저에서 PC 또는 Mobile기기에 연결 되어 있는 마이크로 음성을 녹음하여 녹음 파일을 재생, 다운로드 또는 웹 서버에 업로드 할 수 있는 솔루션입니다.
웹사이트에 맞춤형으로 웹 음성녹음 서비스를 구축 할 수 있습니다.
HTML5,JavaScript 기반으로 웹 서버 OS 및 웹 사이트 제작 언어에 상관 없이 음성 녹음 서비스를 구축하여 운영 할 수 있습니다.
음성 녹음은 mp3파일로 녹음되며 녹음 시간 길이는 원하는 최대 시간(초 단위)을 설정 할 수 있습니다.
키위 보이스 레코더 라이선스 구매 고객사
2023 9 22일 현재 키위 보이스 레코더 라이선스를 구매한 고객사는 99곳 입니다.
웹 음성녹음 체험하기
웹 음성 녹음 체험 URL에 접속한 PC에 마이크가 연결되어 있어야 합니다. 모바일 기기에서는 바로 사용 할 수 있습니다.
웹 음성녹음 체험 URL에 접속 후 마이크 사용 권한 요청 메시지창이 뜨면 반드시 허용해주세요.
- 웹 브라우저 지원 호환성 (각 브라우저 지원 버전)
PC Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
49 79 65 미지원 36 14.1 49 49 65 36 14.5 5.0
사용자 PC 또는 모바일 기기에서 웹브라우저 오류 등이 발생하는 경우 녹음이 정상적으로 되지 않을 수 있습니다.
사용자 PC 또는 모바일 기기에서 웹브라우저 최신 버전 및 마이크 연결 상태 등을 반드시 확인해 주세요.
일부 기기 또는 구 버전의 웹브라우저에서 녹음이 정상적으로 되지 않을 수 있습니다.
웹페이지 HTML 적용방식
HTML과 Javascript로 웹페이지에 적용합니다. 설치파일에 Javascript파일 등이 모두 포함되어 함께 제공됩니다. 디자인은 자유롭게 변경 할 수 있습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Kiwi Voice Recorder</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./lib/jquery-3.7.0.min.js"></script>
    <script src="./lib/setup.js"></script>
    <script src="./lib/audioRecorder.min.js"></script>
    <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>
    <fieldset id="fieldset_black">
        <legend id="legend_black">키위 보이스 레코더</legend>
        <div id="fieldset_div">&#8226; 서비스 신청 및 안내 : <a href="https://www.kiwisoft.kr" target="_blank">https://www.kiwisoft.kr</a></div>
        <div id="fieldset_div">&#8226; Copyright © 앤아이비디앤. All rights reserved.</div>
    </fieldset>
 
 
    <h4>비주얼라이저 (Visualizer) V1</h4>
    <!-- visualizer : 가로,세로 사이즈 및 기본 배경색을 CSS에서 원하는 값을 지정합니다. 비주얼라이저를 사용하지 않는 경우 아래 canvas 태그는 주석처리 하시면 됩니다. -->
    <canvas id="visualizer_canvas_v1_1" class="visualizer_canvas"></canvas>
    <br><br>
 
    <h4>비주얼라이저 (Visualizer) V2</h4>
    <!-- visualizer : 가로,세로 사이즈 및 기본 배경색을 CSS에서 원하는 값을 지정합니다. 비주얼라이저를 사용하지 않는 경우 아래 canvas 태그는 주석처리 하시면 됩니다. -->
    <canvas id="visualizer_canvas_v2_1" class="visualizer_canvas"></canvas>
    <hr>
 
 
    <h4>Control1 : 녹음 컨트롤 1</h4>
    <button type="button" id="recordButton1" onclick="startRecording('visualizer_canvas_v1_1','v1','id_timer1','audio_player1','audio_button1','audio_log1');">녹음시작</button>
    <button type="button" id="pauseButton1" onclick="pauseRecording('audio_log1')">녹음일시정지(Pause)</button>
    <button type="button" id="resumeButton1" onclick="resumeRecording('audio_log1')">녹음다시시작(Resume)</button>
    <button type="button" id="stopButton1" onclick="stopRecording('audio_log1');">녹음종료</button>
 
 
    <h4>Player : 녹음 종료 후 재생 플레이어가 보여집니다.</h4>
    <div id="audio_player1">녹음 종료 후 여기에 재생 플레이어가 보여집니다. 녹음 종료 후 잠시만 기다려주세요.</div>
 
    <!-- 사용하지 않는 경우 아래 태그는 주석처리 하시면 됩니다. -->
    <h4>Download,Upload : 녹음 종료 후 mp3 다운로드,업로드 버튼이 보여집니다.</h4>
    <div id="audio_button1">녹음 종료 후 여기에 다운로드,업로드 버튼이 보여집니다.</div>
 
    <!-- 사용하지 않는 경우 아래 태그는 주석처리 하시면 됩니다. -->
    <h4>Timer : 녹음 시간 진행 표시</h4>
    <div class="wrap">
    <div id="id_timer1">0:00</div> 
    <div id="max_recording_time">/<script>document.write(recordTimeText());</script></div>
    </div>
 
    <!-- 사용하지 않는 경우 아래 태그는 주석처리 하시면 됩니다. -->
    <h4>Log : 녹음 진행 로그를 표시합니다.</h4>
    <div id="audio_log1">여기에 녹음 진행 로그를 표시합니다.</div>
    <hr>
 
 
    <h4>Control2 : 녹음 컨트롤 2</h4>
    <button type="button" id="recordButton2" onclick="startRecording('visualizer_canvas_v2_1','v2','id_timer2','audio_player2','audio_button2','audio_log2');">녹음시작</button>
    <button type="button" id="pauseButton2" onclick="pauseRecording('audio_log2')">녹음일시정지(Pause)</button>
    <button type="button" id="resumeButton2" onclick="resumeRecording('audio_log2')">녹음다시시작(Resume)</button>
    <button type="button" id="stopButton2" onclick="stopRecording('audio_log2');">녹음종료</button>
 
 
    <h4>Player : 녹음 종료 후 재생 플레이어가 보여집니다.</h4>
    <div id="audio_player2">녹음 종료 후 여기에 재생 플레이어가 보여집니다. 녹음 종료 후 잠시만 기다려주세요.</div>
 
    <!-- 사용하지 않는 경우 아래 태그는 주석처리 하시면 됩니다. -->
    <h4>Download,Upload : 녹음 종료 후 다운로드,업로드 버튼이 보여집니다.</h4>
    <div id="audio_button2">녹음 종료 후 여기에 다운로드,업로드 버튼이 보여집니다.</div>
 
    <!-- 사용하지 않는 경우 아래 태그는 주석처리 하시면 됩니다. -->
    <h4>Timer : 녹음 시간 진행 표시</h4>
    <div class="wrap">
    <div id="id_timer2">0:00</div> 
    <div id="max_recording_time">/<script>document.write(recordTimeText());</script></div>
    </div>
 
    <!-- 사용하지 않는 경우 아래 태그는 주석처리 하시면 됩니다. -->
    <h4>Log : 녹음 진행 로그를 표시합니다.</h4>
    <div id="audio_log2">여기에 녹음 진행 로그를 표시합니다.</div>
    <hr>
 
 
    <script src="./lib/audioFunction.min.js"></script>
    <script src="./lib/appRecorder.js"></script>
  </body>
</html>
 
 
 
 
JAVASCRIPT 주요 기능 설정
자바스크립트 설정 파일(setup.js)에서 주요 기능 설정을 간편하게 할 수 있습니다.
녹음 컨트롤과 관련된 자바스크립트 주요 함수를 직접 커스트마이징 할 수 있도록 별도의 자바스크립트 파일을 함께 제공합니다.
- setup.js 주요 설정
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
///////////////////////////////////////////////////
// KiwiVoiceRecorder                             //
// https://www.kiwisoft.kr                       //
// Copyright © 앤아이비디앤. All rights reserved. //
///////////////////////////////////////////////////
 
// Kiwi Recorder 서비스 버전
var Kiwi_Recorder_Version = 16
 
// 라이선스 키 (정식 라이선스키로 수정 등록하세요.)
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 = "업로드가 완료되었습니다.";         // 업로드 성공 알림
var uploadFailMessage = "업로드 도중 오류가 발생하였습니다.";   // 업로드 실패 알림
 
// 웹 브라우저 지원 여부 메시지
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 예제
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
////////////////////////////////////////////////////
// KiwiVoiceRecorder                              //
// https://www.kiwisoft.kr                        //
// Copyright © 앤아이비디앤. All rights reserved. //
////////////////////////////////////////////////////
 
// 녹음 시작(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);
    }
}
 
// 녹음 종료 후 재생 플레이어,다운로드,업로드 버튼 표시 
/*
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();
    }
 
    // 녹음 파일 재생 오디오 플레이어 실행(Embedded audio player)
    if($("#"+audio_player).length > 0) {
        $("#"+audio_player).empty();
        const newAudio = document.createElement("audio");
        newAudio.src = url;
        newAudio.controls = true;
        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 다운로드")); 
        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();
        };
        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';
        ubutton.onclick = function() {
            uploadRecording(blobvalue);
        };
        document.getElementById(audio_button).prepend(ubutton);
    }
 
    // 녹음 종료 버튼 클릭 후 mp3 서버 업로드 자동 실행 (사용 시 아래 주석을 제거합니다.)
    // uploadRecording(blobvalue);
}
 
// 녹음 파일 웹서버 업로드
function uploadRecording(blobData) { 
    var upload_file_name = "voice_record"// 음성 녹음 업로드 파일명을 지정합니다. upload.php -> $_FILES['voice_record'] 파일 변수명과 일치해야 합니다. 업로드 파일명 변경 및 파일 확장자는 upload.php에서 직접 지정할 수 있습니다.
    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 등의 언어로 직접 제작해주셔야 하는 부분입니다.)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?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';
 
}
 
?>
 
 
 
 

 

서비스 안내

https://www.kiwisoft.kr/h3/s01/s02.php

 

키위소프트 | Kiwisoft

웹 음성녹음 솔루션 : 키위 보이스 레코더 웹브라우저에서 PC 또는 Mobile기기에 연결 되어 있는 마이크로 음성을 녹음하여 녹음 파일을 재생, 다운로드 또는 웹 서버에 업로드 할 수 있는 솔루션

www.kiwisoft.kr

 

+ Recent posts