由于浏览器的同源策略(Same-Origin Policy)限制,如果你的网页和音频资源不在同一个域名下,就会出现跨域问题。在你的代码中,你的网页位于'https://ai.3dlingyu.com',而音频资源的链接是'https://genshinvoice.top',这两个域名不同,因此会被浏览器阻止跨域请求。

要解决这个问题,你可以通过以下几种方式来修改你的代码:

  1. 使用代理服务器:使用一个代理服务器,将你的音频资源请求发送到代理服务器上,然后由代理服务器将结果返回给你的网页。这样可以绕过浏览器的同源策略限制。你可以在你的服务器上部署一个代理服务器,将音频资源请求发送到代理服务器上,然后将结果返回给你的网页。在代理服务器上发送请求的代码可以使用类似于你现在的代码,只需要将请求的URL改为音频资源的链接即可。
  2. 跨域资源共享(CORS):如果你有权限修改音频资源服务器的配置,你可以在服务器上设置允许跨域访问的响应头。在服务器的响应中添加一个'Access-Control-Allow-Origin'头,将其值设置为你的网页所在的域名,这样就可以允许跨域访问了。例如,在音频资源服务器的响应中添加以下响应头:
    Access-Control-Allow-Origin: https://ai.3dlingyu.com
    

    这样浏览器就会允许你的网页访问该音频资源了。

  3. 将音频资源下载到本地进行播放:如果你无法修改音频资源服务器的配置,你可以考虑将音频资源下载到你的服务器上,然后通过你的服务器将音频文件返回给你的网页。在你的服务器上,你可以使用类似于你现在的代码发送请求并下载音频文件,然后将音频文件作为响应返回给你的网页。在网页中,你可以使用HTML5的`

下面是一个修改后的示例代码:

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

    <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>
</body>

请注意,这些修改只能解决浏览器的跨域限制问题,如果你的音频资源服务器本身限制了访问权限,你仍然无法在你的网页中直接使用这些资源。

解决跨域问题:如何在网页中播放来自不同域名的音频资源

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

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