如何在网页中播放原神丹恒语音：完整代码示例
<p>"""<body>\n <div class="rightSide">\n <div class="header">\n <div class="imgText">\n <div class="userimg">\n <img src="https://ai.3dlingyu.com/wp-content/uploads/2023/08/12345-1.png"\n class="cover">\n </div>\n <h4>鹅鹅导航ChatGPT客服<br><span>在线</span></h4>\n </div>\n </div>\n <!--chatbox-->\n <div id="chatBox" class="chatBox">\n <div class="message frnd_message">\n <p>欢迎使用鹅鹅导航ChatGPT客服，有什么问题都可以问我。</span><br><span id="time"></span> </p>\n </div>\n </div>\n \n <!--chat input-->\n <div class="chatbox_input">\n <div class="chatbox_input_div">\n <input id="chatInput" type="text">\n <button id="chatbox_input_send" class="chatbox_input_send">发送</button>\n </div>\n </div>\n </div>\n \n <audio id="audioPlayer" controls></audio>\n</body>\n<script>\n document.getElementById('time').innerHTML = new Date().toLocaleString();\n \n var defuleValue = ''\n \n function debounce(fn, delay = 2000) {\n let timer\n let changeDom = document.getElementById('chatbox_input_send');\n return function () {\n defuleValue = document.getElementById('chatInput').value;\n if (timer) {\n clearTimeout(timer);\n } else {\n changeDom.innerHTML = '正在询问';\n changeDom.disabled = true;\n document.getElementById('chatInput').value = "";\n }\n timer = setTimeout(() => {\n fn.apply(this, arguments);\n timer = null;\n }, delay);\n }\n }\n \n document.getElementById('chatbox_input_send').addEventListener('click', debounce(() => {\n this.handleSend(defuleValue);\n }));\n \n document.getElementById('chatInput').addEventListener('keydown', function (event) {\n if (event.keyCode == "13") {\n document.getElementById('chatbox_input_send').click();\n }\n });\n \n function handleSend(inputValue) {\n let inputDom = document.getElementById('chatBox');\n if (!inputValue.length) {\n alert('请输入您的问题！');\n document.getElementById('chatbox_input_send').innerHTML = '发送';\n document.getElementById('chatbox_input_send').disabled = false;\n defuleValue = "";\n return;\n }\n inputDom.innerHTML = inputDom.innerHTML + '<div class="message my_message"><p>' + inputValue +\n '</span><br><span>' + new Date().toLocaleString() + '</span> </p></div>';\n const params = {\n model: 'rwkv',\n messages: [{\n role: 'user',\n content: inputValue\n }],\n stream: false,\n max_tokens: 200,\n temperature: 0.1,\n top_p: 0.7,\n presence_penalty: 0.7,\n frequency_penalty: 0.2,\n user_name: "User",\n assistant_name: "Assistant",\n };\n let xhr = new XMLHttpRequest();\n xhr.open('POST', <code>https://rwkv.ai-creator.net/chntuned/v1/chat/completions</code>);\n xhr.setRequestHeader('Content-Type', 'application/json');\n xhr.send(JSON.stringify(params));\n xhr.onload = function () {\n let res = JSON.parse(xhr.response);\n let content = res.choices[0].message.content;\n let url = <code>https://genshinvoice.top/api?speaker=丹恒&text=${content}&format=wav&length=1&noise=0.5&noisew=0.9&sdp_ratio=0.2</code>;\n\n let audioXhr = new XMLHttpRequest();\n audioXhr.open('GET', url);\n audioXhr.responseType = 'blob';\n audioXhr.onload = function () {\n var audioPlayer = document.getElementById('audioPlayer');\n audioPlayer.src = URL.createObjectURL(audioXhr.response);\n };\n audioXhr.send();\n \n inputDom.innerHTML = inputDom.innerHTML +\n '<div class="message frnd_message"><p>' + content + '</span><br><span>' +\n new Date().toLocaleString() +\n '</span> </p></div>';\n document.getElementById('chatbox_input_send').innerHTML = '发送';\n document.getElementById('chatbox_input_send').disabled = false;\n defuleValue = "";\n }\n }\n</script>\n"""您可以将以下代码插入到您的HTML文件中，以在页面中播放音频：\n\n<code>html\n<audio id="audioPlayer" controls></audio>\n</code>\n\n然后，在JavaScript代码中的<code>handleSend</code>函数中添加以下代码：\n\n<code>javascript\nlet url = `https://genshinvoice.top/api?speaker=丹恒&text=${content}&format=wav&length=1&noise=0.5&noisew=0.9&sdp_ratio=0.2`;\n\nlet audioXhr = new XMLHttpRequest();\naudioXhr.open('GET', url);\naudioXhr.responseType = 'blob';\naudioXhr.onload = function () {\n var audioPlayer = document.getElementById('audioPlayer');\n audioPlayer.src = URL.createObjectURL(audioXhr.response);\n};\naudioXhr.send();\n</code>\n\n这段代码将使用XMLHttpRequest从给定的URL获取音频文件，并使用<code>URL.createObjectURL</code>将其链接到<code>audioPlayer</code>元素的<code>src</code>属性上。这将使得音频可以在页面上播放。\n</p>
原文地址: https://www.cveoy.top/t/topic/nTAN 著作权归作者所有。请勿转载和采集!