更新

Author: developer

index.html

@@ -24,7 +24,7 @@ <h2>文本转语音</h2>
                         <div class="form-group">
                             <label for="api">选择API：</label>
                             <select class="form-control" id="api" required>
-                                <option value="tts-api">TTS API</option>
+                                <option value="voice-api">Voice API</option>
                             </select>
                         </div>
                         <div id="commonParams">
@@ -37,7 +37,7 @@ <h2>文本转语音</h2>
                                 <select class="form-control" id="speaker" required></select>
                             </div>
                         </div>
-                        <div id="ttsapiParams">
+                        <div id="voiceapiParams">
                             <div class="form-group">
                                 <label for="rate">语速: <span id="rateValue">0</span></label>
                                 <input type="range" class="form-control-range" id="rate" name="rate" min="-100" max="100" value="0">

script.js

@@ -1,7 +1,6 @@
 const apiConfig = {
-    "tts-api": {
+    "voice-api": {
         url: "https://ttsapi.zwei.de.eu.org/tts",
-        key: "@ak47",
         speakers: {
             "zh-CN-XiaoxiaoNeural": "晓晓",
             "zh-CN-YunxiNeural": "云希",
@@ -71,8 +70,8 @@ $(document).ready(function () {
     // 启用工具提示
     $('[data-toggle="tooltip"]').tooltip();
 
-    // 设置初始API为tts-api
-    updateSpeakerOptions('tts-api');
+    // 设置初始API为voice-api
+    updateSpeakerOptions('voice-api');
 
     // 更新所选 API 的讲述人选项
     $('#api').on('change', function () {
@@ -96,50 +95,50 @@ $(document).ready(function () {
 function generateVoice(isPreview) {
     const apiName = $('#api').val();
     const apiUrl = apiConfig[apiName].url;
-    const apiKey = apiConfig[apiName].key;
     const speaker = $('#speaker').val();
     const text = $('#text').val();
     const previewText = isPreview ? text.substring(0, 20) : text;  // 预览时获取前20个字
-    let url = `${apiUrl}?t=${encodeURIComponent(previewText)}&v=${encodeURIComponent(speaker)}&r=${encodeURIComponent($('#rate').val())}&p=${encodeURIComponent($('#pitch').val())}&o=audio-24khz-48kbitrate-mono-mp3`;
+    let url = `${apiUrl}?t=${encodeURIComponent(previewText)}&v=${encodeURIComponent(speaker)}`;
+
+    const rate = $('#rate').val();
+    const pitch = $('#pitch').val();
+    url += `&r=${encodeURIComponent(rate)}&p=${encodeURIComponent(pitch)}&o=audio-24khz-48kbitrate-mono-mp3`;
 
     $('#loading').show();
     $('#result').hide();
     $('#generateButton').prop('disabled', true);
     $('#previewButton').prop('disabled', true);
 
-    fetch(url, {
+    $.ajax({
+        url: url,
         method: 'GET',
-        mode: 'no-cors',
         headers: {
-            'x-api-key': apiKey
-        }
-    })
-    .then(response => {
-        if (!response.ok) {
-            throw new Error('Network response was not ok ' + response.statusText);
-        }
-        return response.blob();
-    })
-    .then(blob => {
-        const voiceUrl = window.URL.createObjectURL(blob);
-        $('#audio').attr('src', voiceUrl);
-        $('#audio')[0].load();
-        if (!isPreview) {
-            $('#download').attr('href', voiceUrl);
-            const timestamp = new Date().toLocaleTimeString();
-            const shortenedText = text.length > 5 ? text.substring(0, 5) + '...' : text;
-            addHistoryItem(timestamp, shortenedText, voiceUrl);
+            'x-api-key': '@ak47'  // 添加 API 密钥
+        },
+        xhrFields: {
+            responseType: 'blob' // 确保返回的是一个Blob对象
+        },
+        success: function (blob) {
+            const voiceUrl = URL.createObjectURL(blob);
+            $('#audio').attr('src', voiceUrl);
+            $('#audio')[0].load();  // 确保加载音频文件
+            if (!isPreview) {
+                $('#download').attr('href', voiceUrl);
+                const timestamp = new Date().toLocaleTimeString();  // 获取当前时间
+                const shortenedText = text.length > 5 ? text.substring(0, 5) + '...' : text;  // 截取前5个字
+                addHistoryItem(timestamp, shortenedText, voiceUrl);
+            }
+            $('#result').show();
+            $('#loading').hide();
+            $('#generateButton').prop('disabled', false);
+            $('#previewButton').prop('disabled', false);
+        },
+        error: function () {
+            alert('请求失败，请检查网络连接');
+            $('#loading').hide();
+            $('#generateButton').prop('disabled', false);
+            $('#previewButton').prop('disabled', false);
         }
-        $('#result').show();
-        $('#loading').hide();
-        $('#generateButton').prop('disabled', false);
-        $('#previewButton').prop('disabled', false);
-    })
-    .catch(error => {
-        console.error('There was a problem with your fetch operation:', error);
-        $('#loading').hide();
-        $('#generateButton').prop('disabled', false);
-        $('#previewButton').prop('disabled', false);
     });
 }
 
@@ -160,7 +159,7 @@ function addHistoryItem(timestamp, text, audioURL) {
 function playAudio(audioURL) {
     const audioElement = $('#audio')[0];
     audioElement.src = audioURL;
-    audioElement.load();
+    audioElement.load();  // 确保加载音频文件
     audioElement.play();
 }