如何在网页中播放原神语音API链接：解决跨域问题和代码示例
<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>
<pre><code><!--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>
</code></pre>
</div>
<p><audio id='audioPlayer' controls></audio></p>
<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`;
fetch('https://cors-anywhere.herokuapp.com/' + url)
.then(response => response.blob())
.then(blob => {
var audioPlayer = document.getElementById('audioPlayer');
audioPlayer.src = URL.createObjectURL(blob);
})
.catch(error => {
console.error('Error:', error);
});
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/nTpq 著作权归作者所有。请勿转载和采集!