jQuery+Google Voice 文本和语音的转换

Text to speech example。自动阅读文本。还使用了materialize.js来实现按钮、滑块和下拉列表的原质化设计动效。

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3968
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function() {
    if ('speechSynthesis' in window) {
        speechSynthesis.onvoiceschanged = function() {
            var $voicelist = $('#voices');

if ($voicelist.find('option').length == 0) {
                speechSynthesis.getVoices().forEach(function(voice, index) {
                    console.log(voice);
                    var $option = $('<option>')
                        .val(index)
                        .html(voice.name + (voice.default ? ' (default)' : ''));

$voicelist.append($option);
                });

$voicelist.material_select();
            }
        }

$('#speak').click(function() {
            var text = $('#message').val();
            var msg = new SpeechSynthesisUtterance();
            var voices = window.speechSynthesis.getVoices();
            msg.voice = voices[$('#voices').val()];
            msg.rate = $('#rate').val() / 10;
            msg.pitch = $('#pitch').val();
            msg.text = text;

msg.onend = function(e) {
                console.log('Finished in ' + event.elapsedTime + ' seconds.');
            };

console.log(speechSynthesis);

speechSynthesis.speak(msg);
        })
    } else {
        $('#modal1').openModal();
    }
});

编译

CSS

HTML

<div class="container">
    <div class="row">
        <nav>
            <div class="nav-wrapper">
                <div class="col s12">
                    <a href="#" class="brand-logo">Text to speech example</a>
                </div>
            </div>
        </nav>
    </div>
    <form class="col s8 offset-s2">
        <div class="row">
            <label>Choose voice</label>
            <select id="voices"></select>
        </div>
        <div class="row">
            <div class="col s6">
                <label>Rate</label>
                <p class="range-field">
                    <input type="range" id="rate" min="1" max="100" value="10" />
                </p>
            </div>
            <div class="col s6">
                <label>Pitch</label>
                <p class="range-field">
                    <input type="range" id="pitch" min="0" max="2" value="1" />
                </p>
            </div>
            <div class="col s12">
                <p>N.B. Rate and Pitch only work with native voice.</p>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12">
                <textarea id="message" class="materialize-textarea"></textarea>
                <label>Write message</label>
            </div>
        </div>
        <a href="#" id="speak" class="waves-effect waves-light btn">Speak</a>
    </form>
</div>

<div id="modal1" class="modal">
    <h4>Speech Synthesis not supported</h4>
    <p>Your browser does not support speech synthesis.</p>
    <p>We recommend you use Google Chrome.</p>
    <div class="action-bar">
        <a href="#" class="waves-effect waves-green btn-flat modal-action modal-close">Close</a>
    </div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.95.1/js/materialize.min.js"></script>

Text to speech example。自动阅读文本。还使用了materialize.js来实现按钮、滑块和下拉列表的原质化设计动效。

编辑器支持Emmet

快捷键

Text to speech example。自动阅读文本。 还使用了materialize.js来实现按钮、滑块和下拉列表的原质化设计动效。

three.js octree 光线投射（raycasting）实现选择交互的代码示例

使用three.js和PlaneBufferGeometry构建的3d交互波浪背景动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Text to speech example。自动阅读文本。还使用了materialize.js来实现按钮、滑块和下拉列表的原质化设计动效。