UTF-8, UTF-16, UTF-32 Charset for Korean language 패치 (euphony.js)

[kuro11pow2]

게시글 euphony.js로 이동하였습니다!

링크에서 토론해주세요!

---

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;
            }
        },

[ycs1m1yk]

자세한 설명과 정리 감사합니다!

[kuro11pow2]

😄

[seohy02]

정리감사합니다 !!!! 분기를 어디서 하면 좋을까요 ,, !!

[kuro11pow2]

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

@designe @yeonns
그러게요 이건 멘토님들이 결정해주시면 좋을 것 같습니다!
클린코드 측면에서는 좋은 방법이 아닐 수도 있는데 setCode에 인코딩 결정 매개변수를 추가해서 기본값으로 UTF16으로 설정해두면 호환성도 있을 것 같습니다.

[seohy02]

맡은 부분 utf16 해보고있는데 패리티 코드가 추가되기 전에 바꾸는 게 좋을 것 같아서 일단 분기 신경안쓰고 16진수로 변환할 때 길이가 4가 될 때까지 00을 추가하도록 해봤어요! 이렇게 하는게 맞는지 모르겠네요 😅😅
암튼 결과는 다음과 같습니다 !
abc

가나다

        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 = '';

            var c16 = '';
            for (let i = 0; i < data.length; i++) {
                c16 = data.charCodeAt(i).toString(16);
                while( c16.length < 4){
                    c16 = '0' + c16
                }
                dataCode += c16
            }
            code += dataCode;

            console.log("BEFORE : ",code);

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

            code += T.makeParallelParity(dataCode);

            console.log("AFTER : ",code);


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

[kuro11pow2]

넵 별도의 함수를 만들지 않는다면 저도 패리티 코드 추가하기 전에 붙이는 게 맞다고 생각합니다!
결과는 잘 나오는 걸로 보이네요 ㅎㅎ

[designe]

https://github.com/euphony-io/euphony.js/discussions
euphony.js 에서도 discussions를 열었습니다! 추가적인 사항은 여기서 토론하는 것도 좋겠어요! ㅎㅎ

[kuro11pow2]

넵 확인하였습니다 추가사항은 euphony.js에서 토론하겠습니다! 😄

[judemin]

넵 감사합니다!

[aiclaudev]

설명 감사드립니다!! 👍

[judemin]

정리 감사드립니다!

[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]

hello, euphony
00000068000000650000006c0000006c0000006f0000002c 000000650000007500000070000000680000006f0000006e00000079

[judemin]

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

[judemin]

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