모바일에서 음성캡챠를 지원하기 위하여 mp3 형식으로 바꾸고 모바일의 경우 audio 태그를 적용함

bbs/gcaptcha/down.php

@@ -1,34 +0,0 @@
-<?
-include_once('./_common.php');
-
-$file = addslashes($_GET['file']);
-$filepath = $g4['cache_captcha_path'].'/'.$file;
-$original = "number.wav";
-
-if(preg_match("/msie/i", $_SERVER['HTTP_USER_AGENT']) && preg_match("/5\.5/", $_SERVER['HTTP_USER_AGENT'])) {
-    header("content-type: doesn/matter");
-    header("content-length: ".filesize("$filepath"));
-    header("content-disposition: attachment; filename=\"$original\"");
-    header("content-transfer-encoding: binary");
-} else {
-    header("content-type: file/unknown");
-    header("content-length: ".filesize("$filepath"));
-    header("content-disposition: attachment; filename=\"$original\"");
-    header("content-description: php generated data");
-}
-header("pragma: no-cache");
-header("expires: 0");
-flush();
-
-$fp = fopen($filepath, 'rb');
-
-$download_rate = 10;
-
-while(!feof($fp)) {
-    print fread($fp, round($download_rate * 1024));
-    flush();
-    usleep(1000);
-}
-fclose ($fp);
-flush();
-?>

bbs/gcaptcha/gcaptcha.js

@@ -35,37 +35,37 @@ $(function() {
     })
     .trigger("click");
 
-    $("#captcha_wav").click(function(){
+    $("#captcha_mp3").click(function(){
         $("body").css("cursor", "wait");
 
-        var wav_url = this.href+"?t="+new Date().getTime();
+        var mp3_url = this.href+"?t="+new Date().getTime();
 
         var html5use = false;
         var html5audio = document.createElement("audio");
-        if (html5audio.canPlayType && html5audio.canPlayType("audio/wav")) {
-            var wav = new Audio(wav_url);
-            wav.id = "wav_audio";
+        if (html5audio.canPlayType && html5audio.canPlayType("audio/mpeg")) {
+            var wav = new Audio(mp3_url);
+            wav.id = "mp3_audio";
             wav.autoplay = true;
             wav.controls = false;
             wav.autobuffer = false;
             wav.loop = false;
             
-            if ($("#wav_audio").length) $("#wav_audio").remove();
-            $("#captcha_wav").after(wav);
+            if ($("#mp3_audio").length) $("#mp3_audio").remove();
+            $("#captcha_mp3").after(wav);
 
             html5use = true;
         } 
         
         if (!html5use) {
-            var object = '<object id="wav_object" classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" height="0" width="0" style="width:0; height:0;">';
+            var object = '<object id="mp3_object" classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" height="0" width="0" style="width:0; height:0;">';
             object += '<param name="AutoStart" value="1" />';
             object += '<param name="Volume" value="0" />';
             object += '<param name="PlayCount" value="1" />';
-            object += '<param name="FileName" value="' + wav_url + '" />';
-            object += '<embed id="wav_embed" src="' + wav_url + '" autoplay="true" hidden="true" volume="100" type="audio/x-wav" style="display:inline;" />';
+            object += '<param name="FileName" value="' + mp3_url + '" />';
+            object += '<embed id="mp3_embed" src="' + mp3_url + '" autoplay="true" hidden="true" volume="100" type="audio/x-wav" style="display:inline;" />';
             object += '</object>';
-            if ($("#wav_object").length) $("#wav_object").remove();
-            $("#captcha_wav").after(object);
+            if ($("#mp3_object").length) $("#mp3_object").remove();
+            $("#captcha_mp3").after(object);
         }
         
         $("body").css("cursor", "default");

bbs/gcaptcha/gcaptcha.lib.php

@@ -125,7 +125,7 @@ class gcaptcha
         imagejpeg($im, G4_DATA_PATH.'/cache/'.$this->captcha_filename.'.jpg');
         imagedestroy($im);
 
-        $this->make_wav($this->captcha_filename.'.wav');
+        $this->make_mp3($this->captcha_filename);
     }
 
     function get_captcha_filename()
@@ -133,21 +133,24 @@ class gcaptcha
         return 'gcaptcha-'.abs_ip2long().'_'.session_id();
     }
 
-    function make_wav($captcha_filename)
+    function make_mp3($captcha_filename)
     {
         global $g4;
 
         $number = (string)$_SESSION['ss_captcha_key'];
-        $wavs = array();
+        $mp3s = array();
         for($i=0;$i<strlen($number);$i++){
-            $file = G4_GCAPTCHA_PATH.'/wavs/'.$number[$i].'.wav';
-            $wavs[] = $file;
+            $file = G4_GCAPTCHA_PATH.'/mp3/'.$number[$i].'.mp3';
+            $mp3s[] = $file;
         }
 
-        $wav_filepath = G4_DATA_PATH.'/cache/'.$captcha_filename;
-        $fp = fopen($wav_filepath, 'w+');
-        fwrite($fp, join_wavs($wavs));
-        fclose($fp);
+        $mp3_filepath = G4_DATA_PATH.'/cache/'.$captcha_filename.'.mp3';
+
+        $contents = '';
+        foreach ($mp3s as $mp3) {
+            $contents .= file_get_contents($mp3);
+        }
+        file_put_contents($mp3_filepath, $contents);
     }
 }
 
@@ -174,14 +177,18 @@ function captcha_html($class='captcha')
 
     $rand = rand();
     $jpg_file_url = G4_DATA_URL.'/cache/'.$obj->captcha_filename.'.jpg';
-    $wav_file_url = G4_DATA_URL.'/cache/'.$obj->captcha_filename.'.wav';
+    $mp3_file_url = G4_DATA_URL.'/cache/'.$obj->captcha_filename.'.mp3';
 
     $html .= "\n".'<script>var g4_gcaptcha_url = "'.G4_GCAPTCHA_URL.'";</script>';
     $html .= "\n".'<script src="'.G4_GCAPTCHA_URL.'/gcaptcha.js"></script>';
     $html .= '<fieldset id="captcha" class="'.$class.'">';
     $html .= '<legend class="sound_only">자동등록방지</legend>';
     $html .= '<img src="'.$jpg_file_url.'?_='.$rand.'" alt="자동등록방지 숫자">';
-    $html .= '<a href="'.$wav_file_url.'?_='.$rand.'" id="captcha_wav" target="_blank"><img src="'.G4_GCAPTCHA_URL.'/img/sound.gif" alt="숫자를 음성으로 듣기"></a>';
+    if (G4_IS_MOBILE) {
+        $html .= '<audio src="'.$mp3_file_url.'?_='.$rand.'" controls></audio>';
+    } else {
+        $html .= '<a href="'.$mp3_file_url.'?_='.$rand.'" id="captcha_mp3" target="_blank"><img src="'.G4_GCAPTCHA_URL.'/img/sound.gif" alt="숫자를 음성으로 듣기"></a>';
+    }
     $html .= '<input type="text" id="captcha_key" name="captcha_key" class="captcha_box frm_input" size="6" maxlength="6" required title="자동등록방지 숫자 입력">';
     $html .= '<p class="sound_only">자동등록방지 숫자를 순서대로 입력하세요.</p>';
     $html .= '</fieldset>';
@@ -207,50 +214,4 @@ function chk_captcha_js()
 {
     return "if (!chk_captcha()) return false;";
 }
-
-function join_wavs($wavs)
-{
-    $fields = join('/',array( 'H8ChunkID', 'VChunkSize', 'H8Format',
-                              'H8Subchunk1ID', 'VSubchunk1Size',
-                              'vAudioFormat', 'vNumChannels', 'VSampleRate',
-                              'VByteRate', 'vBlockAlign', 'vBitsPerSample' ));
-    $data = '';
-    $info = array();
-    foreach($wavs as $wav){
-        $fp     = fopen($wav,'rb');
-        $header = fread($fp,36);
-        $info   = unpack($fields,$header);
-
-        // read optional extra stuff
-        if($info['Subchunk1Size'] > 16){
-            $header .= fread($fp,($info['Subchunk1Size']-16));
-        }
-
-        // read SubChunk2ID
-        $header .= fread($fp,4);
-
-        // read Subchunk2Size
-        $size  = unpack('vsize',fread($fp, 4));
-        $size  = $size['size'];
-
-        // read data
-        $data .= fread($fp,$size);
-    }
-
-    return ''
-        .pack('a4', 'RIFF')
-        .pack('V', strlen($data) + 36)
-        .pack('a4', 'WAVE')
-        .pack('a4', 'fmt ')
-        .pack('V', $info['Subchunk1Size'])  // 16
-        .pack('v', $info['AudioFormat'])    // 1
-        .pack('v', $info['NumChannels'])    // 1
-        .pack('V', $info['SampleRate'])     // 8000
-        .pack('V', $info['ByteRate'])       // 8000
-        .pack('v', $info['BlockAlign'])     // 1
-        .pack('v', $info['BitsPerSample'])  // 8
-        .pack('a4', 'data')
-        .pack('V', strlen($data))
-        .$data;
-}
-?>
+?>

css/admin.css

@@ -36,7 +36,7 @@ h2 {font-size:1.2em}
 
 /* 캡챠 자동등록(입력)방지 기본 */
 #captcha img {border:1px solid #ddd;border-right:0}
-#captcha_wav img {border:1px solid #ddd;border-left:0;background:#494949}
+#captcha_mp3 img {border:1px solid #ddd;border-left:0;background:#494949}
 
 /* 레이아웃 */
 #hd {z-index:10;min-width:1000px;background:url('../adm/img/hd_bg.jpg') #383b3f top left repeat-x}

css/default.css

@@ -37,7 +37,7 @@ a:active {color:#000;text-decoration:underline}
 
 /* 캡챠 자동등록(입력)방지 기본 */
 #captcha img {border:1px solid #cfded8;border-right:0}
-#captcha_wav img {border:1px solid #cfded8;border-left:0;background:#494949}
+#captcha_mp3 img {border:1px solid #cfded8;border-left:0;background:#494949}
 
 /* 상단 레이아웃 */
 #hd {height:73px;border-top:3px solid #151515;border-bottom:1px solid #e7f1ed;background:#fff}

css/mobile.css

@@ -33,7 +33,7 @@ pre {overflow-x:scroll;font-size:1.1em}
 
 /* 캡챠 자동등록(입력)방지 기본 */
 #captcha img {height:1.8em;border:1px solid #cfded8;border-right:0}
-#captcha_wav img {padding:0.2em;height:22px !important;border:1px solid #cfded8;border-left:0;background:#494949}
+#captcha_mp3 img {padding:0.2em;height:22px !important;border:1px solid #cfded8;border-left:0;background:#494949}
 
 /* 상단 레이아웃 */
 #hd {background:#fff}