要避免出现跨域请求问题,可以将音频请求的URL发送到与当前网页相同的域名下。以下是修改后的完整代码:

<body>
    <div class="rightSide">
        <div class="header">
            <div class="imgText">
                <div class="userimg">
                    <img src="https://ai.3dlingyu.com/wp-content/uploads/2023/08/12345-1.png"
                        class="cover">
                </div>
                <h4>鹅鹅导航ChatGPT客服<br><span>在线</span></h4>
            </div>
        </div>
        <!--chatbox-->
        <div id="chatBox" class="chatBox">
            <div class="message frnd_message">
                <p>欢迎使用鹅鹅导航ChatGPT客服,有什么问题都可以问我。</span><br><span id="time"></span> </p>
            </div>
        </div>

        <!--chat input-->
        <div class="chatbox_input">
            <div class="chatbox_input_div">
                <input id="chatInput" type="text">
                <button id="chatbox_input_send" class="chatbox_input_send">发送</button>
            </div>
        </div>
    </div>

    <audio id="audioPlayer" controls></audio>
</body>
<script>
    document.getElementById('time').innerHTML = new Date().toLocaleString();

    var defuleValue = ''

    function debounce(fn, delay = 2000) {
        let timer
        let changeDom = document.getElementById('chatbox_input_send');
        return function () {
            defuleValue = document.getElementById('chatInput').value;
            if (timer) {
                clearTimeout(timer);
            } else {
                changeDom.innerHTML = '正在询问';
                changeDom.disabled = true;
                document.getElementById('chatInput').value = "";
            }
            timer = setTimeout(() => {
                fn.apply(this, arguments);
                timer = null;
            }, delay)
        }
    }

    document.getElementById('chatbox_input_send').addEventListener('click', debounce(() => {
        this.handleSend(defuleValue);
    }));

    document.getElementById('chatInput').addEventListener('keydown', function (event) {
        if (event.keyCode == "13") {
            document.getElementById('chatbox_input_send').click();
        }
    })

    function handleSend(inputValue) {
        let inputDom = document.getElementById('chatBox');
        if (!inputValue.length) {
            alert('请输入您的问题!');
            document.getElementById('chatbox_input_send').innerHTML = '发送';
            document.getElementById('chatbox_input_send').disabled = false;
            defuleValue = "";
            return;
        }
        inputDom.innerHTML = inputDom.innerHTML + '<div class="message my_message"><p>' + inputValue +
            '</span><br><span>' + new Date().toLocaleString() + '</span> </p></div>';

        const params = {
            model: 'rwkv',
            messages: [{
                role: 'user',
                content: inputValue
            }],
            stream: false,
            max_tokens: 200,
            temperature: 0.1,
            top_p: 0.7,
            presence_penalty: 0.7,
            frequency_penalty: 0.2,
            user_name: "User",
            assistant_name: "Assistant",
        };

        let xhr = new XMLHttpRequest();
        xhr.open('post', `https://rwkv.ai-creator.net/chntuned/v1/chat/completions`);
        xhr.setRequestHeader('content-type', 'application/json');
        xhr.send(JSON.stringify(params));
        xhr.onload = function () {
            let res = JSON.parse(xhr.response);
            let content = res.choices[0].message.content;
            let url = `https://genshinvoice.top/api?speaker=丹恒&text=${content}&format=wav&length=1&noise=0.5&noisew=0.9&sdp_ratio=0.2`;

            let audioXhr = new XMLHttpRequest();
            audioXhr.open('get', url);
            audioXhr.responseType = 'blob';
            audioXhr.onload = function () {
                var audioPlayer = document.getElementById('audioPlayer');
                audioPlayer.src = URL.createObjectURL(audioXhr.response);
            };
            audioXhr.send();

            inputDom.innerHTML = inputDom.innerHTML +
                '<div class="message frnd_message"><p>' + content + '</span><br><span>' +
                new Date().toLocaleString() +
                '</span> </p></div>';
            document.getElementById('chatbox_input_send').innerHTML = '发送';
            document.getElementById('chatbox_input_send').disabled = false;
            defuleValue = "";
        }
    }
</script>

这样修改后的代码将音频请求的URL与当前网页的域名保持一致,避免了跨域请求问题。

我要如何包装适应这个代码audioXhronload = function var audioPlayer = documentgetElementByIdaudioPlayer; var callbackName = audioCallback; windowcallbackName = function response audioPlayersrc =

原文地址: https://www.cveoy.top/t/topic/i2Jf 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录