chrome浏览器内置文字转语音服务示例代码-html代码-BFW代码库

chrome浏览器内置文字转语音服务示例代码

代码语言：html

所属分类：其他

代码描述：chrome浏览器内置文字转语音服务示例代码，支持中文等十几个国家的文字转语音。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>

*,*:before,*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

html {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 100%;
    background: #333
}

#page-wrapper {
    width: 640px;
    background: #FFF;
    padding: 1em;
    margin: 1em auto;
    border-top: 5px solid #69c773;
    box-shadow: 0 2px 10px rgba(0,0,0,0.8)
}

h1 {
    margin-top: 0
}

#msg {
    font-size: .9em;
    line-height: 1.4em
}

#msg.not-supported strong {
    color: #C00
}

input[type="text"] {
    width: 100%;
    padding: .5em;
    font-size: 1.2em;
    border-radius: 3px;
    border: 1px solid #D9D9D9;
    box-shadow: 0 2px 3px rgba(0,0,0,0.1) inset
}

input[type="range"] {
    width: 300px
}

label {
    display: inline-block;
    float: left;
    width: 150px
}

.option {
    margin: 1em 0
}

button {
    display: inline-block;
    border-radius: 3px;
    border: 0;
    font-size: .9rem;
    padding: .5rem .8em;
    background: #69c773;
    border-bottom: 1px solid #498b50;
    color: white;
    -webkit-font-smoothing: antialiased;
    font-weight: bold;
    margin: 0;
    width: 100%;
    text-align: center
}

button:hover,button:focus {
    opacity: .75;
    cursor: pointer
}

button:active {
    opacity: 1;
    box-shadow: 0 -3px 10px rgba(0,0,0,0.1) inset
}


</style>
</head>

<body>

    <div id="page-wrapper">
        <h1>JavaScript文本转语音</h1>
        <p id="msg"></p><input type="text" name="speech-msg" id="speech-msg" x-webkit-speech value="你好">
        <div class="option"><label for="voice">声音</label><select name="voice" id="voice"></select></div>
        <div class="option"><label for="volume">音量</label><input type="range" min="0" max="1" step="0.1" name="volume" id="volume" value="1"></div>
        <div class="option"><label for="rate">语速</label><input type="range" min="0.1" max="10" step="0.1" name="rate" id="rate" value="1"></div>
        <div class="option">&l.........完整代码请登录后点击上方下载按钮下载查看