使用下拉菜单选择语音播报角色 - 丹恒、克拉拉等 - 常规

要将speaker=丹恒变成一个变量，并且在页面上进行选择，可以使用下拉菜单来实现。以下是完整示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>语音播报</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>

        <!--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>
                <button id="voiceBroadcastBtn" class="voiceBroadcastBtn">播报</button>
            </div>
        </div>
    </div>

    <script>
        const speakers = ['丹恒', '克拉拉', '穹', '夏彦', '左然'];
        const dropdown = document.createElement('select');
        dropdown.id = 'speakerDropdown';
        for (let i = 0; i < speakers.length; i++) {
            const option = document.createElement('option');
            option.value = speakers[i];
            option.text = speakers[i];
            dropdown.appendChild(option);
        }
        document.body.insertBefore(dropdown, document.getElementById('chatBox'));

        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 selectedSpeaker = document.getElementById('speakerDropdown').value;
            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)
                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, selectedSpeaker);
            }
        }

        function voiceBroadcast(text, speaker) {
            new Audio('https://genshinvoice.top/api?speaker=' + 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();
        }
    </script>
</body>
</html>

在上面的代码中，创建了一个下拉菜单<select>，并将其放置在了<div id="chatBox">之前。菜单中的选项来自于speakers数组。在发送消息时，通过document.getElementById("speakerDropdown").value获取当前选择的speaker值，并将其传递给voiceBroadcast函数中的URL。这样就可以根据选择的speaker播放相应的语音。