JSFiddle - React, Tailwind, and code Playground

by eprouver

HTML

<input id="name" type="text" value="Daniel" />
<select id='origin'>
    <option value="大急流城">Grand Rapids</option>
    <option selected value="兰辛">Lansing</option>
    <option value="芝加哥">Chicago</option>
    <option value="底特律">Detroit</option>
    <option value="旧金山">San Francisco</option>
    <option value="纽约">New York</option>
    <option value="明尼阿波利斯">Minneapolis</option>
</select>
<select id='destination'>
    <option value="大急流城">Grand Rapids</option>
    <option value="兰辛">Lansing</option>
    <option value="芝加哥">Chicago</option>
    <option value="底特律">Detroit</option>
    <option value="旧金山">San Francisco</option>
    <option value="纽约">New York</option>
    <option value="明尼阿波利斯">Minneapolis</option>
</select>
<button onclick="port()">Port Welcome</button>
<button onclick="fastBridge()">Fast Bridge</button>
<button onclick="death()">Death</button>

JavaScript

var utterance = window.SpeechSynthesisUtterance;
var voice = window.speechSynthesis;

var timeLimit = 60;

if (utterance && voice) {
    function port(name) {
        var msg = new utterance($('#name').val() + "欢迎 " + $('#origin').val() + " 贸易港口。您的出境签证将在" + timeLimit + "秒内到期。使企业迅速。尊重每个人。我们不提供任何退款。 谢谢您的合作。");
        msg.voice = voice.getVoices()[9];
        voice.speak(msg);
    }

    function fastBridge() {
        var msg = new utterance($('#name').val() + ", 欢迎来到快桥" + $('#origin').val() + "为" + $('#destination').val() + "。旅行安全。不要碰撞的边缘。不要碰撞其他飞行员。失败会带来死亡。 谢谢您的合作。");
        msg.voice = voice.getVoices()[9];
        voice.speak(msg);
    }

    function death() {
        var msg = new utterance($('#name').val() + ",你死就是好。死亡帮助，因为人类没有足够的资源。它是难以支撑不成功的人。请不要转世。 谢谢您的合作。");
        msg.voice = voice.getVoices()[9];
        voice.speak(msg);
    }

} else {
    alert('no voice');
}