在线语音合成工具代码

 

• 语音合成软件
• 语音合成助手免费版下载
• 语音合成助手
• 语音合成技术
• 语音合成器
• 语音合成工具下载
• 语音合成软件哪个好用
• 语音合成软件免费版
• 语音合成网易有道智云
• 语音合成网站

<div class="container mx-auto" id="app">
      <div class="card lg:card-side bordered shadow-lg">
        <div class="card-body overflow-auto">
          <div class="main">
            <div class="alert shadow-lg">
              <div class="flex-1">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="#2196f3"
                  class="w-6 h-6 mx-2"
                >
                  <path
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                  ></path>
                </svg>
                <label>本地生成，由于浏览器的不同，音色会有不同</label>
              </div>
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text">字符串</span>
              </label>
              <textarea
                v-model="set.input"
                class="textarea textarea-bordered h-64"
              ></textarea>
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text">音色</span>
              </label>
              <select class="select select-primary" v-model="set.voice">
                <option v-for="item in set.voices">{
   
   {item.name}}</option>
              </select>
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text">语速</span>
                <span class="label-text-alt">{
   
   {set.rate}}</span>
              </label>
              <input
                type="range"
                min="0"
                max="3"
                step="0.1"
                v-model="set.rate"
                class="range"
              />
            </div>
            <div class="form-control">
              <label class="label">
                <span class="label-text">音高</span>
                <span class="label-text-alt">{
   
   {set.pitch}}</span>
              </label>
              <input
                type="range"
                min="0"
                max="3"
                step="0.1"
                v-model="set.pitch"
                class="range"
              />
            </div>
            <div class="card-actions mt-4">
              <button class="btn btn-primary flex-1" @click="play">播放</button>
              <button class="btn btn-primary flex-1" @click="reset">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  class="h-5 w-5"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    fill-rule="evenodd"
                    d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
                    clip-rule="evenodd"
                  />
                </svg>
                清空
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      new Vue({
        el: "#app",
        data: {
          set: {
            input: "山有木兮木有枝，心悦君兮君不知。",
            rate: 1,
            pitch: 1,
            voice: 1,
            voices: []
          },
          synth: null
        },
        created() {
          if (window.speechSynthesis === undefined) {
            $message.error("该浏览器不支持语音生成，请更换Chrome浏览器后重试");
            return;
          }
          this.synth = window.speechSynthesis;
          window.speechSynthesis.onvoiceschanged = e => {
            this.set.voices = window.speechSynthesis.getVoices();
            this.set.voice = this.set.voices[0].name;
          };
        },
        methods: {
          play() {
            try {
              const utterThis = new SpeechSynthesisUtterance(this.set.input);
              this.set.voices.forEach(value => {
                if (this.set.voice === value.name) {
                  utterThis.voice = value;
                }
              });
              utterThis.pitch = this.set.pitch;
              utterThis.rate = this.set.rate;
              this.synth.cancel();
              this.synth.speak(utterThis);
            } catch (e) {
              $message.error(e);
            }
          },
          reset() {
            this.set.input = "";
          }
        }
      });
    </script>