在线语音合成工具代码

╰半橙微兮° 2024-03-22 13:25 57阅读 0赞

![95a2d720a94f4e499418c88dc621eb72.png][]

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

<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>

[95a2d720a94f4e499418c88dc621eb72.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/03da2a2c0abd48b8a0c50ee6002251ee.png