UTF-8, UTF-16, UTF-32 Charset for Korean language 패치

[kuro11pow2]

Charset 지원을 위해 수정해야 할 부분은 setCode으로 보입니다.
setCode 함수를 살펴보면 주어진 문자열 data에서 각 문자의 코드포인트(정수)를 구하고, 이를 16진수 문자열로 바꿔서 인코딩하고 있습니다. 구체적으로는 charCodeAt 메소드를 이용하는데 이 메소드는 문자의 UTF-16 표현을 정수로 반환합니다. 이 정수는 0x0000 ~ 0xFFFF 범위에서 코드포인트와 동일하기 때문에 ASCII 번호와도 일치합니다. 만약 이 정수를 UTF-16으로 나타내려면 정수로 된 문자의 UTF-16 표현을 .toString 메소드를 통해, 16진수 문자열로 바꾸고 문자열의 길이가 4가 되도록 패딩을 앞에 넣어야 합니다.

예를 들어서

'a' = U+0061 = 0x61
ASCII: '61'
UTF-16: '0061'

'a'.charCodeAt() = 0x61 = 97
// .toString(16) = 16진수 문자열 반환
// 4자리가 되도록 앞에 패딩 '00'을 줘야 함
'a'.charCodeAt().toString(16) = '61' 

(s.charCodeAt(i) 는 문자열 s의 i번째 문자의 UTF-16 표현 (정수) 입니다)

보시면 이모지 같은 경우에는 2바이트로 나타낼 수 없는 영역에 속한 문자라서 2개로 나타냅니다. (UTF-16과 동일한 방식)
저희는 기본 다국어 평면 (BMP) 상의 문자만 구현할 예정이므로 이모지는 고려하지 않으셔도 될 것 같습니다.

16진수로 인코딩한 문자열은 setInnerCode를 통해 buffer에 저장됩니다. 이 부분은 특별히 수정하지 않아도 될 것 같네요.

별도로 Charset 클래스가 존재하는 것이 아니라서 결정해야 할 부분은 UTF-8, UTF-16, UTF-32 를 어디서 분기하느냐 일 것 같습니다. 단순하게 setCode에 flag 형태로 인자를 줄 수도 있을 것 같고 별개의 함수로 만들 수도 있을 것 같습니다.

의견 부탁드립니다!

https://github.com/euphony-io/euphony.js/blob/ef4f575bc67c0450899f2b9a0a518e846296343a/euphony.js

setCode: function (data) {
            const T = this;

            /* 1) Ss is starting buffer to use trigger point
               S includes starting buffer with crossfade effect.
               s is only starting buffer.
            */
            let code = 'Ss';

            /* 2) Generate pure data code */
            let dataCode = '';
            for (let i = 0; i < data.length; i++) {
                dataCode += data.charCodeAt(i).toString(16);
            }
            code += dataCode;

            /* 3) Generate checksum & parity code */
            code += T.makeChecksum(dataCode).toString(16);
            code += T.makeParallelParity(dataCode);

            /* 4) Setting Euphony Code */
            T.setInnerCode(code);

            /* 4) copy playBuffer to web audio buffer to use Web Audio API */
            T.applyAudioBuffer();
        },

setInnerCode: function (code) {
            const T = this;

            console.log(code);
            switch (T.MODULATION_TYPE) {
                case 0: // ASK
                    for (let i = 0; i < code.length; i++) {
                        const c = code[i];
                        switch (c) {
                            /* STARTING PART */
                            case 'S': case 's':
                                T.playBuffer[T.playBufferIdx++] = T.crossfadeStaticBuffer(T.makeStaticFrequency(T.BASE_FREQUENCY - T.SPAN), 3);
                                break;
                            /* DATA CODE PART */
                            case '0': case '1': case '2':
                            case '3': case '4': case '5':
                            case '6': case '7': case '8':
                            case '9': case 'a': case 'b':
                            case 'c': case 'd': case 'e':
                            case 'f': {
                                const code_idx = parseInt(c, 16);
                                // change hexa to binary
                                const code_idx_binary = code_idx.toString(2);
                                for (let ci = 0; ci < code_idx_binary.length; ci++) {
                                    T.playBuffer[T.playBufferIdx++] = T.getOutBuffer(code_idx_binary[ci] - '0');
                                }
                            }
                                break;
                        }
                    }
                    break;
                case 1: // FSK
                    for (let i = 0; i < code.length; i++) {
                        const c = code[i];
                        switch (c) {
                            /* STARTING PART */
                            case 'S': case 's':
                                T.playBuffer[T.playBufferIdx++] = T.crossfadeStaticBuffer(T.makeStaticFrequency(T.BASE_FREQUENCY - T.SPAN), 3);
                                break;
                            /* DATA CODE PART */
                            case '0': case '1': case '2':
                            case '3': case '4': case '5':
                            case '6': case '7': case '8':
                            case '9': case 'a': case 'b':
                            case 'c': case 'd': case 'e':
                            case 'f': 
                                const code_idx = parseInt(c, 16);
                                T.playBuffer[T.playBufferIdx++] = T.getOutBuffer(code_idx);                            
                                break;
                        }
                    }
                    break;
                case 2: // CPFSK
                    for (let i = 0; i < code.length; i++) {
                        const c = code[i];
                        switch (c) {
                            /* STARTING PART */
                            case 'S':
                                T.playBuffer[T.playBufferIdx++] = T.crossfadeStaticBuffer(T.makeFrequencyByCP(T.BASE_FREQUENCY - T.SPAN), 2);
                                break;
                            case 's':
                                T.playBuffer[T.playBufferIdx++] = T.makeFrequencyByCP(T.BASE_FREQUENCY - T.SPAN);
                                break;
                            /* DATA CODE PART */
                            case '0': case '1': case '2':
                            case '3': case '4': case '5':
                            case '6': case '7': case '8':
                            case '9': case 'a': case 'b':
                            case 'c': case 'd': case 'e':
                            case 'f': 
                                const code_idx = parseInt(c, 16);
                                T.playBuffer[T.playBufferIdx++] = T.getOutBuffer(code_idx);
                                break;
                        }
                    }
                    // fade out
                    T.playBuffer[T.playBufferIdx - 1] = T.crossfadeStaticBuffer(T.playBuffer[T.playBufferIdx - 1], 1);
                    break;
            }
        },

[judemin]

UTF-32 변환하는 코드 작성했습니다!
혹시나 방법이 틀렸다면 꼭 코멘트 달아주세요

setCode: function (data) {
            const T = this;

            /* 1) Ss is starting buffer to use trigger point
               S includes starting buffer with crossfade effect.
               s is only starting buffer.
            */
            let code = 'Ss';

            /* 2) Generate pure data code */
            let dataCode = '';
            
            for (let i = 0; i < data.length; i++) {
                let nowChar = data.charCodeAt(i).toString(16);
                let u32 = nowChar;

                for(let j = nowChar.length; j < 8; j++)
                    u32 = '0' + u32;

                console.log("" + i + " : " + u32);
                dataCode += u32;
            }
            code += dataCode;
            console.log("result : " + code);

            /* 3) Generate checksum & parity code */
            code += T.makeChecksum(dataCode).toString(16);
            code += T.makeParallelParity(dataCode);
            

            /* 4) Setting Euphony Code */
            T.setInnerCode(code);

            /* 4) copy playBuffer to web audio buffer to use Web Audio API */
            T.applyAudioBuffer();
        }

변환하는 과정에서 문자를 하나하나 찍어서 결과를 보일 수 있게 했습니다.

[judemin]

위 이미지는 콘솔 출력입니다.

[judemin]

참고로 UTF-32 변환시에는
https://www.branah.com/unicode-converter
위 사이트를 참고하였습니다!

[judemin]

"hello, euphony"
"00000068000000650000006c0000006c0000006f0000002c 000000650000007500000070000000680000006f0000006e00000079"

[kuro11pow2]

kuro11pow2@f5a29be

@judemin @seoh02h @designe @yeonns
올려주신 메소드들과 제 구현을 합쳐서 커밋했습니다👍 테스트 부탁드립니다!!
setCode 메소드의 매개변수로 encodingType을 추가해서 타입에 맞게 data code를 생성하도록 해보았습니다.

[seohy02]

감사합니다!!!! 테스트해볼게요!

[judemin]

감사합니다 ㅎㅎ

[kuro11pow2]

후속 과제용 참고자료입니다

JS에서 코드포인트 가져오기: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/codePointAt
언어별 문자열 길이에 대한 설명: https://hsivonen.fi/string-length/

[Jsueeee]

👍

[judemin]

감사합니다!