鹅鹅导航 ChatGPT 客服语音播报功能实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>语音播报</title>
</head>
<body>
<button onclick='voiceBroadcast("1")'>点击播放</button>
<script>
<pre><code> function voiceBroadcast(text) {
new Audio("https://genshinvoice.top/api?speaker=丹恒&text={text}&format=wav&length=1&noise=0.5&noisew=0.9&sdp_ratio=0.2").play();
//new Audio("https://fanyi.baidu.com/gettts?lan=zh&text="+text+"&spd=5&source=web").play();
}
/**
* js默认播报
* @param {Object} text
*/
function voiceBroadcast2(text) {
var utterThis = new SpeechSynthesisUtterance();
utterThis.volume = 1; // 声音的音量 范围是0到1
utterThis.lang = 'zh';// 汉语
utterThis.rate = 0.7; // 语速，数值，默认值是1，范围是0.1到10
utterThis.pitch = 2; // 音高，数值，范围从0（最小）到2（最大）。默认值为1
utterThis.text = text;
speechSynthesis.speak(utterThis);
}
</script>
</body>
</code></pre>
</html>
————————————————
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>鹅鹅导航ChatGPT客服</title>
</head>
<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>
</div>
</code></pre>
</body>
<script>
document.getElementById('time').innerHTML = new Date().toLocaleString();
<pre><code>var defuleValue = ''
function debounce(fn, delay = 2000) {
// 是闭包中的
let timer
let changeDom = document.getElementById('chatbox_input_send')
// input事件调用的函数，相当于obj调用函数 this指向Input
return function () {
defuleValue = document.getElementById('chatInput').value
// 这个if 判断不做也没关系，判断了（除第一次非空的情况）也就是执行从第二次开始，在延迟时间内多次触发才会走该判断
if (timer) {
clearTimeout(timer)
} else {
changeDom.innerHTML = '正在询问'
changeDom.disabled = true
document.getElementById('chatInput').value = ""
}
// 此时的箭头函数的this 和 arguments 都是从外部函数继承而来
// 如果用普通函数就要用词法作用域 var that = this var arg = arguments
timer = setTimeout(() => {
// 使得传入的回调函数的this 指向Input这个元素对象
// arguments是该事件的详情，可以获得该函数被调用时的所有参数,是一个event 对象（所有Dom事件都会传event对象进入）
// 直接使用 fn() 问题也不大
fn.apply(this, arguments)
timer = null
}, delay)
}
}
// 直接使用
document.getElementById('chatbox_input_send').addEventListener('click', debounce(() => {
// 可直接使用this.value获得输入框的值; arguments可用于获取具体触发事件的信息
// console.log(defuleValue)
this.handleSend(defuleValue)
}))
document.getElementById('chatInput').addEventListener('keydown', function (event) {
if (event.keyCode == "13") {
document.getElementById('chatbox_input_send').click();
}
})
function handleSend(inputValue) {
// console.log(1);
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 () {
console.log(JSON.parse(xhr.response));
let res = JSON.parse(xhr.response)
inputDom.innerHTML = inputDom.innerHTML +
'<div class="message frnd_message"><p>' + res.choices[0].message.content + '</span><br><span>' +
new Date().toLocaleString() +
'</span> </p></div>'
document.getElementById('chatbox_input_send').innerHTML = '发送'
document.getElementById('chatbox_input_send').disabled = false
defuleValue = ""
voiceBroadcast(res.choices[0].message.content);
}
}
</code></pre>
</script>
原文地址: https://www.cveoy.top/t/topic/nROQ 著作权归作者所有。请勿转载和采集!